Last active
August 24, 2019 09:05
-
-
Save xzyfer/1225f52c370b511c1fed to your computer and use it in GitHub Desktop.
True incremental sass compilation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var production = process.env.APP_ENV === "test"; | |
var gulp = require('gulp'); | |
var gutil = require('gulp-util'); | |
var sass = require('gulp-sass'); | |
var cssmin = require('gulp-minify-css'); | |
var prefix = require('gulp-autoprefixer'); | |
var newer = require('gulp-newer'); | |
var print = require('gulp-print'); | |
var notify = require('gulp-notify'); | |
var batch = require('gulp-batch'); | |
var duration = require('gulp-duration'); | |
var livereload = require('gulp-livereload'); | |
var grapher = require('sass-graph'); | |
var touch = require('touch'); | |
var path = require('path'); | |
// ----------------------------------------------------------------------------- | |
// Disable notifier printing to the console. | |
// ----------------------------------------------------------------------------- | |
notify.logLevel(0); | |
// ----------------------------------------------------------------------------- | |
// Build the sass import graph | |
// ----------------------------------------------------------------------------- | |
graph = grapher.parseDir('./assets/css', { | |
loadPaths: ['./assets/components', './assets/css'] | |
}); | |
// ----------------------------------------------------------------------------- | |
// Watch sass files for changes and trigger compilation | |
// ----------------------------------------------------------------------------- | |
gulp.task('dev', function() { | |
// | |
// Boot live reload server | |
// | |
livereload.listen(); | |
// | |
// Find the compilation targets for the changed file and make it as dirty | |
// | |
gulp.watch('./assets/css/**/*.scss', function(event) { | |
graph.visitAncestors(event.path, function(parent) { | |
if (path.basename(parent).match(/^_/)) return; | |
touch.sync(parent); | |
}); | |
}); | |
// | |
// Dedup change events and run the compilation once | |
// | |
gulp.watch(['./assets/css{/,/pages/}*.scss'], batch({ | |
timeout: 50 | |
}, function(events) { | |
gulp.run('css'); | |
return events.pipe(gutil.noop()); | |
})); | |
}); | |
// ----------------------------------------------------------------------------- | |
// Sass compilation task | |
// ----------------------------------------------------------------------------- | |
gulp.task('css', function() { | |
gulp.src('./assets/css{/,/pages/}*.scss') | |
.pipe(newer({ | |
dest: './web/dist/css', | |
ext: '.css' | |
})) | |
.pipe(print(function(filepath) { | |
return 'compiling: ' + filepath; | |
})) | |
.pipe(sass({ | |
includePaths: ['./assets/components', './assets/css'], | |
sourceMap: false, | |
})) | |
.pipe(print(function(filepath) { | |
return 'prefixing: ' + filepath; | |
})) | |
.pipe(prefix({ | |
browsers: ['last 2 version', 'firefox esr', 'opera 12.1', 'android 4', 'explorer 9'], | |
cascade: false, | |
})) | |
.pipe(production ? print(function(filepath) { | |
return 'minifying: ' + filepath; | |
}) : gutil.noop()) | |
.pipe(production ? cssmin({ | |
processImport: false, | |
noRebase: true, | |
}) : gutil.noop()) | |
.pipe(duration('Compiling files')) | |
.pipe(notify('Compiled: <%= file.relative %>!')) | |
.pipe(gulp.dest('./web/dist/css')) | |
.pipe(livereload()); | |
}); | |
gulp.task('default', ['css']); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"name": "swiftly", | |
"version": "0.0.0", | |
"repository": { | |
"type": "git", | |
"url": "https://github.com/99designs/swiftly.git" | |
}, | |
"dependencies": { | |
"bower": "^1.3", | |
"distancss": "0.0.9" | |
}, | |
"devDependencies": { | |
"gulp": "^3.8.10", | |
"gulp-autoprefixer": "^2.0.0", | |
"gulp-batch": "^1.0.4", | |
"gulp-duration": "0.0.0", | |
"gulp-livereload": "^3.4.0", | |
"gulp-minify-css": "^0.3.12", | |
"gulp-newer": "^0.5.0", | |
"gulp-notify": "^2.1.0", | |
"gulp-print": "^1.1.0", | |
"gulp-sass": "git://github.com/xzyfer/gulp-sass#fix/node-sass-bad-maps", | |
"gulp-util": "^3.0.2", | |
"lodash": "^2.4.1", | |
"node-sass": "git://github.com/xzyfer/node-sass", | |
"sass-graph": "^1.0.1", | |
"touch": "0.0.3" | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You're a hero.