Modern UI Build Systems and Scaffolding Tools


http://goo.gl/5CL1mW
@arvindr21 | Github

Contents

  • Build Tools
  • Build System in UI
  • Grunt
  • Gulp
  • Scaffolding Tools
  • Yeoman
  • Slush
  • Resources

Build Tools

  • Build Tools are programs that automate the creation of executable applications from source code.

  • Build Automation is the act of scripting or automating tasks that developers do repeatedly like:
    • Compiling source code into binary code.
    • Packaging that binary code.
    • Running tests.
    • Deployment to production systems.

Build System in UI

  • Strip out comments
  • Strip out debugger statements
  • Automagically add vendor prefixes
  • Concatenate files
  • Minify JS/CSS/HTML
  • Build Source Maps
  • Update file revisions for caching
  • Pre and Post compiling tests
  • and a bunch more..

Available Build Systems


Grunt

  • A JavaScript Task Runner
  • Runs on top of Nodejs
  • Automate Simple tasks
  • Each task can be a plugin/feature or a combination
  • Configuration before code
  • Open Source and Supported by Community

Setup Grunt


$ [sudo] npm install -g grunt-cli
					
  • Create a package.json
  • Create a gruntFile.js
  • Install and save required plugins
  • Configure the tasks and run

Sample Config

package.json

{
  "name": "myGruntApp",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "MIT"
}

					
Grunt File

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });
};
					

Plugins

  • Concat
  • Minify
  • qUnit
  • jsHint

Concat Config


concat: {
  options: {
    // define a string to put between each file in the
    // concatenated output
    separator: ';'
  },
  dist: {
    // the files to concatenate
    src: ['src/**/*.js'],
    // the location of the resulting JS file
    dest: 'dist/<%= pkg.name %>.js'
  }
}					
					

Uglify Config


uglify: {
  options: {
    // the banner is inserted at the top of the output
    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
  },
  dist: {
    files: {
      'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
    }
  }
}
					

qUnit Config


qunit: {
  files: ['test/**/*.html']
},
					

jsHint Config


jshint: {
  // define the files to lint
  files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
  // configure JSHint (documented at http://www.jshint.com/docs/)
  options: {
    // more options here if you want to override JSHint defaults
    globals: {
      jQuery: true,
      console: true,
      module: true
    }
  }
}
					

Import Tasks


grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-qunit');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
					

Import Tasks


// this would be run by typing "grunt test" on the command line
grunt.registerTask('test', ['jshint', 'qunit']);

// the default task can be run just by typing "grunt" on the command line
grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
					


Demo

Gulp

  • A Node.js-based task runner.
  • Build to counter issues with Grunt
  • Gulp uses leaner, simpler JavaScript code
  • Gulp plug-ins are designed to do one thing only, unlike Grunt
  • Gulp uses Streams

Streams



Think about a stream where you start reading a file, apply operation to it and save it back to disk.

Grunt vs Gulp


Grunt plug-ins often perform multiple tasks Gulp plug-ins are designed to do one thing only.

Grunt requires plug-ins for basic functionality such as file watching Gulp has them built-in.

Grunt uses JSON-like data configuration files Gulp uses leaner, simpler JavaScript code.

Sample Config

package.json

{
  "name": "myGulpApp",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "author": "",
  "license": "MIT"
}

					
Gulp File

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});
					

Plugins

  • Concat
  • Minify
  • qUnit
  • jsHint

Concat Config


var concat = require('gulp-concat');

gulp.task('scripts', function() {
  gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'))
});				
					

Uglify Config


var uglify = require('gulp-uglify');

gulp.task('compress', function() {
  gulp.src('lib/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'))
});					

qUnit Config


var qunit = require('gulp-qunit');

gulp.task('test', function() {
    return gulp.src('./qunit/test-runner.html')
        .pipe(qunit());
});
					

jsHint Config


var jshint = require('gulp-jshint');

gulp.task('lint', function() {
  return gulp.src('./lib/*.js')
    .pipe(jshint())
    .pipe(jshint.reporter('default'));
});
					

Demo

Scaffolding Tools

Best Practices - Out of Box


Yeoman

  • Yo
    yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks and Bower dependencies that you might need for your build.
  • Grunt
    The Build System is used to build, preview and test your project. Grunt and Gulp are two popular options
  • Bower
    The Package Manager is used for dependency management, so that you no longer have to manually download and manage your scripts. Bower and npm are two popular options.

Demo

Slush


  • Slush is a scaffolding tool, i.e. a tool to help you generate new project structures to get you up and running with your new project in a matter of seconds.

  • Slush does not contain anything "out of the box", except the ability to locate installed slush generators and to run them with liftoff.

Demo

Resources

Thanks!