LBweb Łukasz Bącik
Komentarze: 0

Gulp.js – narzędzie do automatyzacji #2

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.

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.

Gulp.js - narzędzie do automatyzacji #2

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?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *