Wiktor Toporek - Gulp.js Prezentacja z meetupu Uszanowanko Programowanko #11 - http://www.meetup.com/Uszanowanko-Programowanko/events/228401563/ Istnieje wiele pomocnych narzędzi zasilanych technologią Node.js. Swego czasu najpopularniejszym oraz niezbędnym narzędziem dla każdego frontendowca był Grunt. Jak to jednak w świecie JavaScriptu bywa, szybko powstała konkurencja z odrobinę inną filozofią pracy - Gulp.js

1. Wiktor Toporek

2. O mnie
• Programista PHP
• Pasjonat JavaScriptu
• http://wiktortoporek.name/blog

5. VS

7. konfiguracja ponad
kodem
brak wbudowanych
tasków
każdy task jest
pluginem
kod ponad
konfiguracją
filozofia streamów
trochę szybszy?
GulpGrunt

8. Jak zacząć?
npm i -g gulp
npm init
npm i gulp --save-dev
touch gulpfile.js

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

10. stream
gulp.src()
gulp.dest()

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

12. 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'));
});

13. Minifikacja CSS
npm 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'));
});

14. Babel
var 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'));
});

15. Sourcemapy
var 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'));
});

16. Watch

17. Watch
var 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 () {
...
});

18. SSH
var 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
});

19. SSH
gulp.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'))
});

20. Uwaga na
asynchroniczność

21. Gdy nie mamy streamu
var gulp = require('gulp');
gulp.task('hello', function () {
setTimeout(function() {
console.log('Hello');
}, 2000);
});

22. Gdy nie mamy streamu
var gulp = require('gulp');
gulp.task('hello', function (doneCallback) {
setTimeout(function() {
console.log('Hello');
doneCallback(null);
}, 2000);
});

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

24. Tworzenie zależności

25. 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']);

26. Zależności działają
asynchronicznie

27. Sekwencja zadań
https://www.npmjs.com/package/gulp-sync

28. Łączenie streamów
https://github.com/gulpjs/gulp/blob/master/docs/recipes/
using-multiple-sources-in-one-task.md

29. Wtyczki gulpowe
często są uniwersalne
z gulpem łączy je tylko prefix "gulp-"

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