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

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

• Grunt Plugins
• Gulp Plugins
• Yeoman Generators
• Slush Generators

Thanks!