Gulp.js - menadżer zadań

Gulp.js jest menadżerem zadań opartym na node, w skrócie mamy kilka czynności do zrobienia w projekcie. I żeby nie robić tego ręcznie gulp wykonuje za nas te operacje.
Oprę się na małym projekcie, chcę less zamienić na css, skopiować do foldera css, zminimalizować i zmienić jego nazwę na style.min.css

1. Instalacja

Do tego oczywiście potrzebny najpierw jest zainstalowany node, jak już jest zainstalowany to instalujemy gulp.

// najpierw instalujemy globalnie - zainstaluje się w folderze C:\Users\Uzytkownik\AppData\Roaming\npm\node_modules\gulp

npm install -g gulp

// następnie instalujemy lokalnie w moim wypadku wchodzimy do D:\xampp\htdocs\test-gulp i tam instalujemy gulp jak i pluginy

npm install gulp --save-dev

Teraz aby móc z gulp skorzystać należy utworzyć plik konfiguracyjny gulpfile.js - musi być on umieszczony w katalogu głównym naszego projektu.

W naszym projekcie będziemy korzystać z gulp-less, gulp-minify-css oraz gulp-rename możemy je zainstalować pojedynczo jak i za jednym razem jak kto woli.

// wszystko instalujemy lokalnie

npm install gulp-less gulp-minify-css gulp-rename install --save-dev

Struktura naszego projektu:
mamy folder "test-gulp" w nim foldery css oraz less, w less jest plik style.less 🙂
W test-gulp znajduje się plik gulpfile.js (nasze taski) oraz package.json (plik generujemy automatycznie lub ręcznie 😉 - zawiera on dependencies itd.)

test-gulp/
|  css/
|  less/
|  |  style.less
gulpfile.js -- ad3
package.json -- ad2

2. Tworzymy package.json

Aby utworzyć package.json należy w konsoli lokalnie uruchomić npm init

Pojawi się nam coś takiego:

-----------------------
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (test-gulp)
-----------------------

Naciskamy enter do pojawienia się "Is this ok? (yes)
wpisujemy y + enter

i mamy w naszym projekcie package.json

3. Konfiguracja gulpfile.js

/**
 * umieszczamy nasze pakiety które nam są potrzebne do projektu
 */ 
var gulp        = require('gulp'),
    less        = require('gulp-less'),  // less -> css
    minifyCSS   = require('gulp-minify-css'),  // css -> minify css
    rename      = require('gulp-rename');  // zmiana style.css na style.min.css


/**
 * tworzymy task (zadanie) wszystkie pliki less 
 * zamieniamy na css
 * z css usuwamy br, nowe linie itd. czyli poczciwe minify
 * style.css zmieniamy nazwę na style.min.css
 */ 
gulp.task('less', function() {
    return gulp.src('less/*.less')
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('css')); // miejsce docelowe pliku css
});

/**
 * Watch Files For Changes - czyli obserwator zmian? (dziwnie to brzmi po polsku :))
 */
gulp.task('watch', function() {
    gulp.watch('less/*.less', ['less']);
});

/**
 * Default Task - domyślne zadania?
 */
gulp.task('default', ['less', 'watch']);

5. Uruchamianie

Aby zmiany w plikach były na bieżąco kompilowane należy uruchomić będąc w naszym folderze (test-gulp) w konsoli wpisując gulp.
Od tego momentu każda zmian na less będzie skutkowała wygenerowanie pliku style.min.css w folderze css.

Oczywiście każdy task może być uruchamiany osobno, wystarczy w konsoli także lokalnie wpisać gulp less

6. Podsumowanie

Gulp może robić z naszych plików zip, kopiować na serwer itd. 🙂
Więcej na stronie gulp plugins

W następnym artykule pokaże jak można to samo skonfigurować w Intelij IDEA.