Back to Posts

Gulp tasks in Visual Studio

Vincent Wesker in Gulp, Visual Studio

In modern web development we dont write CSS anymore. We use Less or SASS to create our CSS files. They are CSS pre-processors, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.

The less files can be used directly in the browser. Todo this reference the less file in the browser like this. The second step is to download the less.js file and reference it in a script tag

<link rel="stylesheet/less" type="text/css" href="styles.less" />  
<script src="less.js" type="text/javascript"></script>  

Now the less files are processed at run-time if the page is loaded. This is sort-of acceptable for development purpose, but not for test, production or any other environment. It's recommend to pre-compile the Less files and reference those files.
A popular way to pre-compile the less files is by using a Gulp task. Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build.

Visual Studio 2015 has a built-in Task runner for those tasks. Just right-click on the gulp file to view the Task Runner Explorer. In the task runner explorer there is a overview of the configured tasks in de gulpfile. By double clicking on a task the task is executed. This is also the place to bind a task to a build action or project action. A pre-requisite is that you have Node.JS installed on your system and added it to your Path environment variable.
Taskrunner

Gulp Task

gulp.task('less', () => {  
     return gulp.src('app_data/LessFiles/make.less')
        .pipe($.plumber())
        .pipe($.if(dev, $.sourcemaps.init()))
        .pipe($.less({
            paths: ['.']
        }))
        .pipe($.autoprefixer({
            browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']
        }))
        .pipe($.if(dev, $.sourcemaps.write()))
        .pipe(gulp.dest('App/Content'))
});

The Gulp task will execute the following tasks

  • gulp.src, take the Source less file(s)
  • line 2 -> If dev environment create a sourcmap for the CSS
  • line 4 Perform the actual processing
  • line 5 Add some css prefixes to¬†improve browser compatiblity. GitHub Link
  • line 8¬†Write the source map to the css file
  • line 11¬†Output to the desired path

Issues in Visual Studio 2015

Out of the box you need to change some settings to make it work. Visual Studio 2015 ships with a old version of NodeJS. In this version the Gulp tasks will not work! To fix this go change the order of het external tools. Go to Tools -> Options -> External Web Tools. The $PATH option needs to be above the $(DevEnvDir)\Extensions\Microsoft\Web Tools\External

If you run Visual Studio 2017 you don't need to do this, but I will recommend it. The installed version of NodeJS with VS2017 is also not the latest.

Adding it to Existing Project

If you are adding these things to an existing project, also add a package.json to the project. This is the file where all the needed NodeJS packages are listed. If this file is not present and not listed all dependencies the task runner will not show any tasks. And will not always give you a good error message.

SharePoint O365 Dev | Azure | Working @ Mavention