In this article, we are going to learn how to use Gulp.js to minify & uglify (JavaScript, cascading style sheets and HTML) and to configure Task Runner Explorer in ASP.NET Core MVC.
Introduction
The first question that comes to mind is what is Gulp.js?
Gulp.js is an open source JavaScript toolkit for the automating task in the development process.
In our daily projects, we develop lots of JavaScript, Cascading Style Sheet, HTML files, but to minify or beautify this file, we go to some website, there we upload files to minify or beautify files.
If we can automate this process in Visual Studio, what would be your reaction? "Wow," right?
Let’s learn how to automate this process using gulp.js and enjoy.
Topics
- Creating Application
- Adding package.json File in the Project
- Downloading Dependencies of gulp js
- Adding gulp.js file in Project
- Writing Basic Task to Learn How to Use Start Using gulp.js
- Installing "Task Runner Explorer" Extension in Visual Studio
- Adding HTML file to Project and Writing Task to Minifying HTML File
- Writing Task for Concatenate file JavaScript Files
- Writing Task to Minify JavaScript
- Writing Task to Minify Cascading Style Sheets
- Writing Task to Change File Extension of JavaScript Files and Cascading Style Sheet
- Automating Task
- History
Step 1: Creating Application
Now, let’s create a .NET Core Web Application Open Visual Studio IDE from start page. Click on New Project link.
After clicking on New Project link, it will open a new dialog with Name "New Project". Inside that, from left panel, choose templates inside that -> choose Visual C# -> inside that, choose .NET Core template, then in the middle of your pane, you will see .NET Core project templates, from templates that choose "ASP.NET Core Web Application (.NET Core)" project templates.
After choosing project template, next we are going to name the project as "DemoGulp" and finally click on OK button to create a project, but it will pop up another dialog with name "New ASP.NET Core Web Application (.NET Core)".
Inside this dialog, we are going to choose a "Web Application" project template for creating "ASP.NET Core Web Application." Click on the OK button to create a project.
Below is a complete project view which is newly created.
After creating a project, the next thing is to add package.json file to project.
Step 2: Adding package.json File in the Project
We are going to add package.json to the project for downloading packages from node package manager.
To add package.json, just right click on "DemoGulp" project, then select Add from menu list -> then under it, select New Item.
After selecting a new dialog, a pop up with the name "Add New Item" will appear as shown below.
In this dialog, we are going to choose "npm Configuration File" and just click on Add button.
After clicking on Add button, you can see the package.json file is added to project as shown below:
After adding a package.json file to project, next we are going to download packages for gulp.
Step 3: Downloading gulp Packages
We are going to download packages:
gulprimrafgulp-concatgulp-cssmingulp-uglifygulp-minify-htmlgulp-ext-replace
Details about Packages
Code Snippet to Add in package.json
This is the code snippet which we are going to add in the package.json devDependencies part.
"devDependencies": {
"gulp": "^3.9.1",
"rimraf": "^2.5.4",
"gulp-concat": "2.6.1",
"gulp-cssmin": "^0.1.7",
"gulp-uglify": "^2.0.0",
"gulp-minify-html": "^1.0.6",
"gulp-ext-replace": "^0.3.0"
}
Note
- folder/*.js - will match all the JavaScript files in folder
- folder/*.css - will match all the CSS files in folder
- folder/*.html - will match all the HTML files in folder
Snapshot of package.json
After adding Dependencies in the package.json file, just saving this file or the entire project, as you save, it will start downloading packages from Node Package Manager (NPM).
After downloading Dependencies, next we are going to add a gulpfile.js file to the project.
Step 4: Adding gulpfile.js File in Project
In this step, we are going to add a gulpfile.js file to the project.
To add gulpfile.js file, just right click on "DemoGulp" project, then select Add from menu list -> then under it, select New Item.
After selecting, a new dialog will pop up with name "Add New Item" as shown below.
In this dialog, we are going to choose "Gulp Configuration File" and just click on Add button.
After clicking on Add button, it will add Gulpfile.js to project as shown below.
You can see some default code in gulpfile.js files.
Step 5: Writing Basic Task to Learn How to Start Using gulp.js
- The first step is to load module.
var gulp = require('gulp');
- In the second step, let’s have a look at
task how it looks like:
gulp.task('default', function ()
{
});
‘default’ is the name of the task and you can write task inside this function.
- Now let’s write a simple message to display "
Welcome to gulp js".
var gulp = require('gulp');
gulp.task('default', function ()
{
console.log('Welcome to gulp js in Visual Studio');
});
Snapshot of Gulpfile.js
Now we have to run this task which is written in glupfile.js. For doing that, we need to install extension "Task Runner Explorer".
Step 6: Installing "Task Runner Explorer" Extension in Visual Studio
For installing "Task Runner Explorer", just right click on Menu bar of Visual Studio, in that, choose Tools Menu, inside that -> choose Extension and Updates.
After clicking on Extension and Updates, a new dialog will pop up as shown below. In that, you need to choose online tab from left, then in Search Results, type "Task Runner Explorer".
Below is a snapshot after installing "Task Runner Explorer".
After installing, it will ask to restart Visual Studio.
After restarting Visual Studio, next we need to open Task runner explorer.
To open Task runner explorer, just click on the Tools menu from Visual Studio and choose Task Runner Explorer from the menu.
Snapshot of Task Runner Explorer
The Task Runner Explorer contains all task of Gulpfile.js and in Tasks, you will find the task which we have created "default" task.
Now we are going to run default task. To run it, just right click on Task Name (default), then two options wll appear. From that, choose the Run option (option with a Play button in green color).
Below is a snapshot after running a task.
Wow, we have completed running the first task. It is easy, right?
After completing task, next, we are going to learn how to minify an HTHL file using gulpfile.js.
Step 7: Writing Task to Minifying HTML File
In this step, we are going to write a task for minifying HTML file. For doing that, first, I am going to add a folder with name Htmlfiles in wwwroot folder add then inside that folder, I am going to add an HTML file with the name demo.html.
Folder Structure
And next, I am going to add another folder in same wwwroot folder with name Compressedfiles. Here, we are going to store minified HTML files.
Folder Structure
After adding the demo.html file, now let add some text with space in this file.
Snapshot of demo.html File
After adding HTML file with space, next we are going to write a task for minifying this HTML file and write it to other location (compressed file).
Complete Code Snippet of gulpfile.js
var gulp = require('gulp');
minifyHtml = require("gulp-minify-html");
var paths = {
webroot: "./wwwroot/"
};
paths.html = paths.webroot + "Htmlfiles/**/*.html";
paths.Destination = paths.webroot + "Compressedfile";
gulp.task('minify-html', function ()
{
gulp.src(paths.html)
.pipe(minifyHtml())
.pipe(gulp.dest(paths.Destination));
});
gulp.task("demo", ["minify-html"]);
Understanding Code Snippet of gulpfile.js
- In the first step, we are going to load module.
var gulp = require('gulp');
minifyHtml = require("gulp-minify-html");
- In the second step, we are going to declare variable with name "
paths" which is going to store the path of "wwwroot".
var paths = {
webroot: "./wwwroot/"
};
- In the third step, we are going to declare path to get files from "Htmlfiles" folder.
paths.html = paths.webroot + "Htmlfiles/**/*.html";
- In the fourth step, we are going to declare path to writing Compressed files in "Compressedfile" folder.
paths.Destination = paths.webroot + "Compressedfile";
- In the fifth step, we are going to write task ('
minify-html') for getting all HTML files and use minify package to minify them and write it to destination folder which we have created.
gulp.task('minify-html', function ()
{
gulp.src(paths.html)
.pipe(minifyHtml())
.pipe(gulp.dest(paths.Destination));
});
- In the sixth step, we are going to write main task such that we can run another task sequentially
gulp.task("demo", ["minify-html"]);
Finally, save gulpfile.js and open Task Runner Explorer.
To run, just right click on "demo" task and from the list of menu, choose Run menu.
Snapshot of Task Runner Explorer
After running task, we have to see Compressedfile folder where minified HTML file is stored.
Folder Structure
Output of Compressed File
Step 8: Writing Task to Concatenate JavaScript Files
In this part, we are going to learn how to concatenate JavaScript files. For doing that, we are going to add four JavaScript files in a folder and then we are going to concat all JavaScript files into one JavaScript file.
Folder Structure
In every JavaScript file, I am going to add a single JavaScript function in it such that we can understand how it concats files.
After writing all the functions in JavaScript individual files, now let's write the task on gulpfile.js to concat all files into one single file.
One thing we have missed here is where we are going to store all Concatenated JavaScript files. For storing that file, I am going to create a new folder with name "ConcatenatedJsfiles" in which all JavaScript files which are concatenated will store in this folder.
Folder Structure
Complete Code Snippet of gulpfile.js
var gulp = require('gulp');
concat = require("gulp-concat");
var paths = {
webroot: "./wwwroot/"
};
paths.js = paths.webroot + "js/**/*.js";
paths.Destination = paths.webroot + "ConcatenatedJsfiles";
var newconcat = "concatmain.js";
gulp.task('concatfiles', function ()
{
gulp.src(paths.js)
.pipe(concat(newconcat))
.pipe(gulp.dest(paths.Destination));
});
gulp.task("demo", ["concatfiles"]);
Understanding Code Snippet of gulpfile.js
- In the first step, we are going to load module.
var gulp = require('gulp');
concat = require("gulp-concat");
- In the second step, we are going to declare variable with name "
paths" which is going to store the path of "wwwroot".
var paths = {
webroot: "./wwwroot/"
};
- In the third step, we are going to declare path to get JavaScript files from "Js" folder.
paths.js = paths.webroot + "js/**/*.js";
- In forth step we are going declare path to store Concatenated files in "ConcatenatedJsfiles" folder.
paths.Destination = paths.webroot + "ConcatenatedJsfiles";
- In the fifth step, we are going to declare a variable with name
newconcat and to this variable, we are going to assign the name of new JavaScript file (concatmain.js).
var newconcat = "concatmain.js";
- In the sixth step, we are going to write task ('
concatfiles') for getting all JavaScript files and use concat package to concat them and write it to destination folder which we have created.
gulp.task('concatfiles', function ()
{
gulp.src(paths.js)
.pipe(concat(newconcat))
.pipe(gulp.dest(paths.Destination));
});
- In the seventh step, we are going to write
Main task such that we can run another task sequentially
gulp.task("demo", ["concatfiles"]);
Finally, save gulpfile.js and open Task Runner Explorer.
To run, just right click on "demo" task and from the list of menu, choose Run menu.
Snapshot of Task Runner Explorer
After running task, we have to see "ConcatenatedJsfiles" folder where concatenated JavaScript file is stored.
Folder Structure
Output of Concatenated JavaScript Files
Step 9: Writing Task to Minify JavaScript
In this step, we are going to write a task for minifying JavaScript file for doing that. First, I am going to add a folder with name MinifiedJavascriptfiles in the wwwroot folder in this folder, all minified JavaScript files will be stored and we are going to get all JavaScript files from "Js" folder for minifying.
Folder Structure
JavaScript File to Minify
Complete Code Snippet of gulpfile.js
var gulp = require('gulp');
uglify = require("gulp-uglify");
var paths = {
webroot: "./wwwroot/"
};
paths.js = paths.webroot + "js/**/*.js";
paths.Destination = paths.webroot + "MinifiedJavascriptfiles";
gulp.task('MinifyingTask', function () {
gulp.src(paths.js)
.pipe(uglify())
.pipe(gulp.dest(paths.Destination));
});
Understanding Code Snippet of gulpfile.js
- In the first step, we are going to load module.
var gulp = require('gulp');
uglify = require("gulp-uglify");
- In the second step, we are going to declare variable with name "
paths" which is going to store the path of "wwwroot".
var paths = {
webroot: "./wwwroot/"
};
- In the third step, we are going declare path to get JavaScript files from folder "Js" folder.
paths.js = paths.webroot + "js/**/*.js";
- In the fourth step, we are going to declare the path to store minified files in "MinifiedJavascriptfiles" folder after minifying.
paths.Destination = paths.webroot + "MinifiedJavascriptfiles";
- In the fifth step, we are going to write task (‘
MinifyingTask’) for getting all JavaScript files and use uglify package to minify JavaScript files and then write it to destination folder which we have created.
gulp.task('MinifyingTask', function ()
{
gulp.src(paths.js)
.pipe(uglify())
.pipe(gulp.dest(paths.Destination));
});
Finally, save gulpfile.js and open Task Runner Explorer.
To run, just right click on "MinifyingTask" task and from the list of menu, choose Run menu.
Snapshot of Task Runner Explorer
After running task, we have to see "MinifiedJavascriptfiles" folder where minified JavaScript file is stored.
Folder Structure
Output of Minified JavaScript Files
Step 10: Writing Task to Minify Cascading Style Sheets
In this step, we are going to write a task for minifying cascading style sheets files. To do that, first I am going to add a folder with name MinifiedCssfiles in the wwwroot folder. In this folder, all minified cascading style sheets files will be stored and we are going to get all cascading style sheets files from the "css" folder for minifying.
Cascading Style Sheets File to Minify
Complete Code Snippet of gulpfile.js
var gulp = require('gulp');
cssmin = require("gulp-cssmin");
var paths = {
webroot: "./wwwroot/"
};
paths.css = paths.webroot + "css/**/*.css";
paths.Destination = paths.webroot + "MinifiedCssfiles";
gulp.task('Minifying-Css-Task', function () {
gulp.src(paths.css)
.pipe(cssmin())
.pipe(gulp.dest(paths.Destination));
});
Understanding Code Snippet of gulpfile.js
- In the first step, we are going to load module.
var gulp = require('gulp');
cssmin = require("gulp-cssmin");
- In the second step, we are going to declare variable with name "
paths" which is going to store the path of "wwwroot".
var paths = {
webroot: "./wwwroot/"
};
- In the third step, we are going to declare path to get JavaScript files from folder "css" folder.
paths.css = paths.webroot + "css/**/*.css";
- In the fourth step, we are going to declare the path to store minified files in "MinifiedCssfiles" folder after minifying.
paths.Destination = paths.webroot + "MinifiedCssfiles";
- In the fifth step, we are going to write task (‘
Minifying-Css-Task’) for getting all Cascading style sheets files and use cssmin package to minify Cascading style sheets files and then write it to destination folder which we have created.
gulp.task('Minifying-Css-Task', function () {
gulp.src(paths.css)
.pipe(cssmin())
.pipe(gulp.dest(paths.Destination));
});
Finally, save gulpfile.js and open Task Runner Explorer.
To run, just right click on "Minifying-Css-Task" and from the list of menu, choose Run menu.
Snapshot of Task Runner Explorer
After running task, we have to see "MinifiedCssfiles" folder where minified cascading style sheets file is stored.
Output of Minified JavaScript Files
Note: Syntax if you want to run more than one task sequentially
Step 11: Writing Task to Change File Extension of JavaScript Files and Cascading Style Sheet
In this step, we are going to write a task for changing extension of cascading style sheets file and JavaScript files. To do that, first I am going to add a folder with the name Changedextensionfiles in wwwroot folder. In this folder, all changing extension of cascading style sheets file and JavaScript file will be stored.
And we are going to get cascading style sheets file from the "css" folder and the JavaScript files from the "js" folder.
Folder Structure
Complete Code Snippet of gulpfile.js
var gulp = require('gulp');
ext_replace = require("gulp-ext-replace");
var paths = {webroot: "./wwwroot/"};
paths.js = paths.webroot + "js/**/*.js";
paths.css = paths.webroot + "css/**/*.css";
paths.Destination = paths.webroot + "Changedextensionfiles";
gulp.task('ChangingExtensionJavascriptTask', function () {
gulp.src(paths.js)
.pipe(ext_replace('.min.js'))
.pipe(gulp.dest(paths.Destination));
});
gulp.task('ChangingExtensionCssTask', function () {
gulp.src(paths.css)
.pipe(ext_replace('.min.css'))
.pipe(gulp.dest(paths.Destination));
});
gulp.task("MainTask", ["ChangingExtensionJavascriptTask", "ChangingExtensionCssTask"]);
Finally, save gulpfile.js and open Task Runner Explorer.
To run, just right click on "MainTask" and from the list of menu, choose Run menu.
Snapshot of Task Runner Explorer
After running task, we have to see "Changedextensionfiles" folder where changed cascading style sheets file and JavaScript file will be stored.
Snapshot After Changing File Extension
Step 12: Automating Task
To automate this process, just right click on Bindings from the list, you will find four items in it.
Choose Bindings according to your need to automate the process.
As you choose, this binding is added to gulpfile.js as shown below.
In this article, we have learned how to use gulp with ASP.NET Core MVC and along with this how to install "Task Runner Explorer" and how to minify and beautify JavaScript, cascading style sheets, and HTML.
I hope you liked my article.
History
- 10th January, 2017: Initial version
