Skip to content

Instantly share code, notes, and snippets.

@xzyfer
Last active August 24, 2019 09:05
Show Gist options
  • Save xzyfer/1225f52c370b511c1fed to your computer and use it in GitHub Desktop.
Save xzyfer/1225f52c370b511c1fed to your computer and use it in GitHub Desktop.
True incremental sass compilation
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']);
{
"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"
}
}
@jbielick
Copy link

You're a hero.

@digitaldonkey
Copy link

Which node version?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment