basics of setting up a gulpfile.js

gulp is an awesome automation tool that will speed up and simplify your work flow. In the below example, gulp could be used, amongst other things, to watch a js and css directory for a file change, once there is a file change, it will concatinate, minify, then compile the code all into 1 designated file.

the general structure of a gulp task looks like this:

gulp.task('task-name', function() {
  return gulp.src('the file(s) to be watched')
    .pipe() // do something
    .pipe() // do something
    .pipe(gulp.dest('the destination of the file'))
})

so you assign tasks, return the files to be watched with gulp.src, using .pipe() you assign things to do the the files, and at the end you use gulp.dest to spit out the results to a certain file.


lets take a look at a gulpfile.js that might be used in a real project:

var gulp   = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var sass   = require('gulp-sass');
var sourceMaps = require('gulp-sourcemaps');
var minifyCss = require('gulp-minify-css');

var sourceFiles = {
  js: ['./src/javascripts/**/*.js', './src/javascripts/*.js'],
  css: ['./src/stylesheets/**/*.css', './src/stylesheets/*.css']
};

gulp.task('default', ['watch']);

gulp.task('js', function() {
  return gulp.src(sourceFiles.js)
    .pipe(sourceMaps.init())
    .pipe(uglify())
    .pipe(concat('app.bundle.js'))
    .pipe(sourceMaps.write())
    .pipe(gulp.dest('./public/javascripts'))
});

gulp.task('css', function() {
  return gulp.src(sourceFiles.css)
    .pipe(sourceMaps.init())
    .pipe(minifyCss())
    .pipe(concat('app.bundle.css'))
    .pipe(sourceMaps.write())
    .pipe(gulp.dest('./public/stylesheets'))
});

gulp.task('watch', function() {
  gulp.watch(sourceFiles.js, ['js'])
  gulp.watch(sourceFiles.css, ['css'])
});

here you can see it follows the pattern we talked about earlier. Whats new is the gulp.task(‘default’) and gulp.task(‘watch’). The default task is what will run once $ gulp is typed into the command line, and gulp.task('watch') is using gulp.watch('files', 'task to run') to watch for a change in a file, and then if there is a change, run or rerun the task specified.

Also notice in the sourceFiles object. Each property is being used in a gulp.src(), and we can use an array of files instead of 1 file to watch.