Wiktor Toporek

O mnie

• Programista PHP

• Pasjonat JavaScriptu

• http://wiktortoporek.name/blog

VS

konfiguracja ponad kodem

brak wbudowanych tasków

każdy task jest pluginem

kod ponad konfiguracją

filozofia streamów

trochę szybszy?

GulpGrunt

Jak zacząć?

npm i -g gulp

npm init

npm i gulp --save-dev

touch gulpfile.js

Hello World

var gulp = require('gulp');

gulp.task('hello', function () { console.log('Hello World!');});

gulp hello

stream

gulp.src()

gulp.dest()

copyvar gulp = require('gulp');

gulp.task('copy', function () { return gulp.src('node_modules/bootstrap/dist/css/*.min.css') .pipe(gulp.dest('./dist/css'));});

gulp copy

Kompilacja SASS

var gulp = require('gulp'), sass = require('gulp-sass');

npm i gulp-sass --save-dev

gulp sass

gulp.task('sass', function () { return gulp.src('./sass/**/*.scss') .pipe(sass()) .pipe(gulp.dest('./css'));});

Minifikacja CSSnpm i gulp-shorthand gulp-cssnano \ gulp-uncss --save-dev

var gulp = require('gulp'), shorthand = require('gulp-shorthand'), cssnano = require('gulp-cssnano'), uncss = require('gulp-uncss');

gulp minifycss

gulp.task('minifycss', function () { return gulp.src('./css/**/*.css') .pipe(shorthand()) .pipe(cssnano()) .pipe(uncss({ html: [ 'index.html', 'subpage/**/*.html', 'http://example.com' ] })) .pipe(gulp.dest('./dist/css'));});

Babelvar gulp = require('gulp'), babel = require('gulp-babel');

gulp.task('compile', function () { return gulp.src('src/**/*.js') .pipe(babel({ presets: ['es2015'] })) .pipe(gulp.dest('dist/js'));});

Sourcemapyvar gulp = require('gulp'), sourcemaps = require('gulp-sourcemaps'), babel = require('gulp-babel'), concat = require('gulp-concat');

gulp.task('compile', function () { return gulp.src('src/**/*.js') .pipe(sourcemaps.init()) .pipe(babel({ presets: ['es2015'] })) .pipe(concat('all.js')) .pipe(sourcemaps.write('.')) .pipe(gulp.dest('dist/js'));});

Watch

Watchvar gulp = require('gulp');

gulp.task('watch', function () { gulp.watch('js/**/*.js', ['compile']); gulp.watch('sass/**/*.scss', ['sass']);});

gulp.task('compile', function () { ...});

gulp.task('sass', function () { ...});

SSHvar gulp = require('gulp');var GulpSSH = require('gulp-ssh');

var config = { host: 'example.com', port: 22, username: 'www-data', privateKey: fs.readFileSync('/Users/wiktor/.ssh/id_rsa')};

var gulpSSH = new GulpSSH({ ignoreErrors: false, sshConfig: config});

SSHgulp.task('deploy', function () { return gulpSSH .shell([ 'cd /var/www/example.com/htdocs', 'git pull', 'npm install', 'npm test' ], {filePath: 'deploy.log'}) .pipe(gulp.dest('logs'))});

Uwaga na asynchroniczność

Gdy nie mamy streamuvar gulp = require('gulp');

gulp.task('hello', function () { setTimeout(function() { console.log('Hello'); }, 2000);});

Gdy nie mamy streamuvar gulp = require('gulp');

gulp.task('hello', function (doneCallback) { setTimeout(function() { console.log('Hello'); doneCallback(null); }, 2000);});

Tworzenie zależnościvar gulp = require('gulp');gulp.task('hello', function (doneCallback) { setTimeout(function() { console.log('Hello'); doneCallback(null); }, 2000);});gulp.task('helloworld', ['hello'], function() { console.log('World');});

Tworzenie zależności

Zależności działają asynchronicznie

var gulp = require('gulp');gulp.task('hello', function (doneCallback) { setTimeout(function() { console.log('Hello'); doneCallback(null); }, 2000);});gulp.task('world', function() { console.log('World');});gulp.task('helloworld', ['hello', 'world']);

Zależności działają asynchronicznie

Sekwencja zadań

https://www.npmjs.com/package/gulp-sync

Łączenie streamów

https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md

Wtyczki gulpowe często są uniwersalne

z gulpem łączy je tylko prefix "gulp-"

gulp.src('pytania') .pipe(wiktor());