Using LibSass, Gulp & BrowserSync for a Drupal 8 Theme

In one of my previous posts I wrote about creating a Drupal 8 theme using Ruby's Bundler for Sass and other useful Front End tools. Today I wanted to share my experience in setting up LibSass, Node, Gulp and BrowserSync for a Drupal 8 theming workflow.

What is LibSass and how is it different from your regular Sass?

LibSass is the same Sass you've been using for a while just implemented in C instead of Ruby. It is basically a C/C++ port of the Sass engine.

Sass was originally written in Ruby and the idea of porting it to other languages came from trying to open it up to other environments and not force everyone to only use Ruby in order to compile Sass.

The main advantage of LibSass is its speed. Ruby's Sass can be slow at times. LibSass allows a lower compile time significantly. It’s blazingly fast and provides a massive (>10x) speed improvement over the original Ruby Sass. Here is the speed comparison.

However, for sometime one of the disadvantages of LibSass was its lack of features. It was a bit behind the Ruby Sass gem and was updated less frequently. Using LibSass meant that you would not be able to utilize some of the cutting edge Sass features. But at SassConf 2014 it was announced that Ruby Sass will now wait for feature parity with LibSass and they will be maintained at the same speed. As of today the latest release of LibSass is 3.0.2 (Daughter of Dragon).

Using LibSass in Gulp workflow

LibSass is just a library. To run the code locally, you need an implementer. There are a number of those for LibSass - one of them is written for Node.

So to get going I needed to set up node-sass in a Gulp workflow. Gulp-sass is just a wrapper for node-sass, which in turn is a node front end for LibSass.

I've already had node & npm set up on my system with homebrew , if you don't you'll need to set them up first:

brew install node

Then Install Gulp globally

npm install -g gulp 

If you already have node, check which versions you have with: node -v, npm -v and if needed upgrade.

Gulp your Drupal 8 theme

Gulp is a task runner for your front end build process. First I needed to initiate node and its dependencies in my project directory.

So basically cd into project or theme directory and run npm init. This will walk you through creating a package.json file.

Here is list of node modules I've wanted to try and added to my Package.json file.

"devDependencies": {
  "gulp": "^3.8.9",
  "gulp-sass": "^1.1.0",
  "gulp-filter": "^1.0.2",
  "browser-sync": "^1.3.6",
  "gulp-sourcemaps": "1.2.8",
  "gulp-shell": "0.2.10"
}

You can use npm install package-name--save to install a package and save it as a dependency in the package.json file. This will create a node_modules folder where Gulp and plug-in code resides. Finally, create an empty gulpfile.js configuration file. This is used to define tasks.

Gulpfile.js for task running

Basicaly you declare separate tasks that you want to run and state those in your gulpfile.js file. Here is an example of a task I am using to compile my scss:

gulp.task('sass', function () {
    return gulp.src('scss/**/*.scss')
        .pipe(sourcemaps.init())
            .pipe(sass({
                //outputStyle: 'compressed',
                outputStyle: 'nested',
                precision: 10,
                onError: function (err) {
                    notify().write(err);
                }
            }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('css'))
        .pipe(filter('scss**/*.css'))
        .pipe(browserSync.reload({stream:true}));
});

You can specify different commands for Gulp to run different tasks: Watch, Optimize, etc. I am just using the Default task which you can run by simply typing gulp in the terminal. Gulp will start watching sass and js files for changes and when a change is detected it will run the styles and scripts tasks. You can configure Gulp to run all kinds of tasks including Drush.

Here is a Gist of what I ended up with in my gulp.js file for now. I am still experimenting with this set up but these main tasks got me started.

Drupal 8 theme directory structure

This set up doesn't really affect how your Drupal theme is structured. We are only concerned about providing right paths for Gulp so it knows where our scss and js directories are. The same set up can be used on a Drupal 7 theme as well. Here is my theme structure:

BrowserSync

BrowserSync is similar to Livereload, however it helps you test your site on multiple devices over a shared network. BrowserSync makes your workflow faster by synchronising URLs, interactions and code changes across multiple devices. It’s wicked-fast and totally free.

So every time you make changes in your sass or js files your browser will automatically reload and inject new css or template changes on all the connected devices. Here is a short screen share of my set up.

Drupal 8 debug: true

One more thing I wanted to mention is that you want to set the debug: true in your Drupal 8 services.yaml file in sites/default/ this shows you where your templates are coming from and clears caches on template changes. I've written about it in my previous post.

Happy theming!