How to do it...

1. First, we add Gulp to package.json and the Gulp plugins. Then we need to minify and bundle these two JavaScript files if this file doesn't exist in the web application:

1. We add the gulp-concat plugin, which concatenates the (bundle) files, and then we add gulp-uglify, which minifies the .js files, removing whitespaces and comments, and writes the name of the module we want to add to the devDependencies section:

1. Let's create a gulpfile.js (a gulp configuration file):

1. The generated file contains the following code:

1. Let's add the following code in order to store the file paths for the files we will manipulate:

The path variable represents the wwwroot folder.

The path.js file represents all the JavaScript files in the wwwroot/js folder. path.minJs represents all the minified JavaScript files in the wwwroot/js folder that have a .min.js extension. path.concatJsDest represents the JavaScript file named site.min.js, which is the minification result of the two previous JavaScript file folders.

1. Let's add the following code in order to create the task:

We require a Node.js function that will get the reference to a Gulp plugin or a Node module:

• • gulp.task is a Gulp API that defines a task
  • gulp.src is a Gulp API that reads a set of files

Inside gulp.task, we create all the tasks to be executed and rename default to min:js. We will chain the pipe functions to run these plugins in parallel:

1. 1. First, we save gulpfile.js
   2. Then, we refresh the task runner explorer
   3. Lastly, we run the task by right-clicking on the name of the task

The min:js gulp task exists now in the gulpfile task list:

We can look at the command line that is executed in the Output window:

The site.min.js file is now generated by the min:js task, which is the result of the minification and the concatenation of script1.js and script2.js: