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.
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?