Optimizing Frontend Workflow with Gulp at MakeUseOf

Introduction: From Basic Setup to an Optimized Workflow

When the company first launched its new theme at MakeUseOf, our workflow was quite basic. I wrote plain CSS and JavaScript without any modern optimizations—no minification, concatenation, or automated processing. Everything was manually edited and uploaded via FileZilla.

But as the site grew, so did our need for a more efficient development process. That’s when we transitioned to a more structured workflow using Gulp, Vagrant, Git, and GitHub. This shift significantly improved our efficiency, making code management, automation, and optimization seamless.

In this blog, I’ll walk you through how we set up and utilize Gulp to streamline our workflow. Whether you’re a beginner or an experienced developer, this guide will help you automate repetitive tasks and boost productivity.

---

Setting Up Gulp: Quick and Easy Installation

One of the best things about Gulp is its simplicity when it comes to setup. With just a couple of terminal commands, we were up and running:

$ npm init
$ npm install gulp -g
$ npm install gulp --save-dev

The first command initializes a package.json file, which stores all project dependencies. The second installs Gulp globally, and the third adds it as a development dependency for our project.

To prevent unnecessary files from cluttering our Git repository, we added node_modules and .sass-cache to .gitignore—a small step that keeps our project clean.

---

The Gulpfile: Automating Tasks Efficiently

At MakeUseOf, we needed Gulp to handle two primary tasks:

1. Processing, minifying, and prefixing SASS and Compass

2. Minifying JavaScript and enabling includes

To achieve these goals, we used several Gulp plugins:

• gulp-load-plugins (to load all plugins automatically)

• gulp-concat (for merging multiple files)

• gulp-uglify (to minify JavaScript)

• gulp-autoprefixer (to add necessary CSS prefixes)

• gulp-minify-css (to optimize CSS files)

• gulp-include (to manage JavaScript includes)

• gulp-clean (to remove unnecessary files)

• gulp-compass (to integrate Compass with Gulp)

Loading Plugins

Instead of manually requiring each plugin, we used gulp-load-plugins to make our workflow cleaner and more maintainable:

var gulp = require("gulp");  
var p = require("gulp-load-plugins")();

With this setup, we can access plugins using p.pluginName(), such as p.minifyCss(). This approach keeps our gulpfile.js concise and scalable.

---

Organizing Paths for Better Maintainability

Since MakeUseOf is a large website, managing file paths efficiently was crucial. To keep our paths structured and reusable, we defined them in an object:

var paths = {  
  m2014: {
    scripts: {
      src: 'themes/makeuseof2014/js/src/*.js',
      dest: 'themes/makeuseof2014/js'
    },
    styles: {
      src: 'themes/makeuseof2014/styles/*.scss',
      dest: 'themes/makeuseof2014'
    }
  }
}

var m2014 = paths.m2014;

This setup allows us to easily modify paths when switching to a new theme, making our workflow adaptable.

---

Task 1: Processing Styles (SASS to CSS, Prefixing, Minifying)

Our styles task handles three key functions:

• Compiling SASS into CSS

• Auto-prefixing CSS for cross-browser compatibility

• Minifying the final output

Here’s how the styles task is structured:

gulp.task('styles', function() {
  var src = m2014.styles.src;
  var dest = m2014.styles.dest;

  gulp.src(src)
    .pipe(p.compass({
      css: 'themes/makeuseof2014',
      sass: 'themes/makeuseof2014/styles',
      style: 'compressed',
      comments: 'false'
    }))
    .pipe(p.autoprefixer())
    .pipe(p.minifyCss())
    .pipe(gulp.dest(dest));
});

By using Gulp’s .pipe() method, we chain multiple plugins to process our styles efficiently. This setup ensures that our CSS files are optimized and ready for production.

---

Task 2: Optimizing JavaScript (Minification & Includes)

For scripts, our primary objectives were compression and modular includes. Here’s how we structured the scripts task:

gulp.task('scripts', function() {
  var src = m2014.scripts.src;
  var dest = m2014.scripts.dest;

  gulp.src(dest + '*.js', { read: false }).pipe(p.clean());

  gulp.src(src)
    .pipe(p.include())
    .pipe(p.uglify())
    .pipe(gulp.dest(dest));
});

One crucial step here is the cleaning process before generating new minified files. This ensures that outdated files don’t linger in our project, preventing potential issues.

---

Task 3: Automating with Watch

Our watch task automatically triggers our styles and scripts tasks whenever a file changes:

gulp.task('watch', function() {  
  gulp.watch(m2014.scripts.src, ['scripts']);
  gulp.watch([m2014.styles.src, m2014.styles.dest + '/**/*.scss'], ['styles']);
});

This means that whenever we modify a SASS or JavaScript file, Gulp will immediately recompile and optimize it—no manual intervention needed.

---

Setting a Default Task

To streamline execution, we defined a default task that runs everything:

gulp.task('default', function() {  
  gulp.start('scripts', 'styles', 'watch');
});

Simply running gulp in the terminal will now trigger all necessary tasks automatically.

---

Syncing Files Across Environments

At MakeUseOf, we use Vagrant for local development and maintain our Git repository at the wp-content folder. To keep our environment clean, we only sync package.json and gulpfile.js, ignoring everything else:

• .gitignore includes node_modules and .sass-cache.

• Other dependencies can be installed on each machine using npm install.

---

Conclusion: Why You Should Use Gulp

Switching to Gulp has significantly improved our workflow. It automates tedious tasks, optimizes assets, and ensures consistency across our codebase. Whether you’re working on a small project or a massive site like MakeUseOf, Gulp can save you hours of manual effort.

If you haven’t explored Gulp yet, now’s the time. Your future self will thank you!