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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

9. gulpfile Λ ES2015 Ͱॻ͘
   ࣍ʹɺ.babelrc ϑΝΠϧΛ࡞੒ͯ͠ presets Λઃఆ
   {
   "presets": ["es2015"]
   }
   .babelrc
   

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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', ...);
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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. ίʔϧόοΫΛड͚औΓɺ࠷ޙʹ࣮ߦ͢Δ
    

    View Slide

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

    View Slide

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

    View Slide

35. gulp.task() Λॻ͘ࡍͷ஫ҙ఺
    v3 Ͱ͸͜ΕΒͷ৚݅Λຬ͍ͨͯ͠ͳͯ͘΋ΤϥʔʹͳΔ͜ͱ͸ͳ͍͕ɺຊདྷ͸NGɻ

    v4 ͔Β͸ΤϥʔʹͳΔɻ

    ·ͨ run-sequence Λར༻͢Δ৔߹͸ɺ͜ΕΒͷ৚݅Λຬ͓ͨͯ͘͠ඞཁ͕͋Δɻ
    v4 ΁ͷҠߦ΋ݟਾ͑ͯɺࠓ͔Βਖ਼͘͠هड़͓͍ͯͨ͠΄͏͕ݡ໌ɻ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

63. @jmblog
    Thank you!
    

    View Slide