Automate Everything

About me

Agenda

Automation

We aspire to

Productivity

Focus

Plan

Architect

We need a good tool

Grunt vs Gulp

Install Grunt.js

Grunt Workflow

Which Plugins?

Concat step 1

Concat step 2.1

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
     
     // ---------------------------------------
     // your automation configuration goes here
     // ---------------------------------------
  });

  // ----------------------------
  // Load your grunt plugins here
  // ----------------------------
  

};

Concat step 2.2

module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    concat: {
      myProject: {
        src: 'src/*.js',
        dest: 'build/main.js'
      }
    }
  });

  // Load the plugin that provides the "concat" task.
  grunt.loadNpmTasks('grunt-contrib-concat');

  // Default task(s).
  grunt.registerTask('default', ['concat']);

};

Concat step 3

Minify with Uglify.js

  // Put the task config in your Gruntfile.js inside initConfig
  uglify: {
    myProject: {
      src: 'build/main.js',
      dest: 'build/main.min.js'
    }
  }
    
  // Dont forget to Load the plugin that provides the "Uglify" task
  grunt.loadNpmTasks('grunt-contrib-uglify');

Continuous development

Continuous development 

module.exports = function(grunt) {
  grunt.initConfig({
    watch: {
       myProject: {
         files: ['src/*.js'],
         tasks: ['concat', 'uglify'] // or: concat:myProject, uglify:myProject       }
    },
    concat: {
      myProject: {
        src: 'src/*.js',
        dest: 'build/main.js'
      }
    }
    // uglify...
  });

  // Load all the plugin:
  grunt.loadNpmTasks('grunt-contrib-watch'); // also load uglify and concat 
};

Gulp Example

// Include gulp
var gulp = require('gulp'),
    watch = require('gulp-watch'); // require all libs that you need (uglify, concat, etc..)

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('src/*.js', ['scripts']);
});

// Concatenate & Minify JS
gulp.task('scripts', function() {
    return gulp.src('src/*.js')
        .pipe(concat('main.js'))
        .pipe(gulp.dest('build'))
        .pipe(rename('main.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('build'));
});

gulp.task('default', ['lint', 'sass', 'scripts', 'watch']); // Default Task

Continuous development 

Continuous development 

Demo Scenario 2

Watch JS files
Concat into main.js

Run 200 unit tests with Karma

Continuous Delivery

Conclusions