Blog

Working with Gulp, JavaScript, and Sass
Posted on June 1, 2018 in Gulp by Matt Jennings

This tutorial will demonstrate how to use Gulp to:

  • Minify JavaScript.
  • Transpile Sass into CSS, and then minify said CSS.
  • Watch Sass files so that when changes are made, the Sass is transpiled into CSS, and then said CSS is minified.

Steps, including real example code, is below:

  1. Install Node.js on your Windows, Mac, or Linux machine.
  2. Download your files, such as WordPress files like the example below:
    ~/Desktop/projects/mj.net_2016/wp-content
  3. Using a shell, go into your root directory like the example below:
    ~/Desktop/projects/mj.net_2016
  4. After that in a shell type:
    npm init
  5. When the package name field appears type in gulp commands.
  6. Press Enter a bunch after that and then finally type in yes and press Enter.
  7. A package.json file will now be created.
  8. If you have a .gitignore file in your root directory (~/Desktop/projects/mj.net_2016) add the following code in this file:
    # Node modules
    node_modules/
    node_modules/**
  9. In your shell, type in the commands below, pressing Enter after each command:
    npm install gulp --save-dev
    npm install gulp-minify --save-dev
    npm install gulp-sass --save-dev
    npm install gulp-clean-css --save-dev
    npm install del --save-dev
  10. In your root directory (~/Desktop/projects/mj.net_2016), create a file names gulpfile.js.
  11. In this gulpfile.js, insert the following code: 
    let gulp = require('gulp');
let minify = require('gulp-minify');
let sass = require('gulp-sass');
let cleanCSS = require('gulp-clean-css');
let del = require('del');

gulp.task('cleanjs', () => {
   return del([
      'wp-content/themes/MJ-net-2012/js/*',
       '!wp-content/themes/MJ-net-2012/js/local.js',
       '!wp-content/themes/MJ-net-2012/js/wp-admin.js'
   ]);
});

gulp.task('js',['cleanjs'], () => {
    return gulp.src('wp-content/themes/MJ-net-2012/js/**.js')
        .pipe(minify())
        .pipe(gulp.dest('wp-content/themes/MJ-net-2012/js'));
});

gulp.task('watchjs', () => {
    gulp.watch([
        'wp-content/themes/MJ-net-2012/js/local.js',
        'wp-content/themes/MJ-net-2012/js/wp-admin.js'
    ], ['js'])
});

gulp.task('sass', () => {
    return gulp.src('wp-content/themes/MJ-net-2012/**.scss')
        .pipe(sass())
        .pipe(cleanCSS())
        .pipe(gulp.dest('wp-content/themes/MJ-net-2012'));
});

gulp.task('watchsass', () => {
    gulp.watch('wp-content/themes/MJ-net-2012/**.scss', ['sass']);
});

gulp.task('default',['js'], () => {
    gulp.start(['watchjs','watchsass']);
});
  12. In your style.scss file (inside ~/Desktop/projects/mj.net_2016/wp-content/themes/MJ-net-2012 directory) add a ! just after the first CSS comment.

    Before Code
    /*
    Theme Name: MJ-net-2012 Theme - Based on BLANK Theme by Chris Coyier
    Theme URI: https://www.mattjennings.net
    Description: This is a started theme for the www.mattjennings.net portfolio redesign -- WordPress v2.9.1
    Author: Matt Jennings
    Author URI: https://www.mattjennings.net
    Version: 1
    */

    After Code
    /*!
    Theme Name: MJ-net-2012 Theme - Based on BLANK Theme by Chris Coyier
    Theme URI: https://www.mattjennings.net
    Description: This is a started theme for the www.mattjennings.net portfolio redesign -- WordPress v2.9.1
    Author: Matt Jennings
    Author URI: https://www.mattjennings.net
    Version: 1
    */

  13. In your root directory (~/Desktop/projects/mj.net_2016) in your shell, create enter the command below and press Enter when done:
    gulp

    Now all your JavaScript will be minified and your Sass will be transpiled into CSS and that CSS will be minified.

 

One Response

  1. Serhii says:
    June 1, 2018 at 15:49

    Good job!

    Reply

Leave a Reply