Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Advanced JavaScript build pipelines using Gulp.js

Advanced JavaScript build pipelines using Gulp.js

It has been some time since JavaScript build tools like Grunt or Gulp were just the "next big thing" for web developers. Working without them is nearly unimaginable nowadays and it seems that there's almost no problem in our day to day workflow which cannot be solved by simply using just another plugin.

But are build tools really the answer to everything?

In this talk, we will take a look at the ten most common problems which seem to be unsolved by using just the build tool basics. We will create advanced building pipelines for our custom processes and find out reusable patterns which can be applied to similar issues.

Stefan Baumgartner

November 18, 2015
Tweet

More Decks by Stefan Baumgartner

Other Decks in Programming

Transcript

  1. Sass CoffeeScript LESS P o s t C S S

    H A M L J a d e U g l i f y E S 6 R e a c t J S B r o w s e r i f y A n g u l a r J S E m b e r C S S M i n J S L i n t ESHint ImageOptim Mocha Jasmine TypeScript
  2. var source = require(‘vinyl-source-stream’); var b = browserify({ entries: ['_js/main.js']

    }); var bundle = function() { return b.bundle() .pipe(source(‘main.js’)) .pipe(gulp.dest('js')); } gulp.task(‘bundle’, bundle);
  3. var app = express(); var router = express.Router(); router.get('/*', function(req,

    res) { var stream = request('http://host.to.forward.to' + req.originalUrl); stream.pipe(res); stream .pipe(source('.' + req.originalUrl)) .pipe(gulp.dest('./cachedir')); }); app.use(express.static('_site')); app.use(express.static('cachedir')); app.use(router);
  4. var app = express(); var router = express.Router(); router.get('/*', function(req,

    res) { var stream = request('http://host.to.forward.to' + req.originalUrl); stream.pipe(res); stream .pipe(source('.' + req.originalUrl)) .pipe(gulp.dest('./cachedir')); }); app.use(express.static('_site')); app.use(express.static('cachedir')); app.use(router);
  5. Multiple bundles And now we need this over and over

    again for all our applications…
  6. var elems = [ { dir: ‘app1’, bundleName: ‘app1.min.js’ },

    { dir: ‘app2’, bundleName: ‘app2.min.js’ } ];
  7. var streams = elems.map(function(el) { return gulp.src(el.dir + ‘src/**/*.coffee’) .pipe(coffee()),

    .pipe(gulp.src(el.dir + ‘src/**/*.js’), {passthrough: true}) .pipe(uglify()) .pipe(concat(el.bundleName)) }); return merge(streams) .pipe(gulp.dest('build'));
  8. filter files that have changed do performance heavy operations remember

    the old files and continue with the other ops
  9. gulp.task('scripts', function () { return gulp.src('app/scripts/**/*.js') .pipe(cached('ugly')) .pipe(uglify()) .pipe(remember('ugly')) .pipe(concat('main.min.js'))

    .pipe(gulp.dest('dist/scripts')); }); once we are done, we remember all the other files we stored in the cache
  10. gulp.task('lint', function () { return gulp.src(‘src/**/*.js’, { since: gulp.lastRun(‘lint’) })

    .pipe(jshint()) .pipe(jshint.reporter(‘default’)) .pipe(jshint.reporter(‘fail’)); });