FOWA: Development with GulpJS

Transcript

1. 1.

   None
2. 2.

   @Jack_Franklin ! javascriptplayground.com

3. 3.

   None
4. 4.

   We do a lot of things over and over again

   in a day to day workflow
5. 5.

   Build Tools

6. 6.

   None
7. 7.

   None
8. 8.

   “The Streaming Build System”

9. 9.

   Transform 1 Transform 2 Transform 3 Disk The inefficient way

   files files files
10. 10.

    Transform 1 Transform 2 Transform 3 Disk Streams app.js files

    files
11. 11.

    Streams in Node are one of the rare occasions when

    doing something the fast way is actually easier. SO USE THEM. Not since bash has streaming been introduced into a high level language as nicely as it is in node." ! -@dominictarr https://gist.github.com/dominictarr/2401787
12. 12.

    https://github.com/substack/ stream-handbook

13. 13.

    request(‘url’, function(err,doc) { fs.writeFile(dest,doc,function(err) { // done }) }) No

    Streams
14. 14.

    request(‘url') .pipe(fs.createWriteStream(‘out’)) .on(‘end’, function() { //done }) Streams

15. 15.

    None
16. 16.

    npm install —-global gulp

17. 17.

    npm init

18. 18.

    npm install --save-dev gulp

19. 19.

    var gulp = require(‘gulp’); ! gulp.task(‘default’, function() { console.log(‘hello’);
 });

    Gulpfile.js
20. 20.

    var gulp = require(‘gulp’); ! gulp.task(‘default’, function() { console.log(‘hello’);
 });

    Gulpfile.js
21. 21.

    var gulp = require(‘gulp’); ! gulp.task(‘default’, function() { console.log(‘hello’);
 });

    Gulpfile.js
22. 22.

    > gulp [20:51:27] Using gulpfile ~/ Desktop/fowa-example/gulpfile.js [20:51:27] Starting 'default'...

    hello [20:51:27] Finished 'default' after 62 μs
23. 23.

    > gulp [20:51:27] Using gulpfile ~/ Desktop/fowa-example/gulpfile.js [20:51:27] Starting 'default'...

    hello [20:51:27] Finished 'default' after 62 μs
24. 24.

    Congrats, you know Gulp now!

25. 25.

    Code > Configuration

26. 26.

    var gulp = require(‘gulp’); ! gulp.task(‘foo’, function() { console.log(‘foo task’);


    }); Gulpfile.js
27. 27.

    > gulp foo [20:54:27] Using gulpfile ~/ Desktop/fowa-example/gulpfile.js [20:54:27] Starting

    'foo'... foo task [20:54:27] Finished 'foo' after 62 μs
28. 28.

    gulp.src

29. 29.

    Gulp plugins expect streams

30. 30.

    gulp.src(‘app/main/*.js’); gulp.src(‘app/**/*.js’); gulp.src(‘just/one/file.js’); gulp.src([‘**/*.js’, ‘*.hbs’])

31. 31.

    Minification

32. 32.

    var gulp = require(‘gulp’); var uglify = require(‘gulp-uglify’); ! gulp.task(‘minify’,

    function() { gulp.src(‘app.js’) .pipe(uglify()) .pipe(gulp.dest(‘out’)); }); Gulpfile.js
33. 33.

    var gulp = require(‘gulp’); var uglify = require(‘gulp-uglify’); ! gulp.task(‘minify’,

    function() { gulp.src(‘app.js’) .pipe(uglify()) .pipe(gulp.dest(‘out’)); }); Gulpfile.js
34. 34.

    var gulp = require(‘gulp’); var uglify = require(‘gulp-uglify’); ! gulp.task(‘minify’,

    function() { gulp.src(‘app.js’) .pipe(uglify()) .pipe(gulp.dest(‘out’)); }); Gulpfile.js
35. 35.

    var gulp = require(‘gulp’); var uglify = require(‘gulp-uglify’); ! gulp.task(‘minify’,

    function() { gulp.src(‘app.js’) .pipe(uglify()) .pipe(gulp.dest(‘out’)); }); Gulpfile.js
36. 36.

    var gulp = require(‘gulp’); var uglify = require(‘gulp-uglify’); ! gulp.task(‘minify’,

    function() { gulp.src(‘app.js’) .pipe(uglify()) .pipe(gulp.dest(‘out’)); }); Gulpfile.js
37. 37.

    app.js out/ app.js uglify Disk gulp.src gulp.dest

38. 38.

    gulp.dest

39. 39.

    gulp.src(‘…’) .pipe(somePlugin()) .pipe(gulp.dest(‘some/folder’));

40. 40.

    Congrats, you actually know Gulp now!

41. 41.

    Concatenation and Minification

42. 42.

    var gulp = require(‘gulp’); var concat = require(‘gulp-concat’); var uglify

    = require(‘gulp-uglify’); ! gulp.task(‘min’, function() { gulp.src(‘…’) .pipe(concat(‘app.js’)) .pipe(uglify()) .pipe(gulp.dest(‘’))
 });
43. 43.

    var gulp = require(‘gulp’); var concat = require(‘gulp-concat’); var uglify

    = require(‘gulp-uglify’); ! gulp.task(‘min’, function() { gulp.src(‘…’) .pipe(concat(‘app.js’)) .pipe(uglify()) .pipe(gulp.dest(‘’))
 });
44. 44.

    var gulp = require(‘gulp’); var concat = require(‘gulp-concat’); var uglify

    = require(‘gulp-uglify’); ! gulp.task(‘min’, function() { gulp.src(‘…’) .pipe(concat(‘app.js’)) .pipe(uglify()) .pipe(gulp.dest(‘’))
 });
45. 45.

    var gulp = require(‘gulp’); var concat = require(‘gulp-concat’); var uglify

    = require(‘gulp-uglify’); ! gulp.task(‘min’, function() { gulp.src(‘…’) .pipe(concat(‘app.js’)) .pipe(uglify()) .pipe(gulp.dest(‘’))
 });
46. 46.

    var gulp = require(‘gulp’); var concat = require(‘gulp-concat’); var uglify

    = require(‘gulp-uglify’); ! gulp.task(‘min’, function() { gulp.src(‘…’) .pipe(concat(‘app.js’)) .pipe(uglify()) .pipe(gulp.dest(‘’))
 });
47. 47.

    *.js app.js uglify Disk concat app.js *.js

48. 48.

    Watching

49. 49.

    ... ! gulp.task(‘min’, function() {…}); ! gulp.task(‘watch’, function() { gulp.watch(‘**/*.js’,

    [‘min’]);
 });
50. 50.

    Task Dependencies

51. 51.

    “By default, tasks run with maximum concurrency -- e.g. it

    launches all the tasks at once and waits for nothing” https://github.com/gulpjs/gulp/blob/master/docs/recipes/running-tasks-in-series.md
52. 52.

    Concurrent by default

53. 53.

    You should not fight this…

54. 54.

    make the task able to tell other tasks when it

    finishes
55. 55.

    gulp.task(‘one’, function(cb) { // do stuff cb(null);
 }); ! gulp.task(‘two’,

    function() { return gulp.src(‘…’).pipe(…)
 });
56. 56.

    gulp.task(‘one’, function(cb) { // do stuff cb(null);
 }); ! gulp.task(‘two’,

    function() { return gulp.src(‘…’).pipe(…)
 });
57. 57.

    gulp.task(‘one’, function(cb) { // do stuff cb(null);
 }); ! gulp.task(‘two’,

    function() { return gulp.src(‘…’).pipe(…);
 });
58. 58.

    tell a task that it depends on another

59. 59.

    gulp.task(‘one’, function(cb) {…}); ! gulp.task(‘two’, function() { return gulp.src(‘…’).pipe(…)
 });

    ! gulp.task(‘three’, [‘two’], function() { // task two is done now
 });
60. 60.

    gulp.task(‘one’, function(cb) {…}); ! gulp.task(‘two’, function() { return gulp.src(‘…’).pipe(…)
 });

    ! gulp.task(‘three’, [‘one’, ’two’], function() { // task two is done now
 });
61. 61.

    Running Tasks

62. 62.

    gulp.task(‘js’, function() { return gulp.src(‘app/*.js’) .pipe(concat(‘concat.js’)) .pipe(gulp.dest(‘dist’)) .pipe(rename(‘app.min.js’)) .pipe(uglify()) .pipe(gulp.dest(‘dist’))


    });
63. 63.

    gulp.task(‘js’, function() { return gulp.src(‘app/*.js’) .pipe(concat(‘concat.js’)) .pipe(gulp.dest(‘dist’)) .pipe(rename(‘app.min.js’)) .pipe(uglify()) .pipe(gulp.dest(‘dist’))


    });
64. 64.

    var minify = function(files) { return gulp.src(files) .pipe(concat(‘combined.js’)) .pipe(uglify());
 };

    ! gulp.task(‘js’, function() { minify(‘*.js’) .pipe(gulp.dest(‘dist’));
 }); ! gulp.task(‘other’, function() { minify(‘templates/*.js’) .pipe(gulp.dest(‘templates’)); 
 });
65. 65.

    var minify = function(files) { return gulp.src(files) .pipe(concat(‘combined.js’)) .pipe(uglify());
 };

    ! gulp.task(‘js’, function() { minify(‘*.js’) .pipe(gulp.dest(‘dist’));
 }); ! gulp.task(‘other’, function() { minify(‘templates/*.js’) .pipe(gulp.dest(‘templates’)); 
 });
66. 66.

    var minify = function(files) { return gulp.src(files) .pipe(concat(‘combined.js’)) .pipe(uglify());
 };

    ! gulp.task(‘js’, function() { minify(‘*.js’) .pipe(gulp.dest(‘dist’));
 }); ! gulp.task(‘other’, function() { minify(‘templates/*.js’) .pipe(gulp.dest(‘templates’)); 
 });
67. 67.

    it’s just JavaScript

68. 68.

    gulp-load-plugins

69. 69.

    var uglify = require(‘gulp-uglif var jshint = require(‘gulp-jshin var concat

    = require(‘gulp-conca var uglify = require(‘gulp-uglif var jshint = require(‘gulp-jshin var concat = require(‘gulp-conca var uglify = require(‘gulp-uglif var jshint = require(‘gulp-jshin var concat = require(‘gulp-conca var uglify = require(‘gulp-uglif var jshint = require(‘gulp-jshin
70. 70.

    https://github.com/jackfranklin/gulp-load-plugins

71. 71.

    var gulp = require(‘gulp’), plugins = require(‘gulp-load-plugins’)(); { “dependencies”: {

    “gulp-jshint”: “*”, “gulp-concat”: “*” } } package.json
72. 72.

    var gulp = require(‘gulp’); var plugins = require(‘gulp-load- plugins’)(); !

    gulp.task(‘min’, function() { gulp.src(‘…’) .pipe(plugins.concat(‘app.js’)) .pipe(plugins.uglify()) .pipe(gulp.dest(‘’))
 });
73. 73.

    lazy loading of plugins

74. 74.

    Gulp 4 https://medium.com/@contrahacks/gulp-3828e8126466

75. 75.

    1. Task dependencies ! 2. API cleaned up ! 3.

    Error handling https://medium.com/@contrahacks/gulp-3828e8126466
76. 76.

    None
77. 77.

    be lazy automate lessen friction

78. 78.

    love your tools spend time getting to know them

79. 79.

    set up use and reuse iterate

80. 80.

    barely scratched the surface

81. 81.

    if you can think of it, there’s probably a plugin

    for it (779) http://gulpjs.com/plugins/
82. 82.

    www.gulpjs.com

83. 83.

    https://speakerdeck.com/ jackfranklin

84. 84.

    Thanks! ! @Jack_Franklin ! javascriptplayground.com