# Tuesday, 13 September 2016

If you are into web development you know there are a bunch of tools out there to make your life easier while concentrating on the things you want or need to focus on. One of these tools is gulp.js. It is an easy one to start with though and it is supported in Visual Studio.If you like a good read and want to get up to speed with gulp fast or already have experience but just want interesting code samples you can download this free ebook at Syncfusion.com.

Gulf_Succinctly_coverimage

The name of the writer of this particular book should ring familiar: Kris van der Mast. Yes indeed, that’s me Smile.

I made up a contract to write another book about Azure Web Jobs and I hope to have it ready by end of this year.

Grz, Kris.

Books | Free | Gulp | Syncfusion
Tuesday, 13 September 2016 16:21:00 (GMT Daylight Time, UTC+01:00)  #    Disclaimer  |  Comments [0]  | 
# Wednesday, 14 January 2015

I’ve been fiddling around lately with Gulp and Bower. 2 tools that go hand in hand to make compelling web applications and… also integrate nicely in the new Visual Studio.

Gulp is a javascript based task runner and Bower is “package manager for the web”. Why bother you might ask yourself? Well, that’s a good question. In the recent years we’ve been enjoying bunding and minification which can be found in the ASP.NET System.Web.Optimization namespace. That’s going to be gone in ASP.NET 5 (or vNext as we’ve known it up until recently).

Just follow along on how to get started with the new wave.

Create a new project

Start Visual Studio 2015. Create a new project. Opt for ASP.NET Web Application.

01

Give it a meaningful name and press OK and opt in the following screen for ASP.NET 5 Starter Web

02

Again press the OK button and let the project be generated. After that you can open the nodes of wwwroot and Dependencies.

What’s under wwwroot

03

Quick overview of the new template

What’s new in ASP.NET 5.0 is the wwwroot folder. This is going to be the place to put static files like CSS, images, html, javascript files.

Something else which is new is that you don’t have a web.config file anymore. There are also some newcomers in the form of .json files:

  • bower.js: contains the Bower packages
  • config.json: the main configuration file
  • package.json: lists the npm packages
  • project.json: the main project file.

Using npm to install Gulp

Gulp itself is not yet in the template. To get this into it take the following steps:

  1. open package.json
  2. add a new entry under devDependencies: “gulp”: “^3.8.10”. Save the file.
  3. under the NPM node in your Solution Explorer pane you’ll notice that that a new subnode has appeared suffixed with (not installed):
    04
  4. Right click the NPM node and select Restore Packages from the context menu that appears.
  5. Now the package is installed:

    05
  6. Your package.json file will now look like the following:
{
    "version": "0.0.0",
    "name": "GulpTestingInVS2015",
    "devDependencies": {
        "grunt": "^0.4.5",
        "grunt-bower-task": "^0.4.0",
        "gulp": "^3.8.10"
    }
}

In the same fashion add entries for gulp-less and gulp-minify-css. As you can guess from the names these are respectively to transform a .less file to css and to minify a css file.

Gulp it up

Now that we have our ingredients ready we’re going to start to follow the recepy. In the solution, in the root folder of your project add a new file called gulpfile.js. Right click on it. In the context menu you select Task Runner Explorer. A new pane will open and a reference to gulp will appear in it. If you want to get rid of the default Grunt tasks you can simply delete the gruntfile.js file. I noticed that it’s a good habit to frequently refresh the overview in the Task Runner Explorer with the dedicated Refresh button.

Create a subfolder Assets under the root of the application. In there place 2 .less files: Colors.less and Styles.less.

Colors.less:

@color:#b6ff00;
@backcolor:#808080;

Styles.less:

@import "Colors.less";

body {
    background-color: @backcolor;
}

a {
    color: @color;

    &:hover {
        color: @color + @backcolor;
    }
}

06 

 

 gulpfile.js:

"use strict";

var gulp = require('gulp');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');

gulp.task('LessAndMinifyCSS', function () {
    gulp.src('Assets/Styles.less')
        .pipe(less())
        .pipe(gulp.dest('wwwroot/css'));
});

What goes on in this gulp file is that first declarations are made for the packages we’re going to make use of in our function. Then a Gulp task is created with the name LessAndMinifyCSS. We’ll also see, after a refresh, that function name appear in the Task Runner Explorer.

In the Gulp task we first set the source of our less files. Then via pipiing we execute the less package functionality over what was just loaded. Then the transformed result will be written down with destination wwwroot/css.

In the Task Runner Explorer hit the refresh button. Drill down to the node LessAndMinifyCSS. Right click on it and select Run.

In the output window of the Task Runner Explorer we can see that our less transformation was successful:

07

When we take a look in the Solution Explorer pane we’ll also notice that a new file was generated:

08

If it doesn’t show up directly then click the Refresh button, circled in red.

The content of the Styles.css file is as expected:

body {
  background-color: #808080;
}
a {
  color: #b6ff00;
}
a:hover {
  color: #ffff80;
}

So with not too much effort we were able to transform our less file to a css file. Now lets take it one step further. We’ll easily as well add CSS minification to our process. Change the gulpfile.js file as follows:

"use strict";

var gulp = require('gulp');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');

gulp.task('LessAndMinifyCSS', function () {
    gulp.src('Assets/Styles.less')
        .pipe(less())
        .pipe(minifyCSS({keepBreaks:false}))
        .pipe(gulp.dest('wwwroot/css'));
});

The output of the Styles.css file after running the Gulp task again has now become:

body{background-color:grey}a{color:#b6ff00}a:hover{color:#ffff80}

Now in the Task Runner Explorer right click the LessAndMinifyCSS task. Click the Bindings menu item and then select Before Build.

09 

Now each time you build your project the Gulp task will be run resulting in your Styles.css file to be updated. Of course there are a lot more Gulp packages that you can use but that’s a story for another blog post.

Grz, Kris.

Wednesday, 14 January 2015 09:41:56 (GMT Standard Time, UTC+00:00)  #    Disclaimer  |  Comments [0]  |