Getting SASSy with Gulp in Visual Studio

In my previous blog I showed you how to set up Visual Studio for use with Gulp. Now I want to show you how you can use it in everyday development, including processing SASS, running tests, linting your code and getting ready for deployment.

In this series of posts I’ll talk about how you can use Gulp with Visual Studio to run your common front end tasks:

• Part 1: Setting up Gulp with Visual Studio
• Part 2: Getting SASSy
• Part 3: Deployment: minification and concatenation
• Part 4: Code quality: tests and linting
• Part 5: Thoughts on Gulp

The code I’ll be showing is based off a standard MVC 5 project. If you want the code I’ve created a GitHub project for it here.

Basic Gulpfile + package.json

Throughout these examples I’ll be using gulp-load-plugins – an awesome meta-plugin that takes all your Gulp plugins from your package.json and attaches them to an object. At the start, the package.json file looks like this:

{
  "scripts": {"install": "echo Done"},
    
  "devDependencies": {
    "gulp": "~3.9.0",
    "gulp-load-plugins": "~0.10.0"
  } 
}

N.B. I like outputting something to the console after installing packages as the default is to not output anything, which can be a little confusing!

The basic gulpfile looks like this:

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();

gulp.task('default', ['']);

Now, any plugins we add to our package.json will immediately be available on the plugins object.

Processing SASS

I’m a big fan of SASS for developing CSS as it helps keep my CSS clean and DRY. SASS files need processing, and Gulp can do this for you. As a bonus, we can add sourcemaps so that when we inspect the page in Firefox, Chrome or IE 11 we refer back to the original SASS rather than the processed CSS. As a double bonus, we can use LiveReload to reload the page and automatically see our changes whenever we make a change to the SASS (note with LiveReload on Windows you’ll need the Chrome extension for the best experience).

First off, we add the SASS file. For this demo project, based on MVC 5, this is simple – rename the Site.css file to Site.scss. As SASS is a superset of CSS, all valid CSS is valid SASS.

Next, we add the plugins we’ll need to the package.json:

{
  "scripts": { "install": "echo Done" },
    
  "devDependencies": {
    "gulp": "~3.9.0",
    "gulp-load-plugins": "~0.10.0",
    "gulp-sass": "~2.0.4",
    "gulp-sourcemaps": "~1.5.2",
    "gulp-autoprefixer": "~2.3.1",
    "gulp-livereload": "~3.8.0"
  } 
}

Next, add the gulp tasks – one to process the SASS into CSS, and another to watch the SASS files and recompile whenever we make a change:

var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();

gulp.task('sass', function () {
    gulp.src('./Content/*.scss')
        .pipe(plugins.sourcemaps.init())
        .pipe(plugins.sass())
        .pipe(plugins.autoprefixer())
        .pipe(plugins.sourcemaps.write())
        .pipe(gulp.dest('./Content'))
        .pipe(plugins.livereload())
    ;
});

gulp.task('watch-sass', function () {
    plugins.livereload.listen();
    gulp.watch('./Content/*.scss', ['sass']);
});

gulp.task('default', ['watch-sass']);

Here’s a line by line breakdown of what is happening within our ‘sass’ task:

• Line 5: Grab all our SASS files from the Content folder. At the moment this is just the Site.scss file, but as we build this up we’ll want to add different SASS files for different parts of the project
• Line 6: Initialise the sourcemaps. Note that this must be done before they get processed
• Line 7: Process the SASS to generate the CSS
• Line 8: Use autoprefixer to add any vendor-specific prefixes to the CSS. The defaults for the plugin target any browser with >1% share, which is eminently sensible
• Line 9: Insert the sourcemaps into the generated CSS
• Line 10: Write the generated CSS back to the Content directory
• Line 11: Notify LiveReload that we’ve made changes

The ‘watch-sass’ task simply tells LiveReload to start listening, watches our SASS files for any changes, and when they are changed runs our ‘sass’ task. This watch has also been added to the default task, so will run automatically. Now, when we make a change to the Site.scss file the css will automatically get generated, and we get all the other goodness from our other plugins too.

Sourcemaps

Below I’ve changed the Site.scss file so that the text in the Jumbtron is blue, and have inspected it in Chrome. You’ll notice the red box in the inspector refers to the Site.scss file (not the generated Site.css file) , thanks to sourcemaps.

LiveReload

If you open the site in Chrome and start the LiveReload extension, any time a change is made to the SASS the web page will automatically reload with the changes. Here the color of the jumbotron text is switching between red and blue, and automatically updating:

Wrapping up

So there we are! Automatic processing of SASS with Gulp, along with a few other goodies. The commit for eveything I’ve shown is here.

One thing to note is that in this task we didn’t do anything minification to the CSS – I’ll come on to that in my next post.