website-astro-stefanimhoff.de/src/content/journal/2014/gulp-tutorial-12-optimize-css-javascript-images-and-html.mdx

---
title: "Introduction to Gulp.js 12: Optimize CSS, JavaScript, Images and HTML"
slug: gulp-tutorial-12-optimize-css-javascript-images-and-html
author: Stefan Imhoff
date: 2014-10-29
description: "The ultimate tutorial and guide for Gulp.js: How to optimize CSS, JavaScript, images, and HTML to speed up your website."
cover: /assets/images/cover/gulp-12.webp
tags: ["code"]
series: gulp
---

This is the 12th part of my series, _Introduction to Gulp.js_. Today I will write tasks to optimize the assets of my website: CSS, JavaScript, Images, and HTML.

Every Kilobyte, which has to be loaded, will slow down the loading of my website. That’s why I will minimize all my CSS and JavaScript and run my images through an optimizer, to remove as many bytes as possible. I will also add a task for minimizing HTML, but I don’t use this task because the reduction is minimal.

## CSS

First, I will write a task, which will optimize the CSS. Compass can minimize the CSS for production, but this Gulp.js task squeezed another 6 KB out of my files.

I install the needed Gulp.js plugins:

```bash
$ npm install --save-dev gulp-csso@2.0.0 gulp-size@2.0.0
```

#### gulp/config.js

```javascript
optimize: {
  css: {
    src:  developmentAssets + '/css/*.css',
    dest: productionAssets + '/css/',
    options: {}
  }
}
```

#### gulp/tasks/production/optimize-css.js

```javascript
var gulp = require("gulp");
var csso = require("gulp-csso");
var size = require("gulp-size");
var config = require("../../config").optimize.css;

/**
 * Copy and minimize CSS files
 */
gulp.task("optimize:css", function () {
  return gulp.src(config.src).pipe(csso(config.options)).pipe(gulp.dest(config.dest)).pipe(size());
});
```

This task will copy the CSS files from the assets folder, minimize them, remove comments, output the size of the file, and copy them to the production assets folder.

## JavaScript

Now the CSS is minimized, and the same has to be done to the JavaScript files. I use UglifyJS for this task. If you don’t like it, go ahead and use a Google Closure or YUI compressor Gulp.js task.

```bash
$ npm install --save-dev gulp-uglify@1.0.1
```

#### gulp/config.js

```javascript
optimize: {
  css: {
    ...
  },
  js: {
    src:  developmentAssets + '/js/*.js',
    dest: productionAssets + '/js/',
    options: {}
  }
}
```

#### gulp/tasks/production/optimize-js.js

```javascript
var gulp = require("gulp");
var uglify = require("gulp-uglify");
var size = require("gulp-size");
var config = require("../../config").optimize.js;

/**
 * Copy and minimize JS files
 */
gulp.task("optimize:js", function () {
  return gulp
    .src(config.src)
    .pipe(uglify(config.options))
    .pipe(gulp.dest(config.dest))
    .pipe(size());
});
```

This task will take the JavaScript files, minimize and optimize them, put them in my production assets folder, and output the size.

## Images

Next, I will work on the images. They need to be copied to the production assets folder and crunched (reduce the size). This may take a while, depending on the size and amount of your images, that’s why I optimize the images for production.

<Banner summary="Show more details">

To get a more detailed output in Gulp.js, you may add a flag to your command:

`gulp publish --verbose`. It will list each individual image for the optimized task and how much it was compressed.

</Banner>

I’ll need `gulp-imagemin` for my task, which can minify PNG, JPG, GIF, and SVG images:

```bash
$ npm install --save-dev gulp-imagemin@2.3.0
```

#### gulp/config.js

```javascript
optimize: {
  css: {
    ...
  },
  js: {
    ...
  },
  images: {
    src:  developmentAssets + '/images/**/*.{jpg,jpeg,png,gif}',
    dest: productionAssets + '/images/',
    options: {
      optimizationLevel: 3,
      progressive: true,
      interlaced: true
    }
  }
}
```

#### gulp/tasks/production/optimize-images.js

```javascript
var gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var size = require("gulp-size");
var config = require("../../config").optimize.images;

/**
 * Copy and minimize image files
 */
gulp.task("optimize:images", function () {
  return gulp
    .src(config.src)
    .pipe(imagemin(config.options))
    .pipe(gulp.dest(config.dest))
    .pipe(size());
});
```

This task will take my images, optimize them, copy them to the assets folder, and output the size.

## HTML

As said before, I wrote this task, and you can see how to do it, but I don’t use it because the reduction is minimal and not worth the messy markup. I like to keep it readable, so other people can learn from it.

```bash
$ npm install --save-dev gulp-htmlmin@1.2.0
```

#### gulp/config.js

```javascript
optimize: {
  css: {
    ...
  },
  js: {
    ...
  },
  images: {
    ...
  },
  html: {
    src: production + '/**/*.html',
    dest: production,
    options: {
      collapseWhitespace: true
    }
  }
}
```

#### gulp/tasks/production/optimize-html.js

```javascript
var gulp = require("gulp");
var htmlmin = require("gulp-htmlmin");
var config = require("../../config").optimize.html;

/**
 * Minimize HTML
 */
gulp.task("optimize:html", function () {
  return gulp.src(config.src).pipe(htmlmin(config.options)).pipe(gulp.dest(config.dest));
});
```

## Conclusion

This concludes the 12th part of my series _Introduction to Gulp.js_. Today we learned how to minimize CSS and JavaScript files and reduce the size of images.

<Figure>
  <MoreLink href="https://github.com/kogakure/gulp-tutorial" text="View Source on GitHub" />
</Figure>