Bundling and optimising the front-end assets using gulp.

For the process of bundling the CSS and minifying the JS we use gulp. By bundling the CSS we can reduce the number of request made to the server when the website/application is loading.

We will be creating the following directory and file structure in our instance:

wwwroot/
|- css/
   |- stylesheet-min.css
|- js/
      |- jquery-min.css
      |- main-min.css
wwwroot/
|- js/
   |- jquery.js
   |- main.js
|- css/
   |- app.css
   |- custom.css
gulpfile.js
package.json

Automating the process with Gulp.js
Before minifying our styles/scripts let us start with the bundling process.

Photo by Markus Spiske on Unsplash

Bundling Styles:

• Before we start our gulp process we need to make sure to install gulpjs.
• Install gulp-concat.
• Next, we will want to begin writing the content of gulpfile.js

var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('min:css', function () {
   return gulp.src(['assets/css/app.css', 'assets/css/custom.css']) 
   .pipe(concat('stylesheet.css'))
   .pipe(gulp.dest('wwwroot/css/'));
});

The above (min:css) task defines a procedure to compress multiple CSS source files into one bundle. We list the source files, which will be globbed, read, and concatenated in the order specified. We pipe that into the concat plugin to get one final file called stylesheet.css. Finally, we tell gulp to write the file to wwwroot/css/.

Note: gulp-concat can also be used to bundle scripts. In this case we are not bundling the scripts.

Photo by Luca Bravo on Unsplash

Optimize build assets:

We will need the following two new plugins.

• gulp-terser to uglify the scripts.
• gulp-clean-css to minify the style

var cleanCss = require('gulp-clean-css');
var treser = require('gulp-treser');
gulp.task('min:css', function () {
   return gulp.src(['assets/css/app.css', 'assets/css/custom.css']) 
   .pipe(concat('stylesheet.css'))
   .pipe(cleanCss())
   .pipe(gulp.dest('wwwroot/css/'));
});
gulp.task('min:js', function () {
   return gulp.src(['assets/js/jquery.js', 'assets/css/main.js]) 
   .pipe(treser())
   .pipe(gulp.dest('wwwroot/js/'));
});

To keep our code optimize, clean and avoid duplication/overwriting, we add two more task to our gulpfile. These tasks help us to clean the scripts/styles every time we run our minification task. del is another gulp plugin which we use for this task.

var del = require('del');
gulp.task('clean:css', function () {
   return del([
      'wwwroot/css/style.min.css'
   ]);
});
gulp.task('clean:js', function () {
   return del([
      'wwwroot/js/*.min.js',
   ]);
})

Let’s create a task to clean the styles/scripts in a series using gulp.series. This helps us to delete the minified scripts/styles created by gulp.

gulp.task('clean', gulp.series(['clean:css', 'clean:js']));

Photo by Ferenc Almasi on Unsplash

Let’s create two more task to clean and minify the scripts/styles individually. This helps us to run the task individually whenever it is needed.

gulp.task('minStyles', gulp.series(['clean:css', 'min:css']));
gulp.task('minScripts', gulp.series(['clean:js', 'min:js']));

Conclusion

Now we have everything we need. It is now time to create another task for overall minification which runs the clean, min:js and min:css task in a series.

gulp.task('min', gulp.series(['clean', 'min:js','min:css']));