Gulp.js

Gulp jest drugim automatyzatorem zadań, który opisuję i śmiało można powiedzieć, że jest on najprostszy w użyciu z pośród dostępnych. W automatyzatorze grunt.js trzeba zapoznać się ze specyficzną składnią. W webpacku również składnia, ale i duża liczba możliwości, które początkowo przytłaczają. Natomiast Gulp.js różni się od swoich konkurentów, bo twórcy tego automatyzatora zaproponowali składnię znaną praktykom JavaScript.

Instalacja node i gulp

Żeby przystąpić do pracy z Gulp.js potrzebujemy mieć zainstalowany pakiet node.js, jeżeli go jeszcze nie posiadasz wejdź na stronę https://nodejs.org/en/ i wybierz Download jako: LTS (Long-term Support) Recommended For Most Users.

Następnie można już zainstalować samego Gulpa wpisując w wierszu poleceń:

npm install gulp-cli -g

Poprawność instalacji można sprawdzić komendą gulp --help.
Teraz utwórz katalog z własnym projektem i zainicjuj package.json oraz lokalnie Gulp.js dla danego projektu:

npm init
npm install gulp --save-dev

Interesujące pluginy dla Gulp.js

Gulp-sass – konwertuje pliki SASS na CSS
Gulp-autoprefixer – dodaje prefiksy CSS
Gulp-sass-lint – sprawdza poprawność plików SASS
Gulp-live-server – wirtualny serwer
Browser-sync – inny wirtualny serwer
Gulp-uglify – zmniejsza plik o spacje
Run-sequence – uruchamia procesy kolejno po sobie

gulpfile.js

To już koniec przygotowań teraz należy stworzyć plik: gulpfile.js. To w nim odbędzie się cała konfiguracja zadań.

Na początek wyświetlenie w konsoli Hello World!

var gulp = require("gulp");
  gulp.task("hello", function(){
	console.log("Hello world!");
  });
  gulp.task('default', ['hello']);

Uruchomienie powyższego odbywa się poprzez wpisanie w konsoli polecenia gulp.

Teraz już coś bardziej sensownego czyli deklaracja pojedynczego pluginu.
Praktyczny przykład budowy gulpfile.js [deklaracja pluginu ‚gulp-live-server’]:

// deklaracja gulp i używanych pluginów
    var gulp = require('gulp');
    var gls = require('gulp-live-server');
// lista zadań, każde gulp.task to inne zadanie
    gulp.task('serve', function() {
      var server = gls.static();  //lub gls.static('public', 3000); 
      server.start();
      gulp.watch(['des/**/*.css', 'des/**/*.html'], function (file) {
        server.notify.apply(server, [file]);
      });
    });
// ustawienie wywołania kolejnych pluginów, ich kolejność
    gulp.task('default', ['serve’]);

W gulp.watch wskazane zostały pliki oraz katalogi, użyte gwiazdki oznaczają:

** – zastępuje dowolny katalog (przeszukaj wszystkie katalogi),

*(gwiazdka) – zastępuje dowolny plik (np: *.scss – dowolny plik SASS),

*/ – bieżący katalog

Cały plik Gulpfile.js z kilkoma pluginami

var gulp = require("gulp"),
    uglify = require('gulp-uglify'), 
    browserSync = require('browser-sync').create();
 gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
 });
 gulp.task('compress', function () {
  return gulp.src('./all.js')
    .pipe(uglify())
    .pipe(gulp.dest('out/'))
    .on('error', function(err) {
      console.error('Error in compress task', err.toString());
    });
 });
 gulp.task('art', ['compress', 'browser-sync', 'watch']);

Gulp.js