User Name:


User Email:




This information will only be saved for the purposes of communicating with those who have provided this information voluntarily regarding our services.We will never sell your name or email address to anyone.
© 2018 - First Crazy Developer (Abhishek Kumar)
  

crazydeveloper Steps to configure Gulp with Visual Studio

Some days before I gone through this requirement where I need to configure my current project from "Web essentials" to "Gulp". These two setting are to use "Bundling and minification". We will elaborate these concept in coming blog.

But in short words if I need to explain, want to say "improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript.)"

If we talk about "Gulpwe have an important question here:

What is Gulp & how it’s work?

gulp.src is a task and its result is passed to gulp.dest using pipe. Gulp works on streams. gulp.src produces a stream and this stream is used by gulp.dest. So we can say that Gulp is the streaming build system.

 

Look at the following steps:

Install node.js:

1. Download node.js from this link:  https://nodejs.org/download/
2. Install node.js in our system.

 

We can see in above step, if we configure Gulp in our project we need to download & install node.js.


After installation of node.js now turn come to install Gulp on our system through NPM command line. We need to configure Gulp globally in our system:-

1. Open Node.js command prompt
2. Syntax: - npm install --global gulp

when we execute the above syntax will install gulp on our system. We get details about gulp like version etc.

Note: Before going to use Gulp in our project, we need to install Gulp globally.

After installation of globally, Now install gulp in our project with devDependencies

Look at the following steps:

1. Open Node.js command prompt


2. Default location of command prompt is current logged user folder. Select our project folder location through cd command.

Example if our project folder location is D:/Projects/ProjectName/ProjectName  then change our previous command prompt location to this location. 


3. Syntax: - npm install --save-dev gulp

When we execute the above command Gulp will install in our project location folder.


After this command we found one new folder in our project folder name with node_modules. There are lots of file and folder in that folder which need to run gulp within our project.

4. We need to create one js file in our root folder named with gulp.js. This name is a convention, we can’t change the name.

 
Look at the following code:

  1. var gulp = require('gulp');
  2. gulp.task('default', function() {
  3. // place code for your default task here
  4. });


This is an important file to use Gulp in our project, our all code which need to use gulp in our project written in this file.


6. Now there are lots of other plugins available which we need to run gulp properly with all functionality. Like del,uglify, minify-css, rename, inject etc.

Gulp support different types of plugins which help us to control over ”Bundling and minification". We can check all available plugins here: - http://gulpjs.com/plugins/

We need to install all these plugins in our project.

For installation of these plugins repeat step 1 & 2 & then execute these syntax:

npm install --save-dev del gulp-uglify gulp-minify-css gulp-rename gulp-inject

We can see here after executed the all above commands all plugins install in our project. After all these settings we need to create a new file named with "gulp.js" at root folder.

Look at the following code which used in gulp.js:


  1. var gulp = require('gulp');
  2. var bower = require('gulp-bower');
  3. var concat = require('gulp-concat');
  4. var minifycss = require('gulp-minify-css'),
  5. var rename = require('gulp-rename'),
  6. var inject = require('gulp-inject'),
  7. var gulpif = require('gulp-if'),
  8. var argv = require('yargs').argv,
  9. var gulpIngore = require('gulp-ignore'),
  10. var angularFilesort = require('gulp-angular-filesort'),
  11. var concat = require('gulp-concat'),
  12. var clean = require('gulp-clean');


In the above code we defined all required NPM packages into this file. Then we need to define task, where we implement our logic like delete older one, concatenate, rename and minify the files. Gulp work with method chaining so we can defined all syntax like linq. Gulp also support dependency injection so we can inject different module task. Most important thing is that Gulp work with pipe stream so all tasks need to use streams.


Look at the following code:

  1. gulp.task('clean', function (cb) {
  2. gutil.log('clean data task');
  3. return del(['./common/bundles/gulp/*.js', './common/bundles/gulp/*.css'], cb);
  4. });


When we execute the above code, it will get deleted all JS and CSS files from the given location.


Look at the following code:

  1. gulp.task('styles', ['clean'], function () {
  2. // Minify and copy all JavaScript (except vendor scripts)
  3. // with sourcemaps all the way down
  4. return gulp.src(['./Resources/site.css','./Resources/form.css'])
  5. .pipe(concat('Style.css'))
  6. .pipe(gulpif(argv.Release, minifycss()))
  7. .pipe(gulpif(argv.Release, rename('Style.min.css')))
  8. .pipe(rev())
  9. .pipe(gulp.dest('Resources/Bundles'));
  10. });


In the above code we create minified and concatenate all CSS files of our project.

Look at the following code:

  1. gulp.task('scriptsServices', ['clean'], function () {
  2. // Minify and copy all JavaScript (except vendor scripts)
  3. // with sourcemaps all the way down
  4. return gulp.src(['script/Constants.js', 'script/VotingAppCommon.js'])
  5. .pipe(angularFilesort())
  6. .pipe(concat('Scripts.js'))
  7. .pipe(gulpif(argv.Release, rename('Scripts.min.js')))
  8. .pipe(rev())
  9. .pipe(gulp.dest('Common/Bundles/Gulp'))
  10. .pipe(rev.manifest({
  11. base: 'Common/Bundles/Gulp',
  12. merge: true
  13. }))
  14. .pipe(gulp.dest('Common/Bundles/Gulp'));
  15. });


If we go through above code, we can see first task get two CSS files site.css & form.css and create single file name Style.css in second task get two JS files and create single file Scripts.js, then check if build type is release if yes then minify that and rename  with Style.min.css & Scripts.min.js then create that file on given location in last name with gulp.dest(). We also inject our clean task with this task so whenever current task run all dependency will be resolved before that.

After defined all required task we need to define default task in our gulp.js file which is starting point to run all code defined in gulp.js.

Look at the following code:

  1. gulp.task('default', ['scriptsServices','styles'], function () {
  2. gutil.log('in complete task');
  3. });

In the above code we declared  default task with injected all previous defined task so when ever run this gulp file start with default task all dependency will be  resolved before that.

Now we are ready to use gulp in our project. Add all files which created by gulp in your html file.


8. Repeat step 1 & 2 & then execute syntax: npm gulp.

Our gulp.js file will be executed and all minified version of files created by gulp.

But this is manually effort, so how can we set this command with MS build? In that case whenever we build our project all needed files created by gulp.

To execute gulp command with our MS Build with Visual Studio, look at the following steps:

1. Open your project in Visual Studio

2. Right click on your project, select properties

3. Select Build Events in opened window.

4. Write the below code in Post-build event command line


if "$(ConfigurationName)" == "Release" (  "$(OutDir)node_modules\.bin\gulp" --$(Configuration)   --cwd  "$(ProjectDir)\" )


if "$(ConfigurationName)" == "Debug" (  "$(ProjectDir)node_modules\.bin\gulp"  --$(Configuration) )


5. Save above settings.

 

After done all the above steps, whenever we build our project gulp command get executed from MS Build events and create all bundle and minified files.

 

Happy reading!
Abhishek


crazydeveloper Home Page 15 August 2015

Become a Fan