Setting up Gulp for compiling SASS in Visual Studio 2015

I’ve been meaning to use gulp for compiling sass files in Visual Studio for a while. Using gulp instead of a Visual Studio extension gives the advantage of not always having to be in visual studio. I’ve used gulp in other projects where it was already setup and working, but have never set it up myself. I figured it was time for that to change.

Step 1: Install nodejs if you haven’t already. This gives access to the Node Package Manager (NPM). You can download nodejs using the link below.
https://nodejs.org/en/download/

Step 2; Add the variable NODE_PATH with a value of %AppData%\npm\node_modules. If it’s already in your environment, then you don’t need to do anything. This will give you access to globally installed packages from the command line without having to type the full path.

Step 3: Install gulp using NPM. In a command window or PowerShell type the command below and press enter.
npm install -g gulp
NPM will start installing gulp globally for your system, as denoted by the -g flag.

Step 4: Start up Visual Studio 2015 and create a new project or open an existing project.

Step 5: Add two new files in Visual Studio called “NPM Configuration File” and “Gulp Configuration File”.

  • package.json – NPM Configuration File
  • gulpfile.js – Gulp Configuration File

Note: If the templates aren’t available in Visual Studio you can create a normal json and a js file, and name them package.json and gulpfile.js.

Step 6: Modify the package.json file so it looks like the configuration below. You can change the values as you like, but the important part is the devDependencies section.

{
  "name": "ASP.NET",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-plumber": "1.0.1",
    "gulp-autoprefixer": "^2.0.0",
    "gulp-sass": "2.0.4"
  }
 }

Step 7: In the solution explorer of Visual Studio, right click on the package.json file and select Restore Packages. This will download the dependencies we set up in step 7.

Note: Now would be a good time to say if you are using version control, it would be wise to add an exclusion for the node_modules directory.

Step 8: Let’s now update the gulpfile.js to compile our scss file.

var gulp         = require('gulp');
var sass         = require('gulp-sass');
var plumber      = require('gulp-plumber');
var autoprefixer = require('gulp-autoprefixer');

gulp.task("styles", function () {
  // We start with the main scss file (site.scss) and include all others from there.
  return gulp.src(["content/scss/site.scss", "content/scss/*.css"])
             .pipe(plumber())
             .pipe(sass())
             .on('error', function(err) {
                 console.error(err.message);
                 this.emit('end');
             })
             .pipe(autoprefixer("last 1 version", { cascade: true }))
             // The destination directory to output the compiled css.
             .pipe(gulp.dest("content/"));
});

gulp.task("default",["styles"]);

Step 9: At this point, it’s now just a matter of creating the content/scss/ directory and creating your sass styles.

Note: When you want to compile your css, open the “Task Runner Explorer” by right clicking the gulpfile.js in the “Solution Explorer” pane, or in the menu click on “View” -> “Other Windows” -> “Task Runner Explorer”. After doing that you should see our two tasks of “default” and “styles”. You can double click either one to compile your new files.

If you want to get really crazy, you can create a task that will watch your content/scss/ directory for changes and have them be automatically compiled.