Minifying Text-Based Resources
Tags: javascript, webperf, tutorial, css
Published: 2020-03-22 16:52:07

### 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](https://gulpjs.com), 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.

```bash
$ 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

```js
const gulp = require('gulp');
```

### MINIFYING CSS FILES

To minify CSS files, we will be making use of the following Gulp plugin:
- [Gulp Clean CSS Plugin](https://www.npmjs.com/package/gulp-clean-css)

#### INSTALL GULP CLEAN CSS PLUGIN

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

```bash
$ 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`

```js
const cleanCSS = require('gulp-clean-css')
```

##### Create the gulp task

Add the following code to your `gulpfile.js` file

```js
// 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:
- [Gulp Uglify Plugin](https://www.npmjs.com/package/gulp-uglify)

#### INSTALL GULP UGLIFY PLUGIN

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

```bash
$ 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`

```js
const uglify = require('gulp-uglify')
```

##### Create the gulp task

Add the following code to your `gulpfile.js` file

```js
// 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 
```bash 
$ 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:

```bash
$ 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

```json
{
...
"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

```bash
$ 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

```js
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.

### SOURCES
- [Gulpjs.com](https://gulpjs.com)
- [NPM](https://npmjs.com)