Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

gulp: The Good Parts

gulp: The Good Parts

Good practices for gulp

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

http://kfug.jp/frontconf2016/

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

Yoshihide Jimbo

March 05, 2016
Tweet

More Decks by Yoshihide Jimbo

Other Decks in Technology

Transcript

  1. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ

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

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

    • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
  4. gulpfile Λ ES2015 Ͱॻ͘ v3.9.0 ͔Β babel ͕αϙʔτ͞ΕΔΑ͏ʹɻ ·ͣɺbabel-core ͱ

    babel-preset-es2015 ΛΠϯετʔϧ $ npm install --save-dev babel-core babel-preset-es2015
  5. 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 Ͱ΋ॻ͚·͢ɻ
  6. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ

    • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
  7. λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ ֤λεΫϑΝΠϧΛ࡞੒͢Δ 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
  8. λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ 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
  9. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ

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

    • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
  13. 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 ͠ͳ͚Ε͹ͳΒͳ͘ͳͬ ͯ͘Δɻ
  14. gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ gulp-load-plugins Λ࢖͏ͱɺpackage.json ͷ dependencies ΍ devDependencies ʹઃఆ ͞Ε͍ͯΔ

    gulp ϓϥάΠϯʢσϑΥϧτͰ͸ gulp-* ͓Αͼ gulp.*ʣͷಡΈࠐΈ͕؆ૉԽ Ͱ͖Δɻ $ npm install --save-dev gulp-load-plugins
  15. 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')); });
  16. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ

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

    D Task E ྫʣ Task A ͷ͋ͱɺTask B, C, D ΛฒྻͰ࣮ߦɺ͢΂͕ͯऴΘͬͨΒ Task E Λ࣮ߦ͢Δ
  18. λεΫΛฒྻ / ௚ྻॲཧ͢Δ 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', ...);
  19. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ

    • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
  20. gulp.task() Λॻ͘ࡍͷ஫ҙ఺ var gulp = require('gulp'); var defaultTask = function(callback)

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

    gulp.src('src/**/*.scss') .pipe(sass()) .pipe(gulp.dest('dist'); } 2. Stream ΦϒδΣΫτΛ return ͢Δ
  22. 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) { ... }); }
  23. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ

    • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
  24. λεΫͷҰཡΛදࣔ͢Δ $ 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 ΦϓγϣϯΛ͚ͭΔͱɺλεΫͷҰཡΛදࣔ͢Δ͜ͱ͕Ͱ͖Δɻ
  25. λεΫͷҰཡΛදࣔ͢Δ 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 ϓϩύςΟΛઃఆ͢ΔͱɺλεΫҰ ཡʹઆ໌จΛදࣔ͢Δ͜ͱ͕Ͱ͖Δɻ
  26. λεΫͷҰཡΛදࣔ͢Δ ϔϧϓͱͯ͠࢖͏͜ͱ͕Ͱ͖ΔͷͰ͓͢͢Ίɻ $ 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.
  27. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ

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

    • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
  32. มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ 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)) });
  33. มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ 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)) });
  34. มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ ·ͨɺ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)) });
  35. มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ 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)) });
  36. มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ ͨͩ͠ɺ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')) });
  37. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ

    • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
  38. 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')); });
  39. 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')); });
  40. 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
  41. • gulp ͷΠϯετʔϧ • gulpfile Λ ES2015 Ͱॻ͘ • λεΫ͝ͱʹϑΝΠϧΛ෼ׂ͢Δ

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

    / gulp.parallel ͕௥Ճ • gulp.task ͷҾ਺͕มߋ • gulp-utils ͕ഇࢭ͞Εɺ֤Ϟδϡʔϧʹ෼ׂ େ෯ͳ࢓༷มߋ͕ೖ͍ͬͯΔͨΊɺv3 ͷ gulpfile ͸ͦͷ··Ͱ͸ಈ͔ͳ͍Մೳੑ͕ߴ͍ɻ
  43. gulp 4 ͷมߋ఺ function mytask() { ... } // gulp3.x

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