Nadszedł czas na drugą część z cyklu minifikacja i automatyzacja w zakresie front-endu. Jakiś czas temu przedstawiłem teorię i konfigurację Gulp.js. Dzisiaj skupię się na nieco szerszej analizie i przedstawieniu przykładu, jak (wg. mnie) zautomatyzować proces tworzenia witryny. Jako przykładowy schemat działania wykorzystam skrypt z Grunt’a.

Przygotujmy Gulp’a

czyli zainstalujmy go globalnie:

npm install -g gulp

Potrzebne moduły

• gulp-jshint
• gulp-concat
• gulp-uglify
• gulp-cssmin
• gulp-rename
• run-sequence
• del

Wszystkie potrzebne moduły znajdziemy na oficjalnej stronie. Ich instalacja odbywa się w sposób standardowy:

npm install --save-dev [nazwa-modułu]

Po instalacji tworzymy nasz plik konfiguracyjny gulpfile.js (wzorem gruntfile.js), którego pierwszą zawartością będzie:

var gulp = require('gulp'); 
var jshint = require('gulp-jshint');

// konfiguracja ścieżek do plików js
var paths = {
    scripts: ['gulpfile.js',
        'js/*.js'
    ]
};

// task odpowiedzialny za analizę naszych skryptów
gulp.task('lint', function() {
    return gulp.src(paths.scripts)
        .pipe(jshint());
});

W celu uruchomienia powyższego taska należy użyć gulp lint, jednak zostawmy to dla późniejszego gulp watch. Poniżej przedstawiłem przykładowy i opisany kod, który używałem przy pracy z Grunt’em:

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var cssmin = require('gulp-cssmin');
var runSequence = require('run-sequence');
var del = require('del');

// konfiguracja ścieżek do plików js
var paths = {
    scripts: [
        'gulpfile.js',
'js/*.js'
],
css: 'css/*.css'
};

// task odpowiedzialny za analizę naszych skryptów
gulp.task('lint', function() {
    return gulp.src(paths.scripts)
        .pipe(jshint());
});

// czyścimy nasz obszar roboczy w folderze dist
gulp.task('clean', function() {
    return del(['dist']);
});

// minifikujemy i tworzymy plik dla zminifikowanych styli
gulp.task('cssmin', function() {
    return gulp.src(paths.css)
        .pipe(cssmin())
        .pipe(rename('style.min.css'))
        .pipe(gulp.dest('dist/css'));
});

// łączymy nasze skrypty js
gulp.task('uglifyjs', function() {
    return gulp.src(paths.scripts)
        .pipe(uglify())
        .pipe(concat('scripts.min.js'))
        .pipe(gulp.dest('dist/js'));
});

// tworzymy watcher na nasze skrypty
gulp.task('watch', function() {
    gulp.watch(paths.scripts, ['lint']);
});

// nasz build, czyli sekwencja tasków stworzonych powyżej
gulp.task('build', function(callback) {
    runSequence('clean', ['cssmin', 'uglifyjs'],
callback
    )
})

gulp.task('default', function() {
    // empty
});

Chcąc wykonać nasz skrypt, będąc w katalogu głównym, należy w konsoli uruchomić jedno polecenie:

gulp build

Podsumowanie

Nasze zadania zostały zamknięte w jedno polecenie. Czyż to wspaniałe, że możemy sobie tak ułatwić pracę nad projektem?