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. 1.
  2. 3.
  3. 4.

    We do a lot of things over and over again

    in a day to day workflow
  4. 6.
  5. 7.
  6. 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
  7. 15.
  8. 17.
  9. 27.
  10. 28.
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 38.
  17. 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(‘’))
 });
  18. 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(‘’))
 });
  19. 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(‘’))
 });
  20. 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(‘’))
 });
  21. 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(‘’))
 });
  22. 48.
  23. 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
  24. 55.

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

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

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

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

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

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

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

    ! gulp.task(‘three’, [‘two’], function() { // task two is done now
 });
  28. 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
 });
  29. 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’)); 
 });
  30. 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’)); 
 });
  31. 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’)); 
 });
  32. 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
  33. 71.

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

    “gulp-jshint”: “*”, “gulp-concat”: “*” } } package.json
  34. 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(‘’))
 });
  35. 75.

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

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

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

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