gulp: The Good Parts - Speaker Deck

Slide 1

Slide 1 text

The Good Parts FRONTEND CONFERENCE 2016 | Mar 5, 2016

Slide 2

Slide 2 text

@jmblog Front-end engineer Working at Kaizen Platform Yoshihide Jimbo

Slide 3

Slide 3 text

• gulp ͷΠϯετʔϧ • gulpﬁle Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺ Agenda

Slide 4

Slide 4 text

Slide 5

Slide 5 text

gulp ͷΠϯετʔϧ ݹ͍ gulp ΛάϩʔόϧΠϯετʔϧ͍ͯ͠Δ৔߹͸࠷ॳʹΞϯΠϯετʔϧ͢Δ $ npm uninstall --global gulp gulp-cli ΛάϩʔόϧΠϯετʔϧ $ npm install --global gulp-cli

Slide 6

Slide 6 text

gulp ͷΠϯετʔϧ ࣍ʹɺϓϩδΣΫτͷ devDependencies ʹ gulp ΛϩʔΧϧΠϯετʔϧ $ npm install --save-dev gulp $ npm install --save-dev gulpjs/gulp#4.0 # gulp4

Slide 7

Slide 7 text

Slide 8

Slide 8 text

gulpﬁle Λ ES2015 Ͱॻ͘ v3.9.0 ͔Β babel ͕αϙʔτ͞ΕΔΑ͏ʹɻ ·ͣɺbabel-core ͱ babel-preset-es2015 ΛΠϯετʔϧ $ npm install --save-dev babel-core babel-preset-es2015

Slide 9

Slide 9 text

gulpﬁle Λ ES2015 Ͱॻ͘ ࣍ʹɺ.babelrc ϑΝΠϧΛ࡞੒ͯ͠ presets Λઃఆ { "presets": ["es2015"] } .babelrc

Slide 10

Slide 10 text

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 Ͱ΋ॻ͚·͢ɻ

Slide 11

Slide 11 text

Slide 12

Slide 12 text

λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ gulpﬁle ͸͙͢ʹංେԽͯ͠͠·͏͕ɺλεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Ε͹ϝϯςφϯεੑ Λอͪ΍͘͢ͳΔɻ your-project/ !"" tasks/ # !"" build.js # for `gulp build` # !"" clean.js # for `gulp clean` # $"" default.js # for `gulp` $"" gulpfile.js

Slide 13

Slide 13 text

λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ require-dir ΛΠϯετʔϧ $ npm install --save-dev require-dir

Slide 14

Slide 14 text

λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ gulpﬁle.js ͸࣍ͷΑ͏ʹهड़͢Δɻ var requireDir = require('require-dir'); requireDir('./tasks'); gulpfile.js

Slide 15

Slide 15 text

λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ ֤λεΫϑΝΠϧΛ࡞੒͢Δ 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

Slide 16

Slide 16 text

λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ 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

Slide 17

Slide 17 text

Slide 18

Slide 18 text

ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ λεΫϑΝΠϧΛ෼ׂͨ͠৔߹͸ಛʹɺσΟϨΫτϦͳͲڞ௨͢ΔઃఆΛ֎෦ϑΝΠϧʹ ੾Γग़ͨ͠΄͏͕ศརɻ·ͨɺ֤ϓϥάΠϯͷΦϓγϣϯΛ·ͱΊ͓ͯ͘ͷ΋Α͍ɻ your-project/ !"" gulp/ # !"" config.js # or config.json # $"" tasks/ # $"" *.js $"" gulpfile.js

Slide 19

Slide 19 text

ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ 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

Slide 20

Slide 20 text

ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ 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

Slide 21

Slide 21 text

Slide 22

Slide 22 text

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 ͠ͳ͚Ε͹ͳΒͳ͘ͳͬ ͯ͘Δɻ

Slide 23

Slide 23 text

gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ gulp-load-plugins Λ࢖͏ͱɺpackage.json ͷ dependencies ΍ devDependencies ʹઃఆ ͞Ε͍ͯΔ gulp ϓϥάΠϯʢσϑΥϧτͰ͸ gulp-* ͓Αͼ gulp.*ʣͷಡΈࠐΈ͕؆ૉԽ Ͱ͖Δɻ $ npm install --save-dev gulp-load-plugins

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

Slide 26

Slide 26 text

λεΫΛฒྻ / ௚ྻॲཧ͢Δ Task A Task B Task C Task D Task E ྫʣ Task A ͷ͋ͱɺTask B, C, D ΛฒྻͰ࣮ߦɺ͢΂͕ͯऴΘͬͨΒ Task E Λ࣮ߦ͢Δ

Slide 27

Slide 27 text

λεΫΛฒྻ / ௚ྻॲཧ͢Δ run-sequence ΛΠϯετʔϧ͢Δ $ npm install --save-dev run-sequence

Slide 28

Slide 28 text

λεΫΛฒྻ / ௚ྻॲཧ͢Δ 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', ...);

Slide 29

Slide 29 text

λεΫΛฒྻ / ௚ྻॲཧ͢Δ gulp v4 Ͱ͸ɺඪ४ APIʢgulp.series ͓Αͼ gulp.parallelʣ͕࢖͑ΔΑ͏ʹͳΔɻ gulp.task('default', gulp.series( task_A, gulp.parallel(task_B, task_C, task_D), task_E ));

Slide 30

Slide 30 text

Slide 31

Slide 31 text

gulp.task() Λॻ͘ࡍͷ஫ҙ఺ gulp.task() ʹ౉͢ function ͸ɺ࣍ͷ͏͍ͪͣΕ͔ͷ৚݅Λຬͨ͢ඞཁ͕͋Δɻ 1. ίʔϧόοΫΛड͚औΓɺ࠷ޙʹ࣮ߦ͢Δ 2. Stream ΦϒδΣΫτΛ return ͢Δ 3. Promise ΦϒδΣΫτΛ return ͢Δ gulp.task('default', function() {...});

Slide 32

Slide 32 text

gulp.task() Λॻ͘ࡍͷ஫ҙ఺ var gulp = require('gulp'); var defaultTask = function(callback) { console.log('I do nothing.'); callback(); // Call the callback } gulp.task('default', defaultTask); 1. ίʔϧόοΫΛड͚औΓɺ࠷ޙʹ࣮ߦ͢Δ

Slide 33

Slide 33 text

gulp.task() Λॻ͘ࡍͷ஫ҙ఺ gulp.task('styles', function() { // Return the stream return gulp.src('src/**/*.scss') .pipe(sass()) .pipe(gulp.dest('dist'); } 2. Stream ΦϒδΣΫτΛ return ͢Δ

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

gulp.task() Λॻ͘ࡍͷ஫ҙ఺ v3 Ͱ͸͜ΕΒͷ৚݅Λຬ͍ͨͯ͠ͳͯ͘΋ΤϥʔʹͳΔ͜ͱ͸ͳ͍͕ɺຊདྷ͸NGɻ  v4 ͔Β͸ΤϥʔʹͳΔɻ  ·ͨ run-sequence Λར༻͢Δ৔߹͸ɺ͜ΕΒͷ৚݅Λຬ͓ͨͯ͘͠ඞཁ͕͋Δɻ v4 ΁ͷҠߦ΋ݟਾ͑ͯɺࠓ͔Βਖ਼͘͠هड़͓͍ͯͨ͠΄͏͕ݡ໌ɻ

Slide 36

Slide 36 text

Slide 37

Slide 37 text

λεΫͷҰཡΛදࣔ͢Δ $ 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 ΦϓγϣϯΛ͚ͭΔͱɺλεΫͷҰཡΛදࣔ͢Δ͜ͱ͕Ͱ͖Δɻ

Slide 38

Slide 38 text

λεΫͷҰཡΛදࣔ͢Δ 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 ϓϩύςΟΛઃఆ͢ΔͱɺλεΫҰ ཡʹઆ໌จΛදࣔ͢Δ͜ͱ͕Ͱ͖Δɻ

Slide 39

Slide 39 text

λεΫͷҰཡΛදࣔ͢Δ ϔϧϓͱͯ͠࢖͏͜ͱ͕Ͱ͖ΔͷͰ͓͢͢Ίɻ $ 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.

Slide 40

Slide 40 text

Slide 41

Slide 41 text

ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ gulp v3.x ͷ gulp.watch() ͸ɺϑΝΠϧͷ௥Ճ΍࡟আʹ൓Ԡ͠ͳ͍ͱ͍͏ෆ۩߹͕͋Δͨ Ίɺ୅ΘΓʹgulp-watch ϓϥάΠϯΛར༻͢Δɻ $ npm install --save-dev gulp-watch

Slide 42

Slide 42 text

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ʣ͢Δ

Slide 43

Slide 43 text

Slide 44

Slide 44 text

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ʣ͢Δ

Slide 45

Slide 45 text

Slide 46

Slide 46 text

มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ ʢ؂ࢹத͚ͩͳ͘ʣgulp Λ࣮ߦ͢Δ͝ͱʹɺมߋ͕͋ͬͨϑΝΠϧͷΈΛର৅ʹ͍ͨ͠৔ ߹͸ɺ gulp-changed ϓϥάΠϯ͔ gulp-newer ϓϥάΠϯΛར༻͢Δɻ $ npm install --save-dev gulp-changed $ npm install --save-dev gulp-newer

Slide 47

Slide 47 text

มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ 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)) });

Slide 48

Slide 48 text

มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ 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)) });

Slide 49

Slide 49 text

มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ ·ͨɺ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)) });

Slide 50

Slide 50 text

มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ 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)) });

Slide 51

Slide 51 text

มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ ͨͩ͠ɺ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')) });

Slide 52

Slide 52 text

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Slide 58

Slide 58 text

gulp 4 ͷมߋ఺ ݱࡏɺ࣍όʔδϣϯͷ v4.0 ͕։ൃதɻ

Slide 59

Slide 59 text

gulp 4 ͷมߋ఺ • gulp.start / gulp.run ͕ഇࢭ • gulp.series / gulp.parallel ͕௥Ճ • gulp.task ͷҾ਺͕มߋ • gulp-utils ͕ഇࢭ͞Εɺ֤Ϟδϡʔϧʹ෼ׂ େ෯ͳ࢓༷มߋ͕ೖ͍ͬͯΔͨΊɺv3 ͷ gulpﬁle ͸ͦͷ··Ͱ͸ಈ͔ͳ͍Մೳੑ͕ߴ͍ɻ

Slide 60

Slide 60 text

gulp 4 ͷมߋ఺ function mytask() { ... } // gulp3.x gulp.task('mytask', mytask); // gulp4.x gulp.task(mytask); gulp.task ʹ function ͚ͩΛ౉͢ͱ function໊ = λεΫ໊ʹͳΔɻv3 Λ࢖͍ͬͯΔ৔ ߹΋ɺv4 ΁ͷҠߦΛݟਾ͑ͯɺແ໊ؔ਺Ͱ͸ͳؔ͘਺એݴΛ͓͍ͯͨ͠΄͏͕ಘࡦɻ

Slide 61

Slide 61 text

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