Ref #933 - dev and build tasks for Grunt

Dev: don't minify
Build: minify, lean Modernizr build

Dev assets will load if you have defined your WP_ENV as development
If you don't use Bedrock, you'll need to add this to your wp-config.php:

define('WP_ENV', 'development');

TODO: lib/scripts.php shouldn't need to be committed for changes after
running the version task

.gitignore

@@ -2,6 +2,7 @@
 # Read about how to use .gitignore: https://help.github.com/articles/ignoring-files
 node_modules
 assets/vendor/*
-assets/css/main.min.css.map
+assets/css/main.css.map
-assets/css/*main.*.min.css
+assets/css/*main*.css
-assets/js/*scripts.*.min.js
+assets/js/*scripts*.js
+assets/js/vendor/modernizr.min.js

Gruntfile.js

@@ -1,5 +1,21 @@
 'use strict';
 module.exports = function(grunt) {
+  var jsFileList = [
+    'assets/vendor/bootstrap/js/transition.js',
+    'assets/vendor/bootstrap/js/alert.js',
+    'assets/vendor/bootstrap/js/button.js',
+    'assets/vendor/bootstrap/js/carousel.js',
+    'assets/vendor/bootstrap/js/collapse.js',
+    'assets/vendor/bootstrap/js/dropdown.js',
+    'assets/vendor/bootstrap/js/modal.js',
+    'assets/vendor/bootstrap/js/tooltip.js',
+    'assets/vendor/bootstrap/js/popover.js',
+    'assets/vendor/bootstrap/js/scrollspy.js',
+    'assets/vendor/bootstrap/js/tab.js',
+    'assets/vendor/bootstrap/js/affix.js',
+    'assets/js/plugins/*.js',
+    'assets/js/_*.js'
+  ];
 
   grunt.initConfig({
     jshint: {
@@ -9,50 +25,50 @@ module.exports = function(grunt) {
       all: [
         'Gruntfile.js',
         'assets/js/*.js',
-        '!assets/js/scripts.min.js'
+        '!assets/js/*.min.js',
+        '!assets/js/scripts.js'
       ]
     },
     less: {
-      dist: {
+      dev: {
+        files: {
+          'assets/css/main.css': [
+            'assets/less/main.less'
+          ]
+        },
+        options: {
+          compress: false,
+          // LESS source map
+          // To enable, set sourceMap to true and update sourceMapRootpath based on your install
+          sourceMap: false,
+          sourceMapFilename: 'assets/css/main.css.map',
+          sourceMapRootpath: '/app/themes/roots/'
+        }
+      },
+      build: {
         files: {
           'assets/css/main.min.css': [
             'assets/less/main.less'
           ]
         },
         options: {
-          compress: true,
+          compress: true
-          // LESS source map
-          // To enable, set sourceMap to true and update sourceMapRootpath based on your install
-          sourceMap: false,
-          sourceMapFilename: 'assets/css/main.min.css.map',
-          sourceMapRootpath: '/app/themes/roots/'
         }
       }
     },
+    concat: {
+      options: {
+        separator: ';',
+      },
+      dist: {
+        src: [jsFileList],
+        dest: 'assets/js/scripts.js',
+      },
+    },
     uglify: {
       dist: {
         files: {
-          'assets/js/scripts.min.js': [
+          'assets/js/scripts.min.js': [jsFileList]
-            'assets/vendor/bootstrap/js/transition.js',
-            'assets/vendor/bootstrap/js/alert.js',
-            'assets/vendor/bootstrap/js/button.js',
-            'assets/vendor/bootstrap/js/carousel.js',
-            'assets/vendor/bootstrap/js/collapse.js',
-            'assets/vendor/bootstrap/js/dropdown.js',
-            'assets/vendor/bootstrap/js/modal.js',
-            'assets/vendor/bootstrap/js/tooltip.js',
-            'assets/vendor/bootstrap/js/popover.js',
-            'assets/vendor/bootstrap/js/scrollspy.js',
-            'assets/vendor/bootstrap/js/tab.js',
-            'assets/vendor/bootstrap/js/affix.js',
-            'assets/js/plugins/*.js',
-            'assets/js/_*.js'
-          ]
-        },
-        options: {
-          // JS source map: to enable, uncomment the lines below and update sourceMappingURL based on your install
-          // sourceMap: 'assets/js/scripts.min.js.map',
-          // sourceMappingURL: '/app/themes/roots/assets/js/scripts.min.js.map'
         }
       }
     },
@@ -63,7 +79,7 @@ module.exports = function(grunt) {
       }
     },
     modernizr: {
-      dist: {
+      build: {
         devFile: 'assets/vendor/modernizr/modernizr.js',
         outputFile: 'assets/js/vendor/modernizr.min.js',
         files: {
@@ -82,13 +98,13 @@ module.exports = function(grunt) {
           'assets/less/*.less',
           'assets/less/**/*.less'
         ],
-        tasks: ['less', 'version']
+        tasks: ['less']
       },
       js: {
         files: [
           '<%= jshint.all %>'
         ],
-        tasks: ['jshint', 'uglify', 'version']
+        tasks: ['jshint', 'concat']
       },
       livereload: {
         // Browser live reloading
@@ -115,6 +131,7 @@ module.exports = function(grunt) {
   // Load tasks
   grunt.loadNpmTasks('grunt-contrib-clean');
   grunt.loadNpmTasks('grunt-contrib-jshint');
+  grunt.loadNpmTasks('grunt-contrib-concat');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-watch');
   grunt.loadNpmTasks('grunt-contrib-less');
@@ -123,17 +140,20 @@ module.exports = function(grunt) {
 
   // Register tasks
   grunt.registerTask('default', [
-    'clean',
+    'dev'
-    'less',
-    'uglify',
-    'version'
   ]);
   grunt.registerTask('dev', [
-    'watch'
+    'jshint',
+    'less:dev',
+    'concat'
   ]);
   grunt.registerTask('build', [
-    'default',
+    'jshint',
-    'modernizr'
+    'clean',
+    'less:build',
+    'uglify',
+    'modernizr',
+    'version'
   ]);
 
 };

lib/scripts.php

@@ -3,7 +3,7 @@
  * Enqueue scripts and stylesheets
  *
  * Enqueue stylesheets in the following order:
- * 1. /theme/assets/css/main.min.css
+ * 1. /theme/assets/css/main.3368efd2.min.css
  *
  * Enqueue scripts in the following order:
  * 1. jquery-1.11.0.min.js via Google CDN
@@ -11,7 +11,11 @@
  * 3. /theme/assets/js/main.min.js (in footer)
  */
 function roots_scripts() {
-  wp_enqueue_style('roots_main', get_template_directory_uri() . '/assets/css/main.min.css', false, 'a28b4865249f1b0d598be3cc7559f63a');
+  if (WP_ENV === 'development') {
+    wp_enqueue_style('roots_main_dev', get_template_directory_uri() . '/assets/css/main.css', false, null);
+  } else {
+    wp_enqueue_style('roots_main',     get_template_directory_uri() . '/assets/css/main.3368efd2.min.css', false, null);
+  }
 
   // jQuery is loaded using the same method from HTML5 Boilerplate:
   // Grab Google CDN's latest jQuery with a protocol relative URL; fallback to local if offline
@@ -26,11 +30,16 @@ function roots_scripts() {
     wp_enqueue_script('comment-reply');
   }
 
-  wp_register_script('modernizr', get_template_directory_uri() . '/assets/js/vendor/modernizr.min.js', array(), null, false);
+  wp_register_script('modernizr',         get_template_directory_uri() . '/assets/js/vendor/modernizr.min.js', array(), null, false);
-  wp_register_script('roots_scripts', get_template_directory_uri() . '/assets/js/scripts.min.js', array(), '0fc6af96786d8f267c8686338a34cd38', true);
+  wp_register_script('roots_scripts_dev', get_template_directory_uri() . '/assets/js/scripts.js', array(), null, true);
+  wp_register_script('roots_scripts',     get_template_directory_uri() . '/assets/js/scripts.0fc6af96.min.js', array(), null, true);
   wp_enqueue_script('modernizr');
   wp_enqueue_script('jquery');
-  wp_enqueue_script('roots_scripts');
+  if (WP_ENV === 'development') {
+    wp_enqueue_script('roots_scripts_dev');
+  } else {
+    wp_enqueue_script('roots_scripts');
+  }
 }
 add_action('wp_enqueue_scripts', 'roots_scripts', 100);
 

package.json

@@ -27,6 +27,7 @@
     "grunt": "~0.4.2",
     "grunt-contrib-clean": "~0.5.0",
     "grunt-contrib-jshint": "~0.6.4",
+    "grunt-contrib-concat": "~0.3.0",
     "grunt-contrib-uglify": "~0.2.4",
     "grunt-contrib-watch": "~0.5.3",
     "grunt-contrib-less": "~0.8.1",