Gulp Workflow

This is a sample project that uses Gulp to:

• Copy files to a specific folder
• Optimize images
• Create your own webfont from SVG icons
• Compile SASS and JavaScript (Browserify)
• Concatenate files
• Add CSS browser prefixes
• Minify CSS / Uglify JS
• Version files (styles.min.css >> styles.min-69fb84d1.css)
• Sync changes to CSS/JS/HTML/PHP between browsers/devices (BrowserSync)
• Read more...

You can also keep watch on your PHPSpec tests. These have their own separate tasks.

System Requirements

To use Gulp, you will need to have a few programs installed on your machine:

• NodeJS
• Git Bash Console (recommended if you're on Windows)

If you want to run PHPSpec, then you will also need to install:

• PHP (Windows users: unzip and update your PATH)
• Composer

Install Gulp & Dependencies

Gulp

First, install Gulp globally on your machine: (only once)

npm install -g gulp

Bower

Install Bower globally on your machine: (only once)

npm install -g bower

With Bower you can easily manage third party JS and CSS packages. Thanks to the debowerify package, you can require Bower dependencies with Browserify:

var $ = require('jquery'); //=> Bower Package

module.exports = function() {
    $('div').animate({
        width: "200px"
    }, 500);
}

IMPORTANT: Note that this only works if the package has set a main script in their bower.json file: main: "dist/jquery.js"!

BrowserSync (optional)

If you want to use BrowserSync, install it globally aswell:

npm install -g browser-sync

With BrowserSync all browsers and devices that are connected to your BrowserSync URL will be automatically updated on HTML, CSS and JS changes. Scrolling will also be synced on all connected devices!

Project Dependencies

Next, install Gulp and our dependencies in this project:

npm install

TIP: When npm install has finished it will automatically trigger bower install.

Install PHPSpec (optional)

If you have PHP and Composer installed, you can install PHPSpec, which is already added as a dependency in the composer.json file.

composer install

Project Structure

This is the default project structure, but all folders can be changed in gulpfile.js.

• gulpfile.js : It's all about this script!
• package.json : NodeJS packages (Gulp dependencies, etc.)
• bower.json : Frontend dependencies (jQuery, etc.)
• composer.json : PHP dependencies (PHPSpec, etc.)
• phpspec.yml : PHPSpec configuration file
• assets/images/ : Original images, to be optimized
• assets/icon-font/ : SVG icons that will be compiled into a webfont
• assets/sass/_icon-font.scss : Generated SASS file for the webfont
• assets/sass/ : SASS source files
• assets/js/ : JavaScript source files
• compiled/ : Compiled SASS and JavaScript files (not yet concatenated)
• compiled/dist/ : Concatenated files
• public/images : Optimized images
• public/fonts/ : Webfont generated from SVG icons
• public/css/ : CSS production file (compiled, concatenated, versioned, ...)
• public/js/ : JavaScript production file (compiled, concatenated, versioned, ...)
• src/ : PHP Classes (PSR-4 autloaded with the App namespace)
• spec/ : PHPSpec tests

The webfont's SASS file is generated from a template in the assets folder. Example icon made by Freepik from Flaticon is licensed under CC BY 3.0.

Using This Gulpfile

TIP: if you don't want all the "Starting" and "Finished" task logging in the console window, then use the --silent option when you run gulp.

Run gulp to:

• Copy files to a specific folder
• Optimize images
• Compile SVG icons into a webfont and create a SASS file
• Compile SASS and JS (Browserify)
• Concatenate with vendor CSS and JS files
• Combine CSS media queries
• Add browser prefixes to CSS
• Uglify JS
• Minify CSS
• Version CSS and JS files
• Remove compiled CSS and JS files and only keep the one used for production

Run gulp --dev to do the above, but:

• Use source maps for debugging
• DO NOT combine CSS media queries (does not work well with source maps)
• DO NOT Uglify JS / Minify CSS
• DO NOT remove compiled CSS and JS files
• Start watching SVG, SASS and JS files for changes
• Start local server and sync changes to CSS/JS/HTML/PHP between browsers/devices (BrowserSync)

Run gulp phpspec to:

• Run PHPSpec tests and start watching for changes

Additional (more specific) tasks:

• gulp serve : Start local server and sync changes to CSS/JS/HTML/PHP between browsers/devices (BrowserSync)

Run tasks, but don't watch for changes:

• gulp copy : Copy files to a specific folder
• gulp images : Optimize images
• gulp icon-font : Compile SVG icons into a webfont and create the SASS file
• gulp css : Run all CSS tasks
• gulp js : Run all JS tasks
• gulp version : Version files (after running gulp css and gulp js)

Watch for changes and then run all tasks:

• gulp watch-copy : Watch specified files and copy them to a folder
• gulp watch-images : Watch image assets and optimize them
• gulp watch-icon-font : Watch SVG icons, compile them into a webfont
• gulp watch-css : Watch SASS files for changes and run all CSS tasks
• gulp watch-js : Watch JS files for changes and run all JS tasks

Compile only (don't concatenate other files):

• gulp sass : Compile SASS, combine media queries, add prefixes, minify
• gulp watch-sass : Watch SASS files for changes and compile SASS, combine media queries, add prefixes, minify
• gulp browserify : Compile JS, uglify
• gulp watch-browserify : Watch JS files for changes, compile JS, uglify

Concatenate files only (no SASS or Browserify):

• gulp concat-css : Concatenate CSS files, combine media queries, add prefixes, minify
• gulp concat-js : Concatenate JS files, uglify

Minify/Uglify files only:

• gulp minify-css : Minify an array of CSS files and save them with a .min suffix
• gulp uglify-js : Uglify an array of JS files and save them with a .min suffix

Clean up compiled files:

• gulp cleanup-css : Remove compiled CSS file and only keep the one used for production
• gulp cleanup-js : Remove compiled JS file and only keep the one used for production

TIP: You can use --dev to prevent minification, save source maps and keep compiled files. This behavior is configurable in gulpfile.js.

---