Automate Your Tasks With Gulp.JS

Main problem of a web developer: I am so bored running this tedious process over and over again!

It’s obvious that you get bored while pressing the F5 repeatedly on the keyboard. You love your job, but these repetitive tasks make your job mundane. And this is where hot technologies step in and make your life easy. 

There are quite a few automatic task runners in the market including Grunt and Gulp. Grunt is a task runner that uses data configuration files similar to JSON whereas Gulp implements JavaScript. The code of Gulp is easier and shorter than Grunt’s code, that’s why; Gulp JS is always a better option for a web developer to automate his repetitive tasks.

The Usage of Gulp

Gulp is a Node.js based task-runner. Just like its name, Gulp.js helps to consume the repetitive tasks with the help of automation. It has a significant contribution in the front-end development segment for its noted feature called code over configuration. Gulp.js works as a streaming build system that automates the website and application building process. Routine tasks and processes like concatenation, minification, unit testing, cache busting, optimization, linting, etc. get easier with Gulp. In addition, we can automate the deployment of small or medium projects with the help of gulp tool.

In this article we will discuss how to use Gulp.js in new/existing MVC projects using Visual studio 2015. It can be used in all major IDE platforms like PHP, .NET, Node.js, Java, and other platforms.

Purpose of Gulp.js

The purpose of Gulp.js is to improve overall project performance by reducing file size using Minification and Concatenation. It is helpful in reducing such painful/repetitive tasks and helps to automate them. Below is a simple example of how you can automate a task in Gulp.js.

Let’s Get Started

1. Creating MVC application
2. How to install gulp
3. Add gulpfile.js file in project
4. Basic Task syntax
5. Task to minify JavaScript file(s)
6. Task to minify CSS file(s)
7. Task to change file extension of JavaScript and CSS files
8. Automate Task

Prerequisite

Visual Studio 2015 (Express for web edition for this demo) 

1. Creating MVC application

Open Visual Studio 2015. Click on File ->New Project. After clicking on New Project, dialog box with Name "New Project" will open and from left panel click on Templates inside that -> click on Visual C# -> inside that click on Web template, then select “Asp.NET Web application” project template. Mention the project name and choose proper location where you would like to save the project. 

After selecting the project template, naming the project etc. click on the OK button which will open another dialog box named as “New ASP.NET Project”. From this dialog box, choose “MVC” template. Click on the OK button to create a project. 

2. Install gulp

Before getting started with gulp, it has to be installed through Nuget Package Manager. Click on Tools ->Nuget Package Manager ->Package Manager Console.

If you have previously installed any version of gulp globally, please run the following command to make sure your old version doesn't collide with gulp-cli (command line). 

Now to install gulp, execute the following command: 

3. Adding gulpfile.js file

Right click on solution from Solution Explorer, add new Java script file name it as ‘gulpfile.js’. Ensure that this file is created at root directory of the web application project. 

4. Basic Task syntax

Let’s write basic task code which will be executed using “Task Runner Explorer” window. 

Update your ‘gulpfile.js’ with the above code. Code at first line require(‘gulp’) is to load necessary modules to be used while performing any operation in gulp.

Then we come to the default task function also named as ‘default’. Let’s write some code into it as follow: 

Save the ‘js’ file and then Execute following command in Package Manager Console (Note: This is one-time command. Doesn’t need to execute for each tasks) 

Now let’s run this task which is written in glupfile.js. For doing that we need to open "Task Runner Explorer". (Click on View ->Other Windows ->Task Runner Explorer )

‘Task Runner Explorer’ contains all task(s) of gulpfile.js and under Tasks, you will find the task which we have created recently i.e. “default” task.

Right click on task ‘default’. It will give two options ‘Run’ and ‘Bindings’. Execute this task by clicking on ‘Run’ option. Here is the output of default task. 

5. Task to minify JavaScript file(s)

Now let’s minify JavaScript files and for that lets create one new folder at the root of project solution, specifically for storing those minified java script files. (Folder name ->MinJSFiles)

Before writing task code, we need to install ‘uglify’ which will help in Minification of JS files. Execute the following code in Package Manager Console: 

Update the gulfile.js file with following code: 

Save the gulfile.js and open Task Runner Explorer. Here now you can see the newly created task i.e ‘MinifyJS’ task is now listed under ‘GulpFile.js ->Tasks ->MinifyJS’. Right click on it and select ‘Run’ to execute the task.

Go to the newly created folder ‘MinJSFiles’, there you will be able to see the ‘bootstrap.js’ file having minified code in it. 

6. Task to minify Cascading style sheet file(s)

Now let’s create new task to minify CSS files and for that lets create one new folder specifically for minified CSS files at the root of project solution. (Folder name ->MinCSSFiles)

Before writing task code, we need to install ‘cssmin’ which will help in Minification of CSS files. Execute the following code in Package Manager Console: 

Add the following code in gulfile.js file before ‘default’ task code:Save the gulfile.js and open Task Runner Explorer. Here now you can see the newly created task i.e ‘MinifyCss’ task is now listed under ‘GulpFile.js ->Tasks ->MinifyCss’. Right click on it and select ‘Run’ to execute the task.

Go to the newly created folder ‘MinCSSFiles’, there you will be able to see all the css files of “Content” source folder having minified code in it. 

7. Task to change file extension for JavaScript and CSS file(s)

To change the file extension lets create a new task and for that lets create one new folder specifically for storing those files at the root of project solution. (Folder name ->ChangedExtensionFiles)

Before writing task code, we need to install ‘gulp-ext-replace’ which will help in changing the extension of files. Execute the following code in Package Manager Console: 

Update the gulfile.js file with following code: 

Save the gulfile.js and open Task Runner Explorer. Here now you can see the newly created task(s). Right click on it and select ‘Run’ to execute the task.

Go to the newly created folder ChangedExtensionFiles, there you will be able to see the CSS/JS file(s) having their extension as “.min.js”. 

8. Automate Task

Till now we were executing the entire task manually by clicking on ‘Run’ option, but what if we want to run these tasks automatically. For that we can automate these tasks as follow:

1. Open Task Runner Explorer. Right click on Task
2. Choose ‘Bindings’. Select all the suitable options as selected in below image.
3. Now whenever we will ‘Clean’ and ‘Build’ the project, that specific Task will be executed automatically. 

In this document we learn how to use gulp.js with Asp.Net MVC project, how to install gulp, minify CSS/JS, replace file extension.

Moving On

Automating functions is a blessing with a task runner like Gulp. With it, you transform your monotonous front-end designing tasks to faster & interesting assignments. It frees up your time and allows investing the same in more productive tasks.

Being on the forefront of all task runners, Gulp compresses image files, run unit tests, update database, compile LESS files, and most importantly sends updates to the production server.

Download Gulp tutorial here.