Javascript Tooling

Tooling

• Package management
• Module loaders
• Task runners

Package Management

Npm - Node Package Manager

> npm install lodash --save

> npm install gulp#3.8.11 --save-dev

//package.json
{
  "name": "starter.app",
  "version": "0.0.1",
  "dependencies": {    
    "lodash": "^2.4.1",
    "moment": "^2.8.4"
  },
  "devDependencies": {
    "bower": "^1.3.12",
    "browserify": "^8.0.2",
    "gulp": "3.8.11"
  }
}

-- root
 |- node_modules
 |- src
 |- package.json

Package Management

Bower - Front end libraries

> bower install lodash --save

> bower install moement#2.9.0

//bower.json
{
  "name": "starter.app",
  "version": "0.0.1",
  "dependencies": {    
    "lodash": "^2.4.1",
    "moment": "2.9.0"
  }
}

-- root
 |- bower_components
 |- src
 |- bower.json

Package Management

Nuget

JSPM - ES6 Module 

Module Loaders

• RequireJS - Amd modules
• Browserify + Node - CommonJS modules
• SystemJS - ES6 modules
• script tags - global

//CommonJS Module example
'use strict';

var _ = require('lodash');

function component() {
    /* code */
}

module.exports = component;

//AMD Module example

define(['lodash'], function(_) {
    'use strict';

    /* code */
});

Task Runners

• Gulp - task-based
• parallel tasks through node pipes

//gulpfile.js - Gulp task to copy files from the fonts folder

var gulp = require('gulp');

gulp.task('copy-fonts', function task() {
  return gulp.src('./src/fonts/*')
    .pipe(gulp.dest('dist/assets/fonts'))
});

> gulp copy-fonts

Task Runners

• Grunt- configuration-based

//GruntFile.js - Gulp task to copy files from the fonts folder

module.exports = function(grunt) {

    grunt.initConfig({
        copyFonts: {
          files: {
            cwd: '/src/fonts', 
            src: '**/*',       
            dest: 'dist/fonts',
            expand: true       
          }
        }
    });
}

> grunt copyFonts