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:
  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://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://mattjennings.net
    Version: 1
    */

    After Code
    /*!
    Theme Name: MJ-net-2012 Theme - Based on BLANK Theme by Chris Coyier
    Theme URI: https://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://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:

    Good job!

Leave a Reply

To Top ↑