Example Gulp file

gulpfile.js

var gulp = require('gulp');
var spawn = require('child_process').spawn;
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var runSequence = require('run-sequence');
var penthouse = require('penthouse');
var cleanCSS = require('clean-css');
var fs = require('fs');

// load plugins
var $ = require('gulp-load-plugins')();

gulp.task('penthouse', ['styles'], function () {
  penthouse({
    url: ['http://yoursite.dev', 'http://yoursite.dev/anotherpage'],
    css: 'assets/styles/css/main.css',
    width: 1280,
    height: 800
  }, function (err, critical) {
    var clean = new cleanCSS().minify(critical);
    fs.writeFile('system/templates/default_site/critical.group/index.html', '<style>' + clean + '</style>');
  });
});

gulp.task('autoreload', function () {
    // Store current process if any
    var p;
    gulp.watch('./gulpfile.js', spawnChildren);
    // Comment the line below if you start your server by yourself anywhere else
    spawnChildren();

    function spawnChildren() {
        if(p) {
            p.kill();
        }

        p = spawn('gulp', ['watch'], {stdio: 'inherit'});
    }
});

gulp.task('styles', function () {
    return gulp.src('./assets/styles/scss/main.scss')
        .pipe($.plumber())
        .pipe($.sass({
          errLogToConsole: true
        }))
        .on('error', $.util.log)
        .pipe($.autoprefixer('last 1 version, Explorer >= 8'))
        .pipe($.pixrem())
        .pipe(gulp.dest('./assets/styles/css'))
        .pipe(reload({stream:true}))
        .pipe($.size())
        .pipe($.notify("Compilation complete."));
});

gulp.task('scripts', function () {
    return gulp.src('./assets/scripts/main.js')
        .pipe($.plumber())
        .pipe($.jshint())
        .pipe($.jshint.reporter(require('jshint-stylish')))
        .pipe($.browserify())
        .on('error', $.util.log)
        .pipe(reload({stream:true}))
        .pipe($.size())
        .pipe(gulp.dest('./assets/scripts/build'));
});

gulp.task('images', function () {
    return gulp.src('assets/graphics/**/*')
        .pipe($.cache($.imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest('assets/graphics/'))
        .pipe(reload({stream:true, once:true}))
        .pipe($.size());
});

gulp.task('build', function() {
    runSequence('wiredep', 'scripts', 'styles');
});

gulp.task('default', function () {
    gulp.start('build');
});

gulp.task('serve', ['styles', 'scripts', 'wiredep'], function () {
    browserSync.init(null, {
        proxy: "yoursite.dev",
        logInfo: 'info',
        open: 'external',
        hostnameSuffix: ".xip.io"
    }, function (err, bs) {
        require('opn');
        console.log('Started connect web server on ' + bs.options.urls.external);
    });
});

// inject bower components
gulp.task('wiredep', function () {
    var wiredep = require('wiredep').stream;
    gulp.src('./system/templates/default_site/layouts.group/*.html')
        .pipe(wiredep({
            devDependencies: true,
            ignorePath:"../../../..",
            exclude: "/assets/lib/jquery/dist/jquery.js"
        }))
        .pipe(gulp.dest('./system/templates/default_site/layouts.group/'));
});

gulp.task('watch', ['serve'], function () {

    // watch for changes
    gulp.watch(['./system/templates/default_site/**/*.html'], reload);

    gulp.watch('assets/styles/scss/**/*.scss', ['styles']);
    gulp.watch('assets/scripts/**/*.js', ['scripts']);
    gulp.watch('bower.json', ['wiredep']);
});

package.json

{
  "name": "yoursite",
  "version": "0.0.1",
  "devDependencies": {
    "browser-sync": "^1.5.1",
    "clean-css": "^2.2.16",
    "del": "^0.1.3",
    "gulp": "^3.8.8",
    "gulp-autoprefixer": "^1.0.1",
    "gulp-browserify": "^0.5.0",
    "gulp-cache": "^0.2.2",
    "gulp-csso": "^0.2.9",
    "gulp-filter": "^1.0.2",
    "gulp-if": "^1.2.4",
    "gulp-imagemin": "^1.0.1",
    "gulp-jshint": "^1.8.4",
    "gulp-load-plugins": "^0.6.0",
    "gulp-minify-html": "^0.1.5",
    "gulp-notify": "^1.7.1",
    "gulp-pixrem": "^0.1.1",
    "gulp-plumber": "^0.6.6",
    "gulp-replace": "^0.4.0",
    "gulp-rimraf": "^0.1.0",
    "gulp-sass": "^1.1.0",
    "gulp-size": "^1.1.0",
    "gulp-sourcemaps": "^1.2.2",
    "gulp-uglify": "^1.0.1",
    "gulp-useref": "^1.0.2",
    "gulp-util": "^3.0.1",
    "jshint-stylish": "^1.0.0",
    "opn": "^1.0.0",
    "penthouse": "^0.2.5",
    "run-sequence": "^0.3.7",
    "wiredep": "^1.8.6"
  }
}