FOWA: Development with GulpJS

Aea964cf59c0c81fff752896f070cbbb?s=47 Jack Franklin
September 30, 2014

FOWA: Development with GulpJS

Aea964cf59c0c81fff752896f070cbbb?s=128

Jack Franklin

September 30, 2014
Tweet

Transcript

  1. None
  2. @Jack_Franklin ! javascriptplayground.com

  3. None
  4. We do a lot of things over and over again

    in a day to day workflow
  5. Build Tools

  6. None
  7. None
  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

  15. None
  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
  76. None
  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