FOWA: Development with GulpJS

Transcript

2. @Jack_Franklin ! javascriptplayground.com
4. We do a lot of things over and over again in a day to day workflow
5. Build Tools
8. “The Streaming Build System”
9. Transform 1 Transform 2 Transform 3 Disk The inefficient way files files files
10. Transform 1 Transform 2 Transform 3 Disk Streams app.js files files
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. https://github.com/substack/ stream-handbook
13. request(‘url’, function(err,doc) { fs.writeFile(dest,doc,function(err) { // done }) }) No Streams
14. request(‘url') .pipe(fs.createWriteStream(‘out’)) .on(‘end’, function() { //done }) Streams
16. npm install —-global gulp
17. npm init
18. npm install --save-dev gulp
19. var gulp = require(‘gulp’); ! gulp.task(‘default’, function() { console.log(‘hello’);
 }); Gulpfile.js
20. var gulp = require(‘gulp’); ! gulp.task(‘default’, function() { console.log(‘hello’);
 }); Gulpfile.js
21. var gulp = require(‘gulp’); ! gulp.task(‘default’, function() { console.log(‘hello’);
 }); Gulpfile.js
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. > 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. Congrats, you know Gulp now!
25. Code > Configuration
26. var gulp = require(‘gulp’); ! gulp.task(‘foo’, function() { console.log(‘foo task’);
 }); Gulpfile.js
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. gulp.src
29. Gulp plugins expect streams
30. gulp.src(‘app/main/*.js’); gulp.src(‘app/**/*.js’); gulp.src(‘just/one/file.js’); gulp.src([‘**/*.js’, ‘*.hbs’])
31. Minification
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. 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. 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. 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. 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. app.js out/ app.js uglify Disk gulp.src gulp.dest
38. gulp.dest
39. gulp.src(‘…’) .pipe(somePlugin()) .pipe(gulp.dest(‘some/folder’));
40. Congrats, you actually know Gulp now!
41. Concatenation and Minification
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. 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. 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. 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. 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. *.js app.js uglify Disk concat app.js *.js
48. Watching
49. ... ! gulp.task(‘min’, function() {…}); ! gulp.task(‘watch’, function() { gulp.watch(‘**/*.js’, [‘min’]);
 });
50. Task Dependencies
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. Concurrent by default
53. You should not fight this…
54. make the task able to tell other tasks when it finishes
55. gulp.task(‘one’, function(cb) { // do stuff cb(null);
 }); ! gulp.task(‘two’, function() { return gulp.src(‘…’).pipe(…)
 });
56. gulp.task(‘one’, function(cb) { // do stuff cb(null);
 }); ! gulp.task(‘two’, function() { return gulp.src(‘…’).pipe(…)
 });
57. gulp.task(‘one’, function(cb) { // do stuff cb(null);
 }); ! gulp.task(‘two’, function() { return gulp.src(‘…’).pipe(…);
 });
58. tell a task that it depends on another
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. 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. Running Tasks
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. 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. 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. 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. 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. it’s just JavaScript
68. gulp-load-plugins
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. https://github.com/jackfranklin/gulp-load-plugins
71. var gulp = require(‘gulp’), plugins = require(‘gulp-load-plugins’)(); { “dependencies”: { “gulp-jshint”: “*”, “gulp-concat”: “*” } } package.json
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. lazy loading of plugins
74. Gulp 4 https://medium.com/@contrahacks/gulp-3828e8126466
75. 1. Task dependencies ! 2. API cleaned up ! 3. Error handling https://medium.com/@contrahacks/gulp-3828e8126466
77. be lazy automate lessen friction
78. love your tools spend time getting to know them
79. set up use and reuse iterate
80. barely scratched the surface
81. if you can think of it, there’s probably a plugin for it (779) http://gulpjs.com/plugins/
82. www.gulpjs.com
83. https://speakerdeck.com/ jackfranklin
84. Thanks! ! @Jack_Franklin ! javascriptplayground.com