Dave Paquette

Caffeine Driven Development

Holiday Learning List

December 17, 2014

I am looking forward to a some rare free time over the holidays. I am hoping to watch some training videos and catch up on some blogging (I have a few unfinished posts that I would like to finish).

Here is a list of free Microsoft Virtual Academy courses that jumped out at me.

Cloud Courses

Microsoft Azure Fundamentals – Websites

Dev/Test Scenarios in the DevOps World

Enterprise Developer Camp Jump Start

Full List of Azure Courses

Web Development

Building Response UI with Bootstrap

Single Page Apps with jQuery or AngularJS

Full list of Web Dev Courses

 

Enjoy!

How to use Gulp in Visual Studio

October 8, 2014

What is Gulp?

Gulp calls itself the streaming build system. No, this isn’t a replacement for build systems like build or nant. In this case, we are talking about building the client side parts of our applications like JavaScript files, StyleSheets (CSS, SASS or LESS) and HTML files.

The basic idea with Gulp is that you use pipes to stream a set of data (usually files) through some kind of processing. As it turns out, it is pretty easy to use and is probably best described using an example.

Installing Node and Gulp

If you don’t already have it installed, download and install node.js.

Once node is installed, we need to install gulp using the node package manager (npm). From the command line, run

npm install gulp -g

Setting up your Visual Studio project

Rather than create a new sample project here, I’m going to use the Hot Towel SPA template from John Papa. First, I will create an new empty web application and then install the HotTowel.Angular nuget package.

Intsall-Package HotTowel.Angular

I wanted to use this template as an example because it is a perfect candidate for Gulp. The application is written using AngularJS and the code is split across 14 different JS files. From a code maintenance / readability standpoint, it is definitely good to split the code into files like this. From an application loading performance standpoint however, loading 14 separate JS files is generally not a great idea.

Here is a snapshot of the traffic captured using Fiddler.

image

Let’s see what we can do to fix this using Gulp.

Initializing our project for Gulp

First, we need to create a package.json file in the root directory of the your project. We can do this by running npm init on the command line or simply creating a file with the following contents:

{
  
   "name": "YourProjectName",
  
   "version": "1.0.0"
 
}
{
  
   "name": "YourProjectName",
  
   "version": "1.0.0"

}

 

Next, we will install a few packages that we will use for this project. Run the following command from the same folder that you added the package.json file.

npm install gulp –save-dev
npm install gulp-concat –save-dev
npm install gulp-uglify –save-dev
npm install del –save-dev

Note, the –save-dev option here is telling node to add these packages to a devDependencies section in the package.json file and install the packages in a node_modules folder in the current folder . At any time, you or another developer on your team can re-install all the devDependencies by simply running npm install.

Finally, create a gulpfile.js file in the same folder.

// include plug-ins
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');
 
 var config = {
   //Include all js files but exclude any min.js files
    src : ['app/**/*.js', '!app/**/*.min.js'],
 }
 
// Synchronously delete the output file(s)
gulp.task('clean', function(){
  del.sync(['app/all.min.js'])
});
 
// Combine and minify all files from the app folder
gulp.task('scripts', ['clean'], function() {
 
   gulp.src(config.src)
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('app/'));
});
 
//Set a default tasks
gulp.task('default', ['scripts'], function(){});
// include plug-ins
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var del = require('del');

 var config = {
   //Include all js files but exclude any min.js files
 	src : ['app/**/*.js', '!app/**/*.min.js'],
 }

// Synchronously delete the output file(s)
gulp.task('clean', function(){
  del.sync(['app/all.min.js'])
});

// Combine and minify all files from the app folder
gulp.task('scripts', ['clean'], function() {

   gulp.src(config.src)
    .pipe(uglify())
    .pipe(concat('all.min.js'))
    .pipe(gulp.dest('app/'));
});

//Set a default tasks
gulp.task('default', ['scripts'], function(){});

 

Now, run gulp from the command line and you should see some output stating that scripts task is completed successfully.

image

This will have created an all.min.js file that contains minified JavaScript from all the js files in the app folder.

Now we include all.min.js in the Visual Studio project and replace the 14 separate script includes with a single include to the new script.

<script src="app/all.min.js"></script>
<script src="app/all.min.js"></script>

Now, we can see that when our application loads, a single JS file is needed.

image

Watching for changes

Wouldn’t it be nice gulp could automatically re-run the scripts task whenever we make a change any of our js files? Sure, we can do that!

npm install gulp-watch –save-dev

Add the following to our gulpfile.js:

var watch = require('gulp-watch');
gulp.task('watch', function(){
    gulp.watch(config.src, ['scripts']);
});
var watch = require('gulp-watch');
gulp.task('watch', function(){
    gulp.watch(config.src, ['scripts']);
});

Now, if we run gulp watch from the command line, our new watch task will watch for changes to any of our js files. When a change is detected it will trigger the scripts task to execute, regenerating the all.min.js file.

image

Integrating with Visual Studio

So far, we have been working primarily in the command line. It would be nice if we could integrate with our existing Visual Studio experience.

Luckily, we can with the new Task Runner Explorer plugin. Once the plugin is installed, open the Task Runner Explorer from the View –> Other Windows –> Task Runner Explorer menu.

This window will show you all the tasks in the gulp file and allow you to bind those tasks to certain Visual Studio events. This way, we don’t need to remember to run the gulp tasks from the command line. The IDE can handle it for us.

What I like to do is bind the watch task to the Solution Load event and bind the scripts task to the Before Build event.

image

With these bindings, we can make sure that all.min.js is correctly generated when we build the application and also regenerated anytime I make changes to the js files.

The Task Runner Explorer also shows the output of any running tasks. Here you can see the output from the watch task, which is always running in the background in this configuration.

image

So Much Gulp

This post really only scratched the surface of what is possible with Gulp. There are 100’s of Gulp plugins available for pretty much everything you can imagine.