Gulp.js

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

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij