Using Gulp to minify CSS, JS and HTML Jekyll

If you owns a Jekyll site, you may want to minify the CSS, JS and HTML files to reduce the size of the site. In this post, I will show you how to use gulp to minify CSS, JS and HTML of the Jekyll site.

Prerequisites

• Node.js 10.0.0 or higher
• npm 5.6.0 or higher

Setting up gulp

First, navigate to the root directory of your Jekyll site and run the following command to create a package.json file:

npm init

This command will ask you a few questions about your project. You can just press enter to accept the default value for all the questions.

then, you need install gulp-cli globally:

npm install --global gulp-cli

Installing required gulp plugins

We need following gulp plugins to minify CSS, JS and HTML of the Jekyll site:

• gulp-htmlmin
• gulp-uglify
• gulp-clean-css

To install these plugins, run the following command:

npm install --save-dev gulp-htmlmin gulp-uglify gulp-clean-css

Creating gulpfile.js

Create a gulpfile.js file in the root directory of your Jekyll site and add the following code to it:

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

Lets write some gulp tasks to minify CSS, JS and HTML of the Jekyll site.

Minify CSS

gulp.task('minify-css', function() {
  return gulp.src('_site/assets/**/*.min.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('_site'));
});

Base on you project structure, you can specify the CSS files to minify. In this example, I use _site/**/*.css to specify all CSS files in the _site directory.

Minify JS

gulp.task('minify-js', function() {
  return gulp.src('_site/js/**/*.min.js')
    .pipe(uglify())
    .pipe(gulp.dest('_site'));
});

Minify HTML

gulp.task('minify-html', function() {
  return gulp.src('_site/**/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('_site'));
});

This is a optional step. You can skip this step if you don’t want to minify HTML files.

Running gulp tasks

To run the gulp tasks, run the following command:

gulp minify-css minify-js minify-html

Putting it all together

Here is the final gulpfile.js file:

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

gulp.task('minify-css', function() {
  return gulp.src('_site/assets/**/*.min.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('_site'));
});

gulp.task('minify-js', function() {
  return gulp.src('_site/js/**/*.min.js')
    .pipe(uglify())
    .pipe(gulp.dest('_site'));
});

gulp.task('minify-html', function() {
  return gulp.src('_site/**/*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('_site'));
});

gulp.task('default', gulp.series('minify-css', 'minify-js', 'minify-html'));

Setting up NPM scripts for minification

To make it easier to run the gulp tasks, we can add some NPM scripts to the package.json file.

Open the package.json file and add the following scripts:

"scripts": {
  "minify": "gulp minify-css minify-js minify-html",
  "minify-css": "gulp minify-css",
  "minify-js": "gulp minify-js",
  "minify-html": "gulp minify-html"
}

Now, you can run the following command to minify CSS, JS and HTML of the Jekyll site:

npm run minify

Using minified CSS, JS and HTML in production

To use minify version of CSS, JS and HTML in production, you need to change the following code in the _includes/head.html file:

if jekyll == production (use {} and %)
  <script src="/js/main.min.js"></script>
else
  <script src="/js/main.js"></script>
endif

Build command:

JEKYLL_ENV=production jekyll build --trace && npm run minify

Conclusion

I hope you find this post useful. If you have any questions, please leave a comment below.