around the gulp — Андрей Яманов — moscowjs 13

18
tenphi.me

Upload: moscowjs

Post on 08-May-2015

406 views

Category:

Internet


0 download

DESCRIPTION

История перехода с Grunt на Gulp в крупном проекте. Краткий обзор плагинов, решение типовых (и не очень) задач с их помощью.

TRANSCRIPT

Page 1: Around the Gulp — Андрей Яманов — MoscowJS 13

tenphi.me

Page 2: Around the Gulp — Андрей Яманов — MoscowJS 13
Page 3: Around the Gulp — Андрей Яманов — MoscowJS 13
Page 4: Around the Gulp — Андрей Яманов — MoscowJS 13

безусловныйлидерсредиподобныхрешений(2013год)упрощаетразработкуиуправлениезадачамидобавляетпродвинутыйlivereloadпростойипонятныйподходогромноеколичествоплагиновилегконаписатьсвойвсёхорошодокументированолегкоинтегрируетсяссистемойзависимостейоднорешениедлямногихзадач

Page 5: Around the Gulp — Андрей Яманов — MoscowJS 13

600+строчеккода

Рослокол-возадач.Кодпревращалсявпомойку.Егостановилосьсложноподдерживать.Многоетормозило

Page 6: Around the Gulp — Андрей Яманов — MoscowJS 13

выполняетсясинхроннозапускаетзадачивотдельномпроцессе

каждаязадачавыполняетсявотдельномпроцессекаждаязадачапофактуперезапускаетgruntfile

Page 7: Around the Gulp — Андрей Яманов — MoscowJS 13
Page 8: Around the Gulp — Андрей Яманов — MoscowJS 13

Boilerplate(grunt»gulp)+express+angular

gulpfile~100строк3-4часанамиграцию

plugins:gulp-util,gulp-watch,gulp-connect,gulp-plumber,gulp-rename,gulp-size,gulp-rev,gulp-fingerprint,gulp-clean,gulp-usemin,gulp-minify-css,gulp-minify-html,gulp-uglify,gulp-imagemin,

gulp-html2js,gulp-ngmin

Page 9: Around the Gulp — Андрей Яманов — MoscowJS 13

кодсталнамногочищефункционалоднойзадачичетколокализованкол-вокодауменьшилосьwatchсталработатьболееотзывчивомногиеплагиныбылизамененынаобычныеnodejs-модуликрасивыйлог:)

(плюс)комплексныйсценарийзадачбылреализованспомощьюужесуществующихплагинов

Page 10: Around the Gulp — Андрей Яманов — MoscowJS 13

Асинхронностьневсегдахорошо(решение:run-sequence)Streams-намногосложнеепрямойработысфайламиОченьплоходокументировано(втомчислебольшинствоплагинов)Сложнеенаписатьсвойплагин

Page 11: Around the Gulp — Андрей Яманов — MoscowJS 13
Page 12: Around the Gulp — Андрей Яманов — MoscowJS 13

Доставкаконтента(+watch)Тестирование(+watch)Сборка

Page 13: Around the Gulp — Андрей Яманов — MoscowJS 13

реализуетсянапрямуючерезnodejs-модули:express,connectит.д.

хорошийпримерреализацииlivereloadчерез tiny-url:gist.github.com/aslansky/8741515

Page 14: Around the Gulp — Андрей Яманов — MoscowJS 13

gulp-karma?Вероятно,нет.

РазработчикиkarmaпредлагаютиспользоватьAPIнапрямуюипочитатьзамечательнуюстатью

Whyyoushouldn'tcreateagulpplugin

Page 15: Around the Gulp — Андрей Яманов — MoscowJS 13

многиепопулярныеплагинынеимеютполнойподдержкипотоков

большинствокомпиляторов:less,coffeeит.д.возможныпроблемысгенерациейsourceMaps

сборкаиверсионированиефайловкомплекснаязадача

Page 16: Around the Gulp — Андрей Яманов — MoscowJS 13

Простыесценарииописываютсятривиально

gulp.task('compile',function(){gulp.src(scriptFiles).pipe(concat({fileName:pkg.name+".js"}).pipe(minify()).pipe(gulp.dest('./dist/'));});

Page 17: Around the Gulp — Андрей Яманов — MoscowJS 13

(продвинутыйgulp-fingerprint)http://github.com/tenphi/gulp-revplace

ПолнаяподдержкапотоковПоискasset'овпоисходномукодуспомощьюregexp'аГенерацияновыхпутейдляasset'овизаменаихвисходномкодеВыгрузкавсехнайденныхasset'оввконечнуюдиректорию

встадииразработки,нотекущаяверсиядостаточнофункциональна

Page 18: Around the Gulp — Андрей Яманов — MoscowJS 13

полезныессылки:

github.com/gulpjs/blog.ponyfoo.com/2014/01/27/my-first-gulp-adventureslides.com/contra/gulpgithub.com/substack/stream-handbook

моиконтакты:@tenphi

[email protected]/tenphi