Add sass and autoprefixer to gulp in visual studio 2015

In Visual studio 2015 (Update 2) a new ASP.NET Core Web Application contains a gulpfile that adds css and js minification. Here is how to add scss and autoprefixing support to that gulpfile.

After adding a new project rename site.css to site.scss

Next install the the required npm packages:

npm install gulp-autoprefixer
npm install gulp-sass

You need to ensure you run these commands from the project folder (not just anywhere) eg for me that means opening a command prompt at

 D:\aaa_development\spikes\GulpSpike\src\GulpSpike

Next, attempt to reference these from gulpfile.js by adding the following lines after the other existing require definitions

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

Run the gulpfile via the Task Runner Explorer (View->Other Windows)

An error occurs:

Failed to run "D:\aaadevelopment\spikes\GulpSpike\src\GulpSpike\Gulpfile.js"... cmd.exe /c gulp --tasks-simple D:\aaadevelopment\spikes\GulpSpike\src\GulpSpike\nodemodules\gulp-sass\nodemodules\node-sass\lib\index.js:14 throw new Error(errors.missingBinary()); ^ Error: Missing binding D:\aaadevelopment\spikes\GulpSpike\src\GulpSpike\nodemodules\gulp-sass\node_modules\node-sass\vendor\win32-ia32-47\binding.node Node Sass could not find a binding for your current environment: Windows 32-bit with Node.js 5.x Found bindings for the following environments: - Windows 64-bit with Node 0.10.x This usually happens because your environment has changed since running npm install. Run npm rebuild node-sass to build the binding for your current environment.

Their suggested fix did not work. For some reason on the install the appropriate binding.node was not downloaded so I had to do this part manually. Go to the node-sass releases page and download the file the error message refers to, in this case win32-ia32-47.binding.node - rename the file to binding.node and place it in a new folder according to the error message

D:\aaadevelopment\spikes\GulpSpike\src\GulpSpike\nodemodules\gulp-sass\node_modules\node-sass\vendor\win32-ia32-47

Now you can refresh the gulpfile and it should work: