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

Front End Ops Tooling

Front End Ops Tooling

This talk covers build tooling, processes, and your development workflow. You’ll get a glimpse as to why you should be building, and why you should put together a build process from the get-go. Then we’ll move on to tooling. Here I’ll discuss some of the most popular JavaScript build tools, namely Grunt, Gulp, and npm.

We’ll investigate how each one performs for certain tasks, and I’ll help you forge your own build sword. Lastly, I’ll discuss the benefits of going for the module format Node.js uses, which is Common.js, and how you can leverage those modules in the browser, using a tool called Browserify.

Nicolás Bevacqua

May 28, 2014
Tweet

More Decks by Nicolás Bevacqua

Other Decks in Programming

Transcript

  1. bevacqua.io/bf/tooling Tooling ✔ Configuration Driven ✔ Easy to configure ✔

    Thousands of Plugins ✔ It’s just JavaScript ✖ Long flows get too verbose
  2. bevacqua.io/bf/tooling Tooling ✔ Configuration Driven ✔ Easy to configure ✔

    Thousands of Plugins ✔ It’s just JavaScript ✖ Long flows get too verbose ✖ Not so fast
  3. module.exports = function (grunt) { grunt.initConfig({ sprite: { icons: {

    src: 'img/icons/*.png', destImg: 'img/icons.png', destCSS: 'css/icons.css' } } }); ! grunt.loadNpmTasks('grunt-spritesmith'); };
  4. module.exports = function (grunt) { grunt.initConfig({ sprite: { icons: {

    src: 'img/icons/*.png', destImg: 'img/icons.png', destCSS: 'css/icons.css' } } }); ! grunt.loadNpmTasks('grunt-spritesmith'); };
  5. module.exports = function (grunt) { grunt.initConfig({ sprite: { icons: {

    src: 'img/icons/*.png', destImg: 'img/icons.png', destCSS: 'css/icons.css' } } }); ! grunt.loadNpmTasks('grunt-spritesmith'); };
  6. module.exports = function (grunt) { grunt.initConfig({ sprite: { icons: {

    src: 'img/icons/*.png', destImg: 'img/icons.png', destCSS: 'css/icons.css' } } }); ! grunt.loadNpmTasks('grunt-spritesmith'); };
  7. module.exports = function (grunt) { grunt.initConfig({ sprite: { icons: {

    src: 'img/icons/*.png', destImg: 'img/icons.png', destCSS: 'css/icons.css' } } }); ! grunt.loadNpmTasks('grunt-spritesmith'); };
  8. module.exports = function (grunt) { grunt.initConfig({ sprite: { icons: {

    src: 'img/icons/*.png', destImg: 'img/icons.png', destCSS: 'css/icons.css' } } }); ! grunt.loadNpmTasks('grunt-spritesmith'); }; grunt sprite
  9. bevacqua.io/bf/tooling ✔ Code Driven ✔ leaner than Grunt ✔ Hundreds

    of Plugins ✔ It’s just JavaScript ✖ Streams, Pipes, Async
  10. bevacqua.io/bf/tooling ✔ Code Driven ✔ leaner than Grunt ✔ Hundreds

    of Plugins ✔ It’s just JavaScript ✖ Streams, Pipes, Async ✔ Faster than Grunt
  11. var gulp = require('gulp'); var uglify = require('gulp-uglify'); var size

    = require('gulp-size'); var header = require('gulp-header'); var pkg = require('./package.json'); var head = '// <%= p.name %>@v<%= p.version %>\n'; ! gulp.task('build', function () { gulp.src('./js/entry.js') .pipe(uglify()) .pipe(header(head, { p: pkg })) .pipe(size()) .pipe(gulp.dest('./dist')); });
  12. var gulp = require('gulp'); var uglify = require('gulp-uglify'); var size

    = require('gulp-size'); var header = require('gulp-header'); var pkg = require('./package.json'); var head = '// <%= p.name %>@v<%= p.version %>\n'; ! gulp.task('build', function () { gulp.src('./js/contra.js') .pipe(uglify()) .pipe(header(head, { p: pkg })) .pipe(size()) .pipe(gulp.dest('./dist')); });
  13. var gulp = require('gulp'); var uglify = require('gulp-uglify'); var size

    = require('gulp-size'); var header = require('gulp-header'); var pkg = require('./package.json'); var head = '// <%= p.name %>@v<%= p.version %>\n'; ! gulp.task('build', function () { gulp.src('./js/contra.js') .pipe(uglify()) .pipe(header(head, { p: pkg })) .pipe(size()) .pipe(gulp.dest('./dist')); });
  14. var gulp = require('gulp'); var uglify = require('gulp-uglify'); var size

    = require('gulp-size'); var header = require('gulp-header'); var pkg = require('./package.json'); var head = '// <%= p.name %>@v<%= p.version %>\n'; ! gulp.task('build', function () { gulp.src('./js/contra.js') .pipe(uglify()) .pipe(header(head, { p: pkg })) .pipe(size()) .pipe(gulp.dest('./dist')); });
  15. var gulp = require('gulp'); var uglify = require('gulp-uglify'); var size

    = require('gulp-size'); var header = require('gulp-header'); var pkg = require('./package.json'); var head = '// <%= p.name %>@v<%= p.version %>\n'; ! gulp.task('build', function () { gulp.src('./js/contra.js') .pipe(uglify()) .pipe(header(head, { p: pkg })) .pipe(size()) .pipe(gulp.dest('./dist')); }); gulp build
  16. bevacqua.io/bf/tooling Tooling ✔ Script Driven ✔ Barely any configuration ✔

    Use any npm package ✔ It can be just JavaScript RUN
  17. bevacqua.io/bf/tooling Tooling ✔ Script Driven ✔ Barely any configuration ✔

    Use any npm package ✔ It can be just JavaScript ✖ Bash isn’t so cross-platform RUN
  18. bevacqua.io/bf/tooling Tooling ✔ Script Driven ✔ Barely any configuration ✔

    Use any npm package ✔ It can be just JavaScript ✖ Bash isn’t so cross-platform ✔ Fastest RUN
  19. What’s ? ✔ Modular. Each file is a module. ✔

    Modules have an implicit local scope.
  20. What’s ? ✔ Modular. Each file is a module. ✔

    Modules have an implicit local scope. ✔ Modules can expose an API.
  21. What’s ? ✔ Modular. Each file is a module. ✔

    Modules have an implicit local scope. ✔ Modules can expose an API. ✔ Modules can require other modules.
  22. What’s ? ✔ Modular. Each file is a module. ✔

    Modules have an implicit local scope. ✔ Modules can expose an API. ✔ Modules can require other modules. ✔ Module loading is synchronous.
  23. Sample ~/js/pony.js var status = ‘happy’; ! module.exports = {

    setStatus: function (val) { status = val; }, printStatus: function () { console.log(status); } };
  24. Sample ~/js/pony.js ~/js/foo.js var status = ‘happy’; ! module.exports =

    { setStatus: function (val) { status = val; }, printStatus: function () { console.log(status); } }; var pony = require(‘./pony’); ! pony.setStatus(‘furious’); pony.printStatus();
  25. Sample ~/js/pony.js ~/js/foo.js var status = ‘happy’; ! module.exports =

    { setStatus: function (val) { status = val; }, printStatus: function () { console.log(status); } }; var pony = require(‘./pony’); ! pony.setStatus(‘furious’); pony.printStatus(); node foo
  26. Sample ~/js/pony.js ~/js/foo.js var status = ‘happy’; ! module.exports =

    { setStatus: function (val) { status = val; }, printStatus: function () { console.log(status); } }; var pony = require(‘./pony’); ! pony.setStatus(‘furious’); pony.printStatus(); node foo
  27. Browserify ✔ Inlines require calls. ✔ ports Node-core modules to

    browser. ✔ Non-Commonjs modules can be shimmed.
  28. Browserify ✔ Inlines require calls. ✔ ports Node-core modules to

    browser. ✔ Non-Commonjs modules can be shimmed. ✔ Access to all of npm.
  29. Browserify ✔ Inlines require calls. ✔ ports Node-core modules to

    browser. ✔ Non-Commonjs modules can be shimmed. ✔ Access to all of npm. ✔ Generates source maps.
  30. Browserify ✔ Inlines require calls. ✔ ports Node-core modules to

    browser. ✔ Non-Commonjs modules can be shimmed. ✔ Access to all of npm. ✔ Generates source maps. ✔ Build step, can be automated away.