Optimising your front end workflow  #1 Using GULP to compile LESS in Visual Studio 2015

Optimising your front end workflow #1 Using GULP to compile LESS in Visual Studio 2015

by No Comments

Tools like Gulp are often referred to as "build tools" because they are tools for running the tasks for building a website. The two most popular build tools out there right now are Gulp and Grunt. But there are others of course. There are already multiple articles covering the difference between Grunt and Gulp and why you might use one over another. The main difference is how you configure a workflow with them. Gulp configurations tend to be much shorter and simpler when compared with Grunt. Gulp also tends to run faster.

Installing Node and Gulp

If you don’t already have it installed, download and install node.js.
If you are using VS 2015 and ASP.NET 5, Visual Studio will install npm and gulp for you automatically. Once node is installed, we need to install gulp using the node package manager (npm).
From the command line, run

npm install gulp -g

Disable compilation through Web Essentials

The second step is to stop Web Essentials from compiling LESS if you have it installed. To do this, create a solution settings file for Web Essentials (if you don’t have one already) by using the Web Essentials menu.In the Less settings change the values of the “CompileOnBuild” and “CompileOnSave” properties to false.

Add a package.json file at the root of the project

I find the easiest way to do this is to simply add a JSON file through Visual Studio and name it package. In the file create a JSON object and give it a name and a version property new item by clicking on project and from context menu select “Add Item”. You will be presented with next screen:

Gulp Nultien

As you add new package.json file, you can also add bower and gulp file on the same way.
You could use the “npm init” command to create the file, but it adds additional properties that you won’t require for just running LESS compilation.

See the following example.

nmp init

Gulp Nultien

Install required modules into the project

One way of doing this is to run the commands to install each module individually.For less compilation we'll need to install Node packages, so open a command prompt and run the following npm (Node Package Manager) commands:

npm install gulp-less –g
npm install gulp-watch –g
npm install gulp-autoprefixer –g
npm install gulp-notify –g
npm install gulp-util –g


Another (and faster) way is to add a devDependencies section into the package.json that contains the modules required and then run “npm install” either through the command line, or if you have the Grunt Launcher Visual Studio extension installed by right-clicking on the package.json file in the Solution Explorer and selecting the NPM install packages option from the menu.

An example package.json with devDependencies follows.

{
  "name": "website",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "3.1.0",
    "gulp-less": "^3.0.5",
    "gulp-notify": "2.2.0",
    "gulp-util": "^3.0.7",
    "gulp-watch": "^4.3.5",
  },
  "main": "gulpfile.js",
  "dependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

The packages required to give the same functionality as Web Essentials are gulp, gulp-less, and gulp-watch. I am not outputting a minimised CSS at this stage, because I am still using the ASP.NET bundling feature. This will have to change in the future, because bundling is not going to be supported initially in ASP.NET 5.

Give Gulp some tasks


Create a gulpfile.js file in your solution and add the following JavaScript to get started.This is where you will have to configure the LESS compilation. There are other resources available explaining how to write the gulpfile.js, so I won’t go into much detail here. I personally found the best place to reference when coding the gulpfile was by looking at the GitHub repositories for each An example gulpfile.js follows.

var gulp = require('gulp');
var watch = require('gulp-watch');
var less = require('gulp-less');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var gutil = require('gulp-util');

// Path to less
var parentPath = './content/css/';
var sourceLess = parentPath;
var targetCss = parentPath;

gulp.task('less', function () {
    return gulp.src([sourceLess + 'styles.less']) // Your main less file
        .pipe(less({ compress: true }).on('error', gutil.log))
        .pipe(autoprefixer('last 10 versions', 'ie 9'))
        .pipe(gulp.dest(targetCss))
        .pipe(notify('Less Compiled, Prefixed and Minified'));
});

gulp.task('watch', function () {
    gulp.watch('./content/css/*.less', ['less']);  // Watch all the .less files, then run the less task
});

To have the CSS compiled automatically when a LESS file is edited (like the CompileOnSave functionality Web Essentials had) we have setup a task that uses the gulp-watch module to watch the source LESS files and calls the appropriate task to compile those files into CSS.Then open the Task Runner Explorer window by right-clicking on the gulpfile.js file.

In the Task Runner Explorer window bind the watch task to run when the solution is open by right-clicking on the watch task and then selecting Project Open option from the Bindings sub-menu .Now every time when project is opened all less files are being watched and if there some changes new css will be created.

If you double-click on less it will run and compile the Less. If you double click on watch it will start watching. Much better!
Once these steps are done, you should have LESS compilation through Gulp setup and working as Web Essentials did.

What else can Gulp do?

Gulp doesn't just do Less compiling, it's hugely powerful. Here are just a few of the tasks Gulp can help you with:

  • Minify your CSS, JavaScript, HTML or images
  • Combine your CSS files
  • Generate CSS sprites
  • Generate favicons
  • Rename files
  • Check if files have changed or not
  • Output messages/errors
  • Add CSS vendor prefixes
  • Check code quality with hinting

More good news as Visual Studio 2015 comes with first-class support for Gulp as standard

 

In Summary

Lets be honest, this process is hard work!  ….. much more work that it used to be with NuGet. However this is the way the rest of the web developer world does things and aligning with the rest of the world is surely better in the long run.

You also have much more control of exactly what gets deployed to where using Bower and Gulp. But we shall talk about bower in another article.

Enjoy!

Share:

Miomir Dancevic

Front end developer who is familiar with the entire stack, know how to make life easier for those around him.

No Comments

Leave a reply

Comment sent for approval