1. Install node.js
If you don’t already have Node installed, get the download packages here: http://nodejs.org/download/. Run the package as you would install any other application.
This file determines the dependencies of the project.
3. Open your command line app, cd to your theme, and run:
You may need to sudo if the command fails. This will install a node_packages directory within your theme that contains all the files necessary to run Gulp tasks. This may take some time…
This file defines the tasks that Gulp will run. Here’s what each task will do:
Styles: Runs Sass on style.scss. Current file is set to output in Expanded style with line numbers. Change expanded to compressed for production.
Compress: Compresses .js files within the /js directory. Outputs to /build and adds .min to the file name.
Plugins: Concatenates and compresses any .js file within the js/plugins folder. Outputs to /build/plugins.min.js
Watch: Watches for changes in the above three tasks, and runs the task.
Images: Compresses images within the img/icons directory. Outputs to img/build.
Default: Default tasks to run when you start Gulp
5. Run Gulp
In the command line, be sure you’re still in your project directory and run:
6. Gulp Images
Compressing images isn’t included in the watch task. To run this task, or any other task, enter:
Boom, compressed images.
Running Gulp will start a LiveReload server, but to get it to work you’ll also need the LiveReload extension for your browser. Get LiveReload extensions here.
If you’re having trouble getting this to work, your theme may have a different Sass/js/image file structure. Grab a copy of our Infusion theme on Github to see how we’re currently set up. Infusion is our WordPress starter theme for most projects. It’s a skeleton theme, built on Hybrid Core, Sass, and Bourbon. Free to use and modify.
One thing I’d really like to add is notifications. A previous version of this used gulp-plumber to output OS X notifications, but the latest version of gulp-ruby-sass doesn’t appear to support it. I could be wrong.
If you’ve got a task that should be added to this, let me know. It’s been great to move on from Codekit and have more control.