V adresáři se šablonou nejprve vytvořte soubor package.json, do kterého zkopírujte následující obsah:

{
  "private": true,
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-autoprefixer": "^3.0.4",
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.1.0",
    "gulp-concat": "^2.6.0",
    "gulp-jshint": "^1.12.0",
    "gulp-minify-css": "^1.2.0",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.0.1",
    "gulp-sass": "^2.0.3",
    "gulp-sourcemaps": "^1.5.2",
    "jshint-stylish": "^2.1.0"
  }
}

Podmínkou pro spuštění následujícího příkazu je nainstalovaný node a gulp:

sudo npm install

Poté vytvoříme soubor gulpfile.js, do kterého zkopírujeme následující:

var gulp = require('gulp');
var sass = require('gulp-sass');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var plumber = require('gulp-plumber');
var notify = require('gulp-notify');
var sourcemaps = require('gulp-sourcemaps');
var minifyCss = require('gulp-minify-css');
var stylish = require('jshint-stylish');
var autoprefixer = require('gulp-autoprefixer');

var plumberErrorHandler = { errorHandler: notify.onError({

    title: 'Gulp',

    message: 'Chyba: <%= error.message %>'

})

};

gulp.task('sass', function () {

    gulp.src('sass/app.scss')
        .pipe(plumber(plumberErrorHandler))
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer({ browsers: ['last 5 versions', '> 1%', 'IE 8', 'IE 9', 'IE 10'] }))
        .pipe(minifyCss({compatibility: 'ie8'}))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('build/css'));
});

gulp.task('js', function () {

    gulp.src('js/*.js')
        .pipe(plumber(plumberErrorHandler))
        .pipe(sourcemaps.init())
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'))
        .pipe(jshint.reporter('fail'))
        .pipe(concat('app.js'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('build/js'));
});

gulp.task('watch', function() {

    gulp.watch('sass/**', ['sass']);
    gulp.watch('js/**', ['js']);

});

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

Vysvětlení funkčnosti

Nyní pokud spustíme v terminálu příkaz gulp se při jakékoliv změně v složce sass a složce js provedou dvě události.

První ve složce sass zkompiluje všechny .scss soubory do jednoho CSS souboru, který se umístí do složky build/css. Výsledný soubor bude minifikován.

Druhá událost se podívá do složky js, kde všechny soubory spojí do jednoho JavaScript souboru, který se vygeneruje do složky build/js.

Vygenerovaný CSS i JS soubor budou obsahovat v sobě source map.