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

790f55ccde7a62df8f25747586657090?s=128

Yoshihide Jimbo

March 05, 2016
Tweet

Transcript

  1. 3.

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

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

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

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

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

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

    gulpfile Λ ES2015 Ͱॻ͘ v3.9.0 ͔Β babel ͕αϙʔτ͞ΕΔΑ͏ʹɻ ·ͣɺbabel-core ͱ

    babel-preset-es2015 ΛΠϯετʔϧ $ npm install --save-dev babel-core babel-preset-es2015
  6. 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 Ͱ΋ॻ͚·͢ɻ
  7. 11.

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

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

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

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

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

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

    gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ gulp-load-plugins Λ࢖͏ͱɺpackage.json ͷ dependencies ΍ devDependencies ʹઃఆ ͞Ε͍ͯΔ

    gulp ϓϥάΠϯʢσϑΥϧτͰ͸ gulp-* ͓Αͼ gulp.*ʣͷಡΈࠐΈ͕؆ૉԽ Ͱ͖Δɻ $ npm install --save-dev gulp-load-plugins
  16. 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')); });
  17. 25.

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

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

    λεΫΛฒྻ / ௚ྻॲཧ͢Δ Task A Task B Task C Task

    D Task E ྫʣ Task A ͷ͋ͱɺTask B, C, D ΛฒྻͰ࣮ߦɺ͢΂͕ͯऴΘͬͨΒ Task E Λ࣮ߦ͢Δ
  19. 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', ...);
  20. 30.

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

    • ઃఆΛ֎෦ϑΝΠϧͰ؅ཧ͢Δ • gulp ϓϥάΠϯΛࣗಈಡΈࠐΈ • λεΫΛฒྻ / ௚ྻॲཧ͢Δ • gulp.task() Λॻ͘ࡍͷ஫ҙ఺ • λεΫͷҰཡΛදࣔ͢Δ • ϑΝΠϧͷมߋΛ؂ࢹʢwatchʣ͢Δ • มߋ͕͋ͬͨϑΝΠϧ͚ͩΛॲཧ͢Δ • gulp.size ϓϥάΠϯͰ؆қσόοά • gulp 4 ͷมߋ఺
  21. 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. ίʔϧόοΫΛड͚औΓɺ࠷ޙʹ࣮ߦ͢Δ
  22. 33.

    gulp.task() Λॻ͘ࡍͷ஫ҙ఺ gulp.task('styles', function() { // Return the stream return

    gulp.src('src/**/*.scss') .pipe(sass()) .pipe(gulp.dest('dist'); } 2. Stream ΦϒδΣΫτΛ return ͢Δ
  23. 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) { ... }); }
  24. 36.

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

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

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

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

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

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

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

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

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

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

    gulp 4 ͷมߋ఺ • gulp.start / gulp.run ͕ഇࢭ • gulp.series

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

    gulp 4 ͷมߋ఺ function mytask() { ... } // gulp3.x

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