Post on 16-Apr-2017
O mnie
• Programista PHP
• Pasjonat JavaScriptu
• http://wiktortoporek.name/blog
konfiguracja ponad kodem
brak wbudowanych tasków
każdy task jest pluginem
kod ponad konfiguracją
filozofia streamów
trochę szybszy?
GulpGrunt
Hello World
var gulp = require('gulp');
gulp.task('hello', function () { console.log('Hello World!');});
gulp hello
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'));});
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'))});
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');});
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']);
Łączenie streamów
https://github.com/gulpjs/gulp/blob/master/docs/recipes/using-multiple-sources-in-one-task.md