build process refactoring: compressed and uncompressed sources

Author: dhilt

Gruntfile.js

@@ -1,12 +1,14 @@
-// Build configurations.
 module.exports = function (grunt) {
   grunt.loadNpmTasks('grunt-karma');
   grunt.loadNpmTasks('grunt-contrib-connect');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-webpack');
 
+  var webpackSettings = require('./webpack.config.js');
+
   grunt.initConfig({
     connect: {
       app: {
@@ -30,36 +32,34 @@ module.exports = function (grunt) {
       }
     },
     karma: {
-      dev: {
-        options: {
-          autoWatch: true,
-          colors: true,
-          configFile: './test/karma.conf.js',
-          keepalive: true,
-          port: 8082,
-          runnerPort: 9100
-        }
+      options: {
+        configFile: './test/karma.conf.js',
+        runnerPort: 9100
       },
-      prod: {
+      default: {},
+      compressed: {
         options: {
-          colors: true,
-          configFile: './test/karma.conf.js',
-          runnerPort: 9100,
+          files: require('./test/karma.conf.files.js').compressedFiles,
+          port: 9876,
+          autoWatch: false,
+          keepalive: false,
           singleRun: true
         }
       }
     },
     webpack: {
-      options: require("./webpack.config.js").config,
-      prod: {
-        cache: false,
-        plugins: require("./webpack.config.js").prodPlugins
-      },
-      dev: {
-        cache: false,
-        plugins: require("./webpack.config.js").devPlugins
+      options: webpackSettings.config,
+      default: {},
+      compressed: {
+        plugins: webpackSettings.compressedPlugins,
+        output: {
+          filename: '[name].min.js'
+        }
       }
     },
+    clean: {
+      temp: ['temp']
+    },
     copy: {
       sources: {
         files: [
@@ -69,6 +69,9 @@ module.exports = function (grunt) {
       jqLiteExtrasFake: {
         files: [
           {expand: true, src: ['ui-scroll-jqlite.js'], cwd: 'src', dest: 'dist/'},
+          {expand: true, src: ['ui-scroll-jqlite.js'], cwd: 'src', dest: 'dist/', rename: function(dest, src) {
+            return dest + src.replace(/\.js$/, ".min.js");
+          }}
         ]
       }
     },
@@ -109,11 +112,6 @@ module.exports = function (grunt) {
     }
   });
 
-  /**
-   * Starts a web server
-   * Enter the following command at the command line to execute this task:
-   * grunt server
-   */
   grunt.registerTask('server', [
     'connect',
     'watch'
@@ -122,26 +120,30 @@ module.exports = function (grunt) {
   grunt.registerTask('default', ['server']);
 
   grunt.registerTask('test', [
-    'webpack:dev',
-    'karma:dev'
+    'clean:temp',
+    'webpack:default',
+    'karma:default'
   ]);
 
   grunt.registerTask('buildWatcher', [
     'jshint:sources',
-    'webpack:dev'
+    'clean:temp',
+    'webpack:default'
   ]);
 
   grunt.registerTask('build', [
     'jshint:tests',
     'jshint:sources',
-    'webpack:prod',
-    'karma:prod',
+    'clean:temp',
+    'webpack:compressed',
+    'karma:compressed',
+    'webpack:default',
     'copy:sources',
     'copy:jqLiteExtrasFake'
   ]);
 
   grunt.registerTask('travis', [
-    'webpack:prod',
-    'karma:prod'
+    'webpack:compressed',
+    'karma:compressed'
   ]);
 };

package.json

@@ -28,6 +28,7 @@
     "clean-webpack-plugin": "^0.1.15",
     "express": "^4.14.0",
     "grunt": "^1.0.1",
+    "grunt-contrib-clean": "^1.0.0",
     "grunt-contrib-connect": "^1.0.2",
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-jshint": "^1.1.0",

src/ui-scroll-jqlite.js

@@ -1,2 +1,12 @@
-/* Will be removed soon... */
-angular.module('ui.scroll.jqlite', []);
+/*!
+ * angular-ui-scroll
+ * https://github.com/angular-ui/ui-scroll.git
+ * This module is deprecated since 1.6.0 and will be removed in further versions!
+ * License: MIT
+ */
+(function () {
+  'use strict';
+
+  angular.module('ui.scroll.jqlite', []);
+
+}());

test/karma.conf.files.js

@@ -0,0 +1,23 @@
+var files = [
+  'http://code.jquery.com/jquery-1.9.1.js',
+  'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js',
+  'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-mocks.js',
+  'test.css',
+  'datasources.js',
+  'scaffolding.js',
+  '**/*Spec.js',
+  {
+    pattern: '../temp/*.js.map',
+    included: false
+  }
+];
+
+module.exports.defaultFiles = files.concat([
+  '../temp/ui-scroll.js',
+  '../temp/ui-scroll-grid.js'
+]);
+
+module.exports.compressedFiles = files.concat([
+  '../temp/ui-scroll.min.js',
+  '../temp/ui-scroll-grid.min.js'
+]);

test/karma.conf.js

@@ -13,21 +13,8 @@ module.exports = function (config) {
 
 
     // list of files / patterns to load in the browser
-    files: [
-      'http://code.jquery.com/jquery-1.9.1.js',
-      'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.js',
-      'https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-mocks.js',
-      'test.css',
-      '../temp/ui-scroll.js',
-      '../temp/ui-scroll-grid.js',
-      'datasources.js',
-      'scaffolding.js',
-      '**/*Spec.js',
-      {
-        pattern: '../temp/*.js.map',
-        included: false
-      }
-    ],
+    files: require('./karma.conf.files.js').defaultFiles,
+
 
     // list of files to exclude
     exclude: [],
@@ -39,7 +26,7 @@ module.exports = function (config) {
 
 
     // web server port
-    port: 9876,
+    port: 8082,
 
 
     // enable / disable colors in the output (reporters and logs)
@@ -55,6 +42,9 @@ module.exports = function (config) {
     autoWatch: true,
 
 
+    keepalive: true,
+
+
     // Start these browsers, currently available:
     // - Chrome
     // - ChromeCanary

webpack.config.js

@@ -1,6 +1,15 @@
 var path = require('path');
 var webpack = require('webpack');
 
+var packageJSON = require('./package.json');
+
+var getBanner = function (compressed) {
+  return packageJSON.name + (compressed ? ' (compressed)' : ' (uncompressed)') + '\n' +
+    packageJSON.homepage + '\n' +
+    'Version: ' + packageJSON.version + ' -- ' + (new Date()).toISOString() + '\n' +
+    'License: ' + packageJSON.license;
+};
+
 module.exports.config = {
   entry: {
     'ui-scroll': './src/ui-scroll.js',
@@ -10,6 +19,7 @@ module.exports.config = {
     path: path.join(__dirname, 'temp'),
     filename: '[name].js'
   },
+  cache: false,
   devtool: 'source-map',
   module: {
     loaders: [
@@ -22,31 +32,13 @@ module.exports.config = {
         }
       }
     ]
-  }
+  },
+  plugins: [
+    new webpack.BannerPlugin(getBanner(false))
+  ]
 };
 
-/**** plugins ****/
-
-var packageJSON = require('./package.json');
-var CleanWebpackPlugin = require('clean-webpack-plugin');
-
-var banner =
-  packageJSON.name + '\n' +
-  packageJSON.homepage + '\n' +
-  'Version: ' + packageJSON.version + ' -- ' + (new Date()).toISOString() + '\n' +
-  'License: ' + packageJSON.license;
-
-var plugins = [
-  new CleanWebpackPlugin(['temp'], {
-    root: process.cwd(),
-    verbose: true,
-    dry: false,
-  })
-];
-
-module.exports.devPlugins = plugins.concat([]);
-
-module.exports.prodPlugins = plugins.concat([
+module.exports.compressedPlugins = [
   new webpack.optimize.UglifyJsPlugin({
     compress: {
       warnings: true,
@@ -55,5 +47,5 @@ module.exports.prodPlugins = plugins.concat([
       comments: false,
     },
   }),
-  new webpack.BannerPlugin(banner)
-]);
+  new webpack.BannerPlugin(getBanner(true))
+];