After playing around with various task runners and build tools a couple of months ago I tried out Gulp Js. It has quickly become my favourite. The syntax for me is easier to read than Grunt Json files and it offers much more flexibility than Codekit.
Here is a basic run through on how to setup Gulp to run a few basic tasks.
You can now install Gulp. I like to install it globally so in your terminal enter:
Now we will need to install gulp locally for your project. In your project's root directory run.
Now you can create a file called: gulpfile.js and place it in your projects root dirctory. In it's most basic form your gulpfile.js could look like this:
This won't actually run any tasks how ever so lets add a couple of plugins so we can get things moving.
First we are going to install gulp-minify-css. Back into your terminal and enter:
The Node Package Manager (npm) will install the plugin for us.
After we minify our css we also want to rename the file before we save it. To do this we can grab another plugin:
Ok we have installed the two plugins we need to minify our css lets require them in our gulpfile.js and create a task to do the minifying.
When requiring plugins they can be assigned to variables so we can call them again later in our code by the assigned variable names. In this case minifyCSS and rename. We can then create a gulp.task assign it a name and pass it a function to run.
In our function we will first grab the file we want the task to target. In this case we are going to target a file called main.css in the css directory of our project. We can do this with gulp.src('./css/main.css').
Gulp can use the Node .pipe() funtion to process data. We can use this to run our funtions for this task.
Firstly we minify our css using .pipe(minifyCSS()) and then we use the rename plugin to save the minified css to another file with .pipe(rename('main.min.css')) so we keep our main.css file easy to work with for future development.
Finally we can use .pipe(gulp.dest('./css/')) to save our new file we are going to save it back into the css directory here.
Now in the terminal in the root directory of you project enter
and all your default tasks will be run. So for us we should have a nicely minified file in the css directory of our project named main.min.css.
From here we can basically repeat the same process described above for the css to handle the js. Requiring the new plugin and creating a new function using the gulp-uglify plugin.
Our gulpfile.js should now look like this:
Notice I added the compress-js task to the array in the second parameter of gulp.task('default', ['minify-css', 'compress-js']);