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
After creating our gulpfile.js
file, we need to import Gulp to use it
const gulp = require('gulp');
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
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')
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>'));
});
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
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')
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>'));
});
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>
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
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"
...
}
and running them through the npm
command
$ npm run minify-css
$ npm run uglify-js
$ npm run minify-files
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>'));
});
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.
Top comments (0)