プログラマのためのGulp入門

オープンセミナー2015@広島の懇親会という名のLT駆動開発11のLTスライドです。(実は2週目に突入しなかったのでLTしてない)

http://osh-web.github.io/2015/
https://github.com/LTDD/Sessions/wiki/LT%E9%A7%86%E5%8B%95%E9%96%8B%E7%99%BA11

Qiita版
http://qiita.com/eielh/items/0ed141c0bda3663872b7
解説
http://blog.eiel.info/blog/2015/02/16/ltdd-11-gulp/

Transcript

1. ϓϩάϥϚͷͨΊͷGulpೖ໳ 2015-02-14 LTۦಈ։ൃ
2. ϓϩάϥϚͷͨΊͷGulpೖ໳ 2015-02-14 LTۦಈ։ൃ ͕ͭ͘Γ͔ͨͬͨ
3. ੔ཧ͖͠Ε·ͤΜͰͨ͠
4. ͻΉΒ ͱ΋ͻ͜ nodejs Ϛδॳ৺ऀ(࠮ٗ͡Όͳ͍΍ͭ)
6. Gulpͱ͸
7. Gulpͱ͸ λεΫϥϯφʔ Webք۾Ͱྲྀߦͯ͠Δ
8. Webք۾Ͱ΋ λεΫϥϯφʔ͕ඞཁʹͳͬͨ
9. Sassͱ͔minifyͱ͔…
10. ϓϩάϥϚͳΒͦ΋ͦ΋࢖ͬͯΔ
11. make cmake rake
12. ͦΕͰ΋ Gulp • GulpfileΛॻ͍͍ͯ͋͛ͨ
13. ͦΕͰ΋ Gulp • GulpfileΛॻ͍͍ͯ͋͛ͨ • ϑΝΠϧͷߋ৽ݕ஌͕Ͱ͖Δ
14. ͦΕͰ΋ Gulp • GulpfileΛॻ͍͍ͯ͋͛ͨ • ϑΝΠϧͷߋ৽ݕ஌͕Ͱ͖Δ • nodejsΒ͠͞
15. ͦΕͰ΋ Gulp • GulpfileΛॻ͍͍ͯ͋͛ͨ • ϑΝΠϧͷߋ৽ݕ஌͕Ͱ͖Δ • nodejsΒ͠͞ • ετϦʔϜ
16. Gulpͷجຊ
17. var gulp = require('gulp'); // λεΫఆٛ gulp.task('hoge', function () { // λεΫͷ಺༰ gulp.src('src/*') .pipe(gulp.dest('dest')); }); // $ gulp hoge ͷ୅ΘΓ gulp.start(['hoge']);
18. gulp.src("src/*") .pipe(gulp.dest("dest"));
19. gulp.src(“src/*") | gulp.dest(“dest") shell෩ʹදݱ͢Δͱ
20. for file in src/* do cat < $file > dest/`basename $file` done ࣮ࡍʹ΍ͬͯΔ͜ͱ
21. for file in src/* do cat < $file > dest/`basename $file` done ࣮ࡍʹ΍ͬͯΔ͜ͱ ϑΝΠϧҰཡͷετϦʔϜΛͭ͘Δ
    ͻͱͭͻͱͭͷϑΝΠϧͷετϦʔϜΛͻΒ͍ͯ
    EFTUσΟϨΫτϦ΁ಉ໊͡લͰ
22. ϑΝΠϧͷҰཡ͕ετϦʔϜ ʹͳ͍ͬͯΔ͜ͱʹ஫ҙ
23. ϑΝΠϧͷҰཡ͕ετϦʔϜ ʹͳ͍ͬͯΔ͜ͱʹ஫ҙ ϑΝΠϧͷத਎͸
    όΠτετϦʔϜ
    ·ͨ͸
    όοϑΝ
    Ͱॲཧ
24. Gulpͷߏ੒
25. Gulp = Stream + Vinyl + Orchetsrator ϑΝΠϧΛந৅Խ
    ϑΝΠϧ؂ࢹ λεΫ࡞੒
    λεΫͷ࣮ߦ
26. Gulp API • gulp.task • gulp.src • gulp.dest • gulp.watch
27. gulp.task var Orchestrator = require('orchestrator'); function Gulp() { Orchestrator.call(this); } util.inherits(Gulp, Orchestrator); Gulp.prototype.task = Gulp.prototype.add;
28. gulp.task var Orchestrator = require('orchestrator'); function Gulp() { Orchestrator.call(this); } util.inherits(Gulp, Orchestrator); Gulp.prototype.task = Gulp.prototype.add; HVMQUBTL
    
    0SDIFTUSBUPSQSPUPUZQFBEE
29. var vfs = require('vinyl-fs'); Gulp.prototype.src = vfs.src; Gulp.prototype.dest = vfs.dest; Gulp.prototype.watch = function (glob, opt, fn) { // (தུ) return vfs.watch(glob, opt, fn); };
30. var vfs = require('vinyl-fs'); Gulp.prototype.src = vfs.src; Gulp.prototype.dest = vfs.dest; Gulp.prototype.watch = function (glob, opt, fn) { // (தུ) return vfs.watch(glob, opt, fn); }; HVMQTSD
    
    WJOZMGTTSD
    HVMQEFTU
    
    WJOZMGTETU
    HVMQXBUDI
    
    WJOZMGTXBUDI
31. Vinyl
32. Vinylͷओͳϝϯό • contents: ϑΝΠϧͷத਎ • όΠτετϦʔϜ ·ͨ͸ όοϑΝ • path: ϑΝΠϧ໊ • cwd: ΧϨϯυϫʔΩϯάσΟϨΫτϦ
33. Vinyl-adapter vinyl-fs vinyl-s3 vinyl-github vinyl-http
34. Vinyl-adapter vinyl-fs vinyl-s3 vinyl-github vinyl-http ͞·͟·ͳ΋ͷΛϑΝΠϧͷΑ͏ʹѻ͑Δ
35. gulp.src ReadableͳVinylετϦʔϜΛฦ͢
36. gulp.dest WritableͳVinylετϦʔϜΛฦ͢
37. GulpΛ࢖͍͜ͳ͢ʹ͸ StreamΛ࢖͍͜ͳͤ
38. ετϦʔϜΛ੍͢Δ΋ͷ͸ NodeJSΛ੍͢
39. ϑΝΠϧͷϦετͷΑ͏ͳ΋ͷ
40. ετϦʔϜ
41. ετϦʔϜ • Readable • Writable • Transform • Duplex
42. ετϦʔϜ • Readable • Writable • Transform • Duplex input
43. ετϦʔϜ • Readable • Writable • Transform • Duplex input output
44. ετϦʔϜ • Readable • Writable • Transform • Duplex input output த਎ΛมԽͤ͞ΔϑΟϧλ
45. TransformετϦʔϜ ͍ͭ͜Λͭ͘Ε͹͞·͟·ͳॲཧ͕Ͱ͖Δ
46. ͭ͘Γํ Stream.TransfomΛܧঝ Readable ͱ Writable ྆ํͷΠϯλʔϑΣʔεΛ࣮૷
47. ͭ͘Γํ Stream.TransfomΛܧঝ Readable ͱ Writable ྆ํͷΠϯλʔϑΣʔεΛ࣮૷ 
    ΊΜͲ͍͘͞
    
48. ؔ਺ܕͰߟ͑Δ
49. ؔ਺ܕͰߟ͑Δ aܕͷ஋Λ͏͚ͱͬͯaܕΛ஋ฦؔ͢਺Λ༻ҙ mapͰ্࣋ͪ͛Δ
50. event-stream.map var es = require('event-stream') transformer = function (n,callback) { // nΛ΄͛΄͛͢Δ callbalk(null,n); } es.map(transformer) // => TransformετϦʔϜ
51. ͦͷଞ through TransformετϦʔϜ͕؆୯ʹ࡞ΕΔ
52. ͦͷଞ through TransformετϦʔϜ͕؆୯ʹ࡞ΕΔ লུ
53. ͓͞Β͍
54. Gulp͸ ϑΝΠϧͷετϦʔϜ ϑΝΠϧ΋ετϦʔϜͰॲཧ͢Ε͹ όΠτετϦʔϜͷετϦʔϜ
55. Gulp͕ͷதvinyl͕ྲྀΕΔ WJOZM WJOZM WJOZM WJOZM WJOZM
56. Gulp͕ͷதvinyl͕ྲྀΕΔ WJOZM WJOZM WJOZM WJOZM
57. CZUF CZUF CZUF CZUF CZUF fileͷத͸byte͕ྲྀΕͯΔ͔΋ Vinyl.contents CZUFͷմ
58. CZUF CZUF CZUF CZUF fileͷத͸byte͕ྲྀΕͯΔ͔΋ Vinyl.contents CZUFͷմ
59. ࣮ફ
60. VinylετϦʔϜΛͭͬͯ͘ΈΔ var gulp = require('gulp'); var es = require('event-stream'); var Vinyl = require('vinyl'); var file = new Vinyl({ path: 'hoge.txt', contenst: new Buffer('hoge') }); es.readArray([file]) // Ϧετ͔ΒετϦʔϜ΁ .pipe(gulp.dest('src')); // create src/hoge.txt
61. VinylετϦʔϜΛͭͬͯ͘ΈΔ var gulp = require('gulp'); var es = require('event-stream'); var Vinyl = require('vinyl'); var file = new Vinyl({ path: 'hoge.txt', contenst: new Buffer('hoge') }); es.readArray([file]) // Ϧετ͔ΒετϦʔϜ΁ .pipe(gulp.dest('src')); // create src/hoge.txt 
    DBU
    TSDIPHFUYU
    IPHF
62. es.readArray([file])
63. es.readArray([file]) Ϧετ͔Βม׵Մೳ
64. cat src/hoge.txt | nl > dst/hoge.txt var gulp = require('gulp'); var run = require('gulp-run'); gulp.src('src/hoge.txt') .pipe(run("nl")) .pipe(gulp.dest('dest'));
65. cat src/hoge.txt | nl > dst/hoge.txt var gulp = require('gulp'); var run = require('gulp-run'); gulp.src('src/hoge.txt') .pipe(run("nl")) .pipe(gulp.dest('dest')); 
    DBU
    EFTUIPHFUYU
    
    
    
    IPHF
66. ઌ಄ʹ prefix Λ௥Ճ gulp.src('src/hoge.txt',{buffer: false}) .pipe(myplugin()) .pipe(gulp.dest('dest'));
67. mypluginͷத਎ var myplugin = function () { var line_process = function (line,callback) { if (line == "") { callback(); } else { callback(null,"prefix " + line + "\n"); } }; var plugin = function (file,callback) { file.contents = file.contents .pipe(es.split("\n")) .pipe(es.map(line_process)); callback(null,file); }; return es.map(plugin); };
68. mypluginͷத਎ var myplugin = function () { var line_process = function (line,callback) { if (line == "") { callback(); } else { callback(null,"prefix " + line + "\n"); } }; var plugin = function (file,callback) { file.contents = file.contents .pipe(es.split("\n")) .pipe(es.map(line_process)); callback(null,file); }; return es.map(plugin); }; ϑΝΠϧͷத਎Λ͍͡Δ৔߹͸ೋ౓ͷNBQ
69. ·ͱΊ
70. ·ͱΊ • Gulp = make + ϑΝΠϧ؂ࢹ • Gulp͸ VinylετϦʔϜΛܨ͍ͰॲཧΛ͢Δ • ϑΝΠϧͷத਎ͷετϦʔϜͰ͸ͳ͍ • Vinyl ͸ϑΝΠϧͷந৅Խͨ͠΋ͷ