DEV Community

loading...
Cover image for Minifying Text-Based Resources

Minifying Text-Based Resources

Tsowa Babangida
Web developer with a passion for inclusive and performant experiences on the web #webperf #webdev
Updated on ・3 min read

INTRODUCTION

The third way of optimising the First Paint (FP) and First Contentful Paint (FCP) performance metrics is to minify your text-based resources (CSS and JavaScript files).

To do this, we are going to make use of Gulp Js, a toolkit for automating painful or time-consuming tasks during development.

To use Gulp Js, we have to install it and create the gulpfile.js file.

$ npm install gulp-cli -g
$ npm install gulp -D
$ npx -p touch nodetouch gulpfile.js
Enter fullscreen mode Exit fullscreen mode

After creating our gulpfile.js file, we need to import Gulp to use it

const gulp = require('gulp');
Enter fullscreen mode Exit fullscreen mode

MINIFYING CSS FILES

To minify CSS files, we will be making use of the following Gulp plugin:

INSTALL GULP CLEAN CSS PLUGIN

To install the gulp-clean-css plugin, we do the following

$ npm install gulp-clean-css --save-dev
Enter fullscreen mode Exit fullscreen mode

USING THE PLUGIN

To actually minify our CSS files, we use the gulp-clean-css plugin which should look like this:

Add gulp-clean-css to gulpfile.js
const cleanCSS = require('gulp-clean-css')
Enter fullscreen mode Exit fullscreen mode
Create the gulp task

Add the following code to your gulpfile.js file

// MINIFY CSS TASK USING `cleanCSS`
gulp.task('minify-css', () => {
    //  provide path to CSS files
    return gulp.src('<PATH_TO_CSS_FILES>')
        //  use cleanCSS plugin on `gulp.src` and
        //  set compatibility for IE 
        .pipe(cleanCSS({ compatibility: '*' }))
        //  save result to destination path
        .pipe(gulp.dest('<DESTINATION>'));
});
Enter fullscreen mode Exit fullscreen mode

MINIFYING/UGLIFYING JAVASCRIPT FILES

To minify JavaScript files, we will be making use of the following Gulp plugin:

INSTALL GULP UGLIFY PLUGIN

To install the gulp-uglify plugin, we do the following

$ npm install gulp-uglify --save-dev
Enter fullscreen mode Exit fullscreen mode

USING THE PLUGIN

To actually uglify our JavaScript files, we use the gulp-uglify plugin which should look like this:

Add gulp-uglify to gulpfile.js
const uglify = require('gulp-uglify')
Enter fullscreen mode Exit fullscreen mode
Create the gulp task

Add the following code to your gulpfile.js file

// MINIFY JS TASK USING `uglify`
gulp.task('uglify-js', () => {
    // provide path to Js files
    return gulp.src('<PATH_TO_JS_FILES>')
        //  use uglify plugin on `gulp.src`
        .pipe(uglify())
        //  save result to destination path
        .pipe(gulp.dest('<DESTINATION>'));
});
Enter fullscreen mode Exit fullscreen mode

RUNNING THE GULP TASKS

We make use of Gulp to run a specific task we want to happen to our code. The general format for that is

$ gulp <task_name> 
Enter fullscreen mode Exit fullscreen mode

where <task_name> is the actual name provided for the task.

So, to run the above tasks for minifying our files, we do this:

$ gulp minify-css && gulp uglify-js
Enter fullscreen mode Exit fullscreen mode

We could also run it via NPM by adding the following to the scripts property in a package.json file

{
...
"minify-css": "gulp minify-css",
"uglify-js": "gulp uglify-js",
"minify-files": "gulp minify-css && gulp uglify-js"
...
}
Enter fullscreen mode Exit fullscreen mode

and running them through the npm command

$ npm run minify-css
$ npm run uglify-js
$ npm run minify-files
Enter fullscreen mode Exit fullscreen mode

After all is said and done, our gulpfile.js file should look like this

const gulp = require('gulp');
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');

// MINIFY CSS TASK USING `cleanCSS`
gulp.task('minify-css', () => {
    //  provide path to CSS files
    return gulp.src('<PATH_TO_CSS_FILES>')
        //  use cleanCSS plugin on `gulp.src` and
        //  set compatibility for IE 
        .pipe(cleanCSS({ compatibility: '*' }))
        //  save result to destination path
        .pipe(gulp.dest('<DESTINATION>'));
});

// MINIFY JS TASK USING `uglify`
gulp.task('uglify-js', () => {
    // provide path to Js files
    return gulp.src('<PATH_TO_JS_FILES>')
        //  use uglify plugin on `gulp.src`
        .pipe(uglify())
        //  save result to destination path
        .pipe(gulp.dest('<DESTINATION>'));
});
Enter fullscreen mode Exit fullscreen mode

CONCLUSION

To minimise text-based resources is to speed up load times of websites because it reduces the sizes of our files making the time it takes for the browser to fetch said files significantly shorter.

SOURCES

Discussion (0)