Using Gulp and LibSass instead of Compass

I been using compass to compile our sass files for a long time, however I always hated that compass is soooo slooooow so I wanted to try something new so I have tried with LibSass and this is what I found.

LibSass is a C/C++ port of the Sass engine. The point is to be simple, faster, and easy to integrate. Find out more about the project over at GitHub.

For some time now, the Sass Ruby gem has been getting more advanced features, while LibSass has been updated less quickly. This means that many people using LibSass to compile their Sass (usually through node-sass in a Grunt/Gulp workflow) have been unable to use cutting edge Sass tools.

What makes LibSass so important, however? The biggest advantage over Ruby Sass is that it’s faster, much faster. If faster compile times sound good to you, here’s a good introduction to installing LibSass.

First, Install Node.Js, on Ubuntu do this:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

sudo apt-get install nodejs

Then install Gulp, we will use gulp to call LibSass and run our compiling tasks.

npm install --global gulp-cli

Third, go to your project, your theme folder or where you have the sass files and run npm init to initialize a package.json.

npm init

Then install the dependencies

npm install gulp gulp-sass gulp-sourcemaps --save-dev

NOTE : That needs to be run just the first time to initialize the package.json, in the future to initialise a new environment use npm install.

Third write a gulpfile.js for gulp, the file needs to have a task to call libsass, indicate where are the sass file and where should go the output, among other stuffs. This is my file

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('sass', function () {
 // gulp.src locates the source files for the process.
 // This globbing function tells gulp to use all files
 // ending with .scss or .sass within the scss folder.
 gulp.src('./sass/**/*.{scss,sass}')
 // Converts Sass into CSS with Gulp Sass
 // Outputs CSS files in the css folder
 .pipe(sourcemaps.init())
 .pipe(sass({errLogToConsole: true}))
 .pipe(sourcemaps.write())
 .pipe(gulp.dest('./stylesheets'));
});

gulp.task('watch', function() {
 // Watches the scss folder for all .scss and .sass files
 // If any file changes, run the sass task
 gulp.watch('./scss/**/*.{scss,sass}', ['sass'])
});

 

As you can see I have created two tasks, one for compile and another for watch (live monitor for changes).

To compile the sass files you need to run, in the directory where the gulpfile.js is located.

gulp sass

That’s all, your compiled css will be in stylesheets directory. You can link that file in your html.

Happy Hacking