If you’re doing a lot of CSS in your web development, you may have taken to using SASS or LESS to allow you to better organise, code and maintain your stylesheets. These are both great tools. However, the one thing that annoys me is having to remember the command to compile them, given it is often different for each project.
Luckily Gulp, a Node-based task runner, can come to the rescue.
This has the added advantage that you can also pipe it through other tools, allowing you to create maps and minify the CSS all in one command that makes it super easy.
Firstly, you need to add the dependencies so that NPM knows what to install.
{
"devDependencies" : {
"gulp" : "*",
"gulp-sass" : "*",
"gulp-minify-css" : "*",
"gulp-sourcemaps" : "*"
}
}
You can then run NPM install to get all the modules you need. If these are the only modules you are using you will probably need to modify your .gitignore file to ignore the node modules directory.
node_modules/
Now we can create a gulpfile.js in the root of our project directory that will define the tasks we want to run.
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('sass', function () {
gulp.src('./sass-files/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(sourcemaps.write('./sass-maps'))
.pipe(gulp.dest('./stylesheets'));
});
gulp.task('sass:watch', function () {
gulp.watch('./style/*.scss', ['sass']);
});
The first task creates a “gulp sass” command that takes the SASS file, converts it to CSS, minifies it, builds the source map and then writes it out. I’ve set the compatibility to ie8, though it could also be ie7, and defaults to ie9.
The second task creates a “gulp sass:watch” which watches the files for changes and then calls the first task whenever it detects a change.
If you are using LESS you will need a slightly different set of dependencies.
{
"devDependencies" : {
"gulp" : "*",
"gulp-less" : "*"
}
}
The tasks are slightly different too, but basically do the same thing.
'use strict';
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task('less', function () {
return gulp.src('./app/resources/less/*.less')
.pipe(less())
.pipe(gulp.dest('./app/webroot/css'));
});
gulp.task('less:watch', function () {
gulp.watch('./app/resources/less/*.less', ['less']);
});
The end result of this is that rather than remembering what the specific paths for any project I want to work on, I can create a Gulp task and simply run “gulp sass” or “gulp less”. I could even just rename them to “gulp css” to use the same name on every project I work on.
