Sample gulpfile from a recent project

gulpfile.js

var gulp = require('gulp');
// Using this plugin, you won't manually have to require each plugin you add. This does the work for you.
// Just remember you'll have to prepend 'plugins' to your plugin function when you build your tasks.
var gulpLoadPlugins = require('gulp-load-plugins');
// Turn lazy loading of plugins off to make the connect plugin work
var plugins = gulpLoadPlugins({lazy: false});
// Check out the autoprefixer docs to see how to build settings for gulp-autoprefixer
// https://github.com/ai/autoprefixer
var prefixerSetting = ['last 1 versions', '> 1%'];

// 'default' is the task that runs when you simply type 'gulp'. I usually use this for my development task.
// This one runs compass, concatenates JS (which probably shouldn't be done for dev, but I do it anyway), runs
// a development server, and starts the watch task.
gulp.task('default', function () {
  gulp.start('compass.dev', 'js', 'connect');
  // A watch task will watch a directory for whatever pattern you specify and run a series of tasks when changes happen.
  // This one looks for changes in Sass or SCSS and runs the compass.dev task when those occur.
  gulp.watch('./sass/**/{*.sass,*.scss}', ['compass.dev']);
  gulp.watch('./javascripts/**/*.js', ['js'])
});

// This task runs when you type 'gulp build' in the project directory. This one uses compass production settings
// and minifies images as well.0
gulp.task('build', function () {
    gulp.start('compass.production', 'imagemin', 'js');
});

// Development settings for compass. This leaves the sass uncompressed to make it more readable during development
gulp.task('compass.dev', function () {
    gulp.src('./sass/**/{*.sass,*.scss}')
        .pipe(plugins.compass({
            config_file: './config.rb',
            css: './stylesheets',
            sass: './sass'
        }))
        // Autoprefixer makes sure we have the correct prefixes to meet the compatibility we set in the string at the top.
        .pipe(plugins.autoprefixer.apply(this, prefixerSetting))
        // pixrem automatically generates pixel fallbacks for rem values. Huge time-saver.
        .pipe(plugins.pixrem())
        .pipe(gulp.dest('./stylesheets'))
});

// Production settings for compass. This outputs the minified CSS.
gulp.task('compass.production', function () {
    gulp.src('./sass/**/{*.sass,*.scss}')
        .pipe(plugins.compass({
            style: 'compressed',
            comments: false,
            css: './stylesheets',
            sass: './sass'
        }))
        .pipe(plugins.autoprefixer.apply(this, prefixerSetting))
        .pipe(plugins.pixrem())
        .pipe(gulp.dest('./stylesheets'))
});

// Minifies images
gulp.task('imagemin', function () {
    gulp.src('./img/**/{*.gif,*.png,*.jpg}')
        .pipe(plugins.imagemin())
        .pipe(gulp.dest('./img'))
});

// Concatenates and uglifies JS
gulp.task('js', function () {
    gulp.src(['./javascripts/bootstrap/tooltip.js','./javascripts/**/*.js'])
        .pipe(plugins.concat('all.js'))
        .pipe(plugins.uglify())
        .pipe(gulp.dest('./js'))
})

// Runs a development server
gulp.task('connect', function() {
    plugins.connect.server({root: './'});
});