gulp: The Good Parts

Good practices for gulp

関西フロントエンドUG主催「FRONTEND CONFERENCE 2016」での発表資料です。

http://kfug.jp/frontconf2016/

https://github.com/jmblog/gulp-the-good-parts

Transcript

1. The Good Parts FRONTEND CONFERENCE 2016 | Mar 5, 2016
2. @jmblog Front-end engineer Working at Kaizen Platform Yoshihide Jimbo
3. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺ Agenda
4. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
5. gulp ͷΠϯετʔϧ ݹ͍ gulp ΛάϩʔόϧΠϯετʔϧ͍ͯ͠Δ৔߹͸࠷ॳʹΞϯΠϯετʔϧ͢Δ $ npm uninstall --global gulp gulp-cli ΛάϩʔόϧΠϯετʔϧ $ npm install --global gulp-cli
6. gulp ͷΠϯετʔϧ ࣍ʹɺϓϩδΣΫτͷ devDependencies ʹ gulp ΛϩʔΧϧΠϯετʔϧ $ npm install --save-dev gulp $ npm install --save-dev gulpjs/gulp#4.0 # gulp4
7. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
8. gulpfile Λ ES2015 Ͱॻ͘ v3.9.0 ͔Β babel ͕αϙʔτ͞ΕΔΑ͏ʹɻ ·ͣɺbabel-core ͱ babel-preset-es2015 ΛΠϯετʔϧ $ npm install --save-dev babel-core babel-preset-es2015
9. gulpfile Λ ES2015 Ͱॻ͘ ࣍ʹɺ.babelrc ϑΝΠϧΛ࡞੒ͯ͠ presets Λઃఆ { "presets": ["es2015"] } .babelrc
10. gulpfile Λ ES2015 Ͱॻ͘ ͋ͱ͸ϑΝΠϧ໊Λ gulpfile.babel.js ʹ͢Ε͹ɺࣗಈతʹ babel ͰίϯύΠϧͯ͘͠ΕΔ Α͏ʹͳΔɻ import gulp from 'gulp'; const defaultTask = (done) => { console.log('Hello, gulp with ES2015'); done(); } gulp.task('default', defaultTask); gulpfile.babel.js ͪͳΈʹ typescript-require ΛΠϯετʔϧͯ͠ gulpfile.ts ͱ͍͏ϑΝΠϧ໊ʹ͢ΔͱɺTypeScript Ͱ΋ॻ͚·͢ɻ
11. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
12. λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ gulpfile ͸͙͢ʹංେԽͯ͠͠·͏͕ɺλεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Ε͹ϝϯςφϯεੑ Λอͪ΍͘͢ͳΔɻ your-project/ !"" tasks/ # !"" build.js # for `gulp build` # !"" clean.js # for `gulp clean` # $"" default.js # for `gulp` $"" gulpfile.js
13. λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ require-dir ΛΠϯετʔϧ $ npm install --save-dev require-dir
14. λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ gulpfile.js ͸࣍ͷΑ͏ʹهड़͢Δɻ var requireDir = require('require-dir'); requireDir('./tasks'); gulpfile.js
15. λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ ֤λεΫϑΝΠϧΛ࡞੒͢Δ var gulp = require('gulp'); gulp.task('default', ['build']); tasks/default.js var gulp = require('gulp'); var build = function(done) { // Do stuff done(); } gulp.task('build', build); tasks/build.js
16. λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ gulp v4 Ͱ͸ require-dir Ͱ͸ͳ͘ gulp-hub Λ࢖͑͹Ͱ͖ΔΑ͏ʹͳΔ༧ఆɻ ʢ࣮ࡍʹ΍ͬͯΈ͕ͨɺ·ͩ͏·͍͔͘ͳ͍ಈ͔ͳ͍ͱ͜Ζ͕͋ͬͨɻʣ var gulp = require('gulp'); var HubRegistry = require('gulp-hub'); /* load some files into the registry */ var hub = new HubRegistry(['tasks/*.js']); /* tell gulp to use the tasks just loaded */ gulp.registry(hub); gulpfile.js
17. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
18. ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ λεΫϑΝΠϧΛ෼ׂͨ͠৔߹͸ಛʹɺσΟϨΫτϦͳͲڞ௨͢ΔઃఆΛ֎෦ϑΝΠϧʹ ੾Γग़ͨ͠΄͏͕ศརɻ·ͨɺ֤ϓϥάΠϯͷΦϓγϣϯΛ·ͱΊ͓ͯ͘ͷ΋Α͍ɻ your-project/ !"" gulp/ # !"" config.js # or config.json # $"" tasks/ # $"" *.js $"" gulpfile.js
19. ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ var path = require("path"); var root = path.resolve(__dirname + '/..'); module.exports = { root: root, src: root + '/src', dest: root + '/dist', sassOptions: { includePaths: [ "node_modules/" ], outputStyle: "compressed" } } gulp/config.js
20. ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ var gulp = require('gulp'); var sass = require('gulp-sass'); var config = require('../config'); var styles = function() { return gulp.src(config.src + '/**/!(_)*.{scss,sass}') .pipe(sass(config.sassOptions)) .pipe(gulp.dest(config.dest)); } gulp.task('styles', ['clean'], styles); gulp/tasks/styles.js
21. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
22. gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ var gulp = require('gulp'); var sass = require('gulp-sass'); var sassGlob = require('gulp-sass-glob'); var postcss = require('gulp-postcss'); var rename = require('gulp-rename'); var plumber = require('gulp-plumber'); var notify = require('gulp-notify'); var size = require('gulp-size'); gulp.task('sass', function() { ... }); gulp ϓϥάΠϯ͕૿͑ͯ͘ΔͱɺϑΝΠϧͷઌ಄Ͱେྔʹ require ͠ͳ͚Ε͹ͳΒͳ͘ͳͬ ͯ͘Δɻ
23. gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ gulp-load-plugins Λ࢖͏ͱɺpackage.json ͷ dependencies ΍ devDependencies ʹઃఆ ͞Ε͍ͯΔ gulp ϓϥάΠϯʢσϑΥϧτͰ͸ gulp-* ͓Αͼ gulp.*ʣͷಡΈࠐΈ͕؆ૉԽ Ͱ͖Δɻ $ npm install --save-dev gulp-load-plugins
24. gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ var gulp = require('gulp'); var autoprefixer = require('autoprefixer'); var $ = require('gulp-load-plugins')(); gulp.task('sass', function() { return gulp.src('src/**/!(_)*.{scss,sass}') .pipe($.sassGlob()) // require('gulp-sass-glob')() .pipe($.sass()) // require('gulp-sass')() .pipe($.postcss([ // require('gulp-postcss')() autoprefixier() ])); .pipe(gulp.dest('dist')); });
25. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
26. λεΫΛฒྻ / ௚ྻॲཧ͢Δ Task A Task B Task C Task D Task E ྫʣ Task A ͷ͋ͱɺTask B, C, D ΛฒྻͰ࣮ߦɺ͢΂͕ͯऴΘͬͨΒ Task E Λ࣮ߦ͢Δ
27. λεΫΛฒྻ / ௚ྻॲཧ͢Δ run-sequence ΛΠϯετʔϧ͢Δ $ npm install --save-dev run-sequence
28. λεΫΛฒྻ / ௚ྻॲཧ͢Δ var gulp = require('gulp'); var runSequence = require('run-sequence'); gulp.task('default', function(done) { runSequence( 'task_A', // Run A first ['task_B', 'task_C', 'task_D'], // B, C and D in parallel 'task_E', // then E done // Don't forget call callback ); }); gulp.task('task_A', ...); gulp.task('task_B', ...);
29. λεΫΛฒྻ / ௚ྻॲཧ͢Δ gulp v4 Ͱ͸ɺඪ४ APIʢgulp.series ͓Αͼ gulp.parallelʣ͕࢖͑ΔΑ͏ʹͳΔɻ gulp.task('default', gulp.series( task_A, gulp.parallel(task_B, task_C, task_D), task_E ));
30. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
31. gulp.task() Λॻ͘ࡍͷ஫ҙ఺ gulp.task() ʹ౉͢ function ͸ɺ࣍ͷ͏͍ͪͣΕ͔ͷ৚݅Λຬͨ͢ඞཁ͕͋Δɻ 1. ίʔϧόοΫΛड͚औΓɺ࠷ޙʹ࣮ߦ͢Δ 2. Stream ΦϒδΣΫτΛ return ͢Δ 3. Promise ΦϒδΣΫτΛ return ͢Δ gulp.task('default', function() {...});
32. gulp.task() Λॻ͘ࡍͷ஫ҙ఺ var gulp = require('gulp'); var defaultTask = function(callback) { console.log('I do nothing.'); callback(); // Call the callback } gulp.task('default', defaultTask); 1. ίʔϧόοΫΛड͚औΓɺ࠷ޙʹ࣮ߦ͢Δ
33. gulp.task() Λॻ͘ࡍͷ஫ҙ఺ gulp.task('styles', function() { // Return the stream return gulp.src('src/**/*.scss') .pipe(sass()) .pipe(gulp.dest('dist'); } 2. Stream ΦϒδΣΫτΛ return ͢Δ
34. gulp.task() Λॻ͘ࡍͷ஫ҙ఺ gulp.task('clean', function() { // Return the Promise from del() return del(['build']); } 3. Promise ΦϒδΣΫτΛ return ͢Δ gulp.task('someTask', function() { // Return the new Promise Object return new Promise(function(resolve, reject) { ... }); }
35. gulp.task() Λॻ͘ࡍͷ஫ҙ఺ v3 Ͱ͸͜ΕΒͷ৚݅Λຬ͍ͨͯ͠ͳͯ͘΋ΤϥʔʹͳΔ͜ͱ͸ͳ͍͕ɺຊདྷ͸NGɻ
 v4 ͔Β͸ΤϥʔʹͳΔɻ
 ·ͨ run-sequence Λར༻͢Δ৔߹͸ɺ͜ΕΒͷ৚݅Λຬ͓ͨͯ͘͠ඞཁ͕͋Δɻ v4 ΁ͷҠߦ΋ݟਾ͑ͯɺࠓ͔Βਖ਼͘͠هड़͓͍ͯͨ͠΄͏͕ݡ໌ɻ
36. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
37. λεΫͷҰཡΛදࣔ͢Δ $ gulp --tasks [21:23:03] Tasks for ~/gulp-3.9/print-list-of-tasks/gulpfile.js [21:23:03] !"% build [21:23:03] # !"" styles [21:23:03] # $"" scripts [21:23:03] !"" clean [21:23:03] !"" default [21:23:03] !"" scripts [21:23:03] $"" styles gulp ίϚϯυʹ --tasks ΦϓγϣϯΛ͚ͭΔͱɺλεΫͷҰཡΛදࣔ͢Δ͜ͱ͕Ͱ͖Δɻ
38. λεΫͷҰཡΛදࣔ͢Δ function build() { ... } build.description = 'Build in production mode.'; function clean() { ... } clean.description = 'Cleans up generated files.'; gulp.task('build', build); gulp.task('clean', clean); ͞Βʹɺgulp.tasks() ʹ౉͢ Function ʹ description ϓϩύςΟΛઃఆ͢ΔͱɺλεΫҰ ཡʹઆ໌จΛදࣔ͢Δ͜ͱ͕Ͱ͖Δɻ
39. λεΫͷҰཡΛදࣔ͢Δ ϔϧϓͱͯ͠࢖͏͜ͱ͕Ͱ͖ΔͷͰ͓͢͢Ίɻ $ gulp --tasks [21:23:03] Tasks for ~/gulp-3.9/print-list-of-tasks/gulpfile.js [21:23:03] !"% build Builds in production mode. [21:23:03] # !"" styles [21:23:03] # $"" scripts [21:23:03] !"" clean Cleans up generated files. [21:23:03] !"" default [21:23:03] !"" scripts Generates JS files. [21:23:03] $"" styles Generates CSS files.
40. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
41. ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ gulp v3.x ͷ gulp.watch() ͸ɺϑΝΠϧͷ௥Ճ΍࡟আʹ൓Ԡ͠ͳ͍ͱ͍͏ෆ۩߹͕͋Δͨ Ίɺ୅ΘΓʹgulp-watch ϓϥάΠϯΛར༻͢Δɻ $ npm install --save-dev gulp-watch
42. var gulp = require('gulp'); var sass = require('gulp-sass'); var watch = require('gulp-watch'); var paths = { styles: 'sass/*.scss' }; gulp.task('watch', function() { return gulp.src(paths.styles) .pipe(watch(paths.styles)) .pipe(sass()) .pipe(gulp.dest('dist')); }); ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ
43. var gulp = require('gulp'); var sass = require('gulp-sass'); var paths = { styles: 'sass/*.scss' }; gulp.task(styles); gulp.task(watch); function styles() { return gulp.src(paths.styles) .pipe(sass()) .pipe(gulp.dest('dist'); } function watch() { gulp.watch(paths.styles, styles); } gulp v4 Ͱ͸ gulp.watch() ͷෆ۩߹͸ղফ͞Ε͍ͯΔͷͰ gulp-watch ϓϥάΠϯ͸ෆཁɻ ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ
44. function images() { return gulp.src(paths.images, {since: gulp.lastRun(images)}) .pipe(imagemin({optimizationLevel: 5})) .pipe(gulp.dest('build/img')); } function watch() { gulp.watch(paths.images, images); } v4 Ͱ͸͞Βʹɺ৽͘͠௥Ճ͞Εͨ gulp.src() ͷ since Φϓγϣϯͱ gulp.lastRun() Λ૊Έ ߹ΘͤΔ͜ͱͰɺ؂ࢹதʹมߋ͕͋ͬͨϑΝΠϧͷΈΛॲཧର৅ʹ͢Δ͜ͱ΋Ͱ͖Δɻ ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ
45. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
46. มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ ʢ؂ࢹத͚ͩͳ͘ʣgulp Λ࣮ߦ͢Δ͝ͱʹɺมߋ͕͋ͬͨϑΝΠϧͷΈΛର৅ʹ͍ͨ͠৔ ߹͸ɺ gulp-changed ϓϥάΠϯ͔ gulp-newer ϓϥάΠϯΛར༻͢Δɻ $ npm install --save-dev gulp-changed $ npm install --save-dev gulp-newer
47. มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ gulp-changed ͸ stream ͰྲྀΕ͖ͯͨϑΝΠϧͱɺग़ྗઌͷϑΝΠϧͷλΠϜελϯϓΛ ൺֱͯ͠ɺมߋ͞Εͨ΋ͷ͚ͩΛ௨͢ɻ var gulp = require('gulp'); var size = require('gulp-size'); var changed = require('gulp-changed'); gulp.task('default', function() { var dest = 'app'; return gulp.src('src/*.js') .pipe(changed(dest)) // Pass only files that changed since the last time it was run .pipe(size({showFiles: true})) .pipe(gulp.dest(dest)) });
48. มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ extension ΦϓγϣϯΛ࢖͏ͱɺjade Λ html ʹม׵͢ΔͳͲɺҟͳΔ֦ுࢠʹͳΔ৔߹ʹ ΋ରԠͰ͖Δɻ var gulp = require('gulp'); var jade = require('gulp-jade'); var changed = require('gulp-changed'); gulp.task('jade', function () { var dest = 'app'; return gulp.src('src/**/*.jade') .pipe(changed(DEST, {extension: '.html'})) .pipe(jade()) .pipe(gulp.dest(dest)) });
49. มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ ·ͨɺhasChanged ΦϓγϣϯΛ࢖͏ͱɺλΠϜελϯϓͰ͸ͳ͘ SHA-1 μΠδΣετ ʢνΣοΫαϜʣͰൺֱ͢Δ͜ͱ΋Մೳɻ var gulp = require('gulp'); var jade = require('gulp-jade'); var changed = require('gulp-changed'); gulp.task('jade', function () { var dest = 'app'; return gulp.src('src/**/*.jade') .pipe(changed(dest, {hasChanged: changed.compareSha1Digest})) .pipe(jade()) .pipe(gulp.dest(dest)) });
50. มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ gulp-newer ΋ gulp-changed ͱಉ༷͕ͩɺλΠϜελϯϓͰͷൺֱʹͷΈରԠɻ var gulp = require('gulp'); var size = require('gulp-size'); var newer = require('gulp-newer'); gulp.task('default', function() { var dest = 'app'; return gulp.src('src/*.js') .pipe(newer(dest)) // Pass only files that changed since the last time it was run .pipe(size({showFiles: true})) .pipe(gulp.dest(dest)) });
51. มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ ͨͩ͠ɺgulp-newer ͷ΄͏͸ɺෳ਺ͷ source ϑΝΠϧΛ 1ϑΝΠϧʹ݁߹͢ΔΑ͏ͳॲ ཧʢsource:dest = n:1ʣʹ΋ରԠ͍ͯ͠Δɻ var gulp = require('gulp'); var concat = require('gulp-concat'); var newer = require('gulp-newer'); gulp.task('concat', function () { return gulp.src('src/*.js') // Pass all files if any one of them is newer than the destination file .pipe(newer('dist/all.js')) .pipe(concat('all.js')) .pipe(gulp.dest('dist')) });
52. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
53. gulp.size ϓϥάΠϯΛ࢖͏ͱɺॲཧΛͨ͠ϑΝΠϧͷ૯αΠζΛදࣔͰ͖Δɻ gulp.size ϓϥάΠϯͰ؆қσόοά $ npm install --save-dev gulp-size var gulp = require('gulp'); var size = require('gulp-size'); gulp.task('default', function() { return gulp.src('src/**/*.txt') .pipe(size()); // Show total size of files .pipe(gulp.dest('dist')); });
54. gulp.size ϓϥάΠϯͰ؆қσόοά $ gulp [21:43:51] Using gulpfile ~/simple-debug-with-gulp-size/gulpfile.js [21:43:51] Starting 'default'... [21:43:51] all files 13 B [21:43:51] Finished 'default' after 42 ms
55. showFiles ΦϓγϣϯΛ͚ͭΔͱݸผͷϑΝΠϧ໊ΛදࣔͰ͖ΔͷͰɺ֤εςοϓͰ Stream ΛྲྀΕΔϑΝΠϧ͕Կ͔Λ֬ೝ͢Δͷʹ࢖͑Δɻ gulp.size ϓϥάΠϯͰ؆қσόοά var gulp = require('gulp'); var size = require('gulp-size'); gulp.task('default', function() { return gulp.src('src/**/*.txt') .pipe(size({showFiles: true})) // Show all files from gulp.src .pipe(gulp.dest('dist')); });
56. gulp.size ϓϥάΠϯͰ؆қσόοά $ gulp [21:43:51] Using gulpfile ~/simple-debug-with-gulp-size/gulpfile.js [21:43:51] Starting 'default'... [21:43:51] aaa.txt 5 B [21:43:51] bbb.txt 4 B [21:43:51] ccc.txt 4 B [21:43:51] all files 13 B [21:43:51] Finished 'default' after 42 ms
57. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
58. gulp 4 ͷมߋ఺ ݱࡏɺ࣍όʔδϣϯͷ v4.0 ͕։ൃதɻ
59. gulp 4 ͷมߋ఺ • gulp.start / gulp.run ͕ഇࢭ • gulp.series / gulp.parallel ͕௥Ճ • gulp.task ͷҾ਺͕มߋ • gulp-utils ͕ഇࢭ͞Εɺ֤Ϟδϡʔϧʹ෼ׂ େ෯ͳ࢓༷มߋ͕ೖ͍ͬͯΔͨΊɺv3 ͷ gulpfile ͸ͦͷ··Ͱ͸ಈ͔ͳ͍Մೳੑ͕ߴ͍ɻ
60. gulp 4 ͷมߋ఺ function mytask() { ... } // gulp3.x gulp.task('mytask', mytask); // gulp4.x gulp.task(mytask); gulp.task ʹ function ͚ͩΛ౉͢ͱ function໊ = λεΫ໊ʹͳΔɻv3 Λ࢖͍ͬͯΔ৔ ߹΋ɺv4 ΁ͷҠߦΛݟਾ͑ͯɺແ໊ؔ਺Ͱ͸ͳؔ͘਺એݴΛ͓͍ͯͨ͠΄͏͕ಘࡦɻ
61. gulp 4 ͷมߋ఺ ৄ͘͠͸ɺ͜ͷ͋ͨΓΛࢀরɻ • https://github.com/gulpjs/gulp/tree/4.0 • https://github.com/gulpjs/gulp/blob/4.0/docs/API.md • https://github.com/gulpjs/gulp/issues/861
62. https://github.com/jmblog/gulp-the-good-parts
63. @jmblog Thank you!