Integration of Browserify

.gitignore

@@ -1,3 +1,4 @@
 npm-debug.log
 .sass-cache
 node_modules
+bower_components

Gruntfile.js

@@ -5,6 +5,7 @@ module.exports = function(grunt) {
   };
  
   grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
     autoprefixer: {
       single_file: {
         options: {
@@ -13,6 +14,9 @@ module.exports = function(grunt) {
         files: { 'style.css': 'style.css' }
       }
     },
+    browserify: {
+      'js/script.js': ['js/main.js']
+    },
     imageoptim: {
       src: [paths.img],
       options: {
@@ -52,11 +56,11 @@ module.exports = function(grunt) {
       }
     },
     jshint: {
-      all: ['js/script.js']
+      all: ['js/main.js']
     },
     uglify: {
       all: {
-        files: { 'script.js': 'script.js' }
+        files: { 'js/script.js': 'js/script.js' }
       }
     },
     watch: {
@@ -68,13 +72,14 @@ module.exports = function(grunt) {
         }
       },
       js: {
-        files: ['js/*.js'],
+        files: ['js/main.js'],
-        tasks: ['uglify', 'jshint']
+        tasks: ['browserify', 'jshint', 'uglify']
       }
     }
   });
  
   grunt.loadNpmTasks('grunt-autoprefixer');
+  grunt.loadNpmTasks('grunt-browserify');
   grunt.loadNpmTasks('grunt-contrib-jshint');
   grunt.loadNpmTasks('grunt-contrib-sass');
   grunt.loadNpmTasks('grunt-contrib-uglify');
@@ -83,6 +88,6 @@ module.exports = function(grunt) {
   grunt.loadNpmTasks('grunt-svg2png');
   grunt.loadNpmTasks('grunt-svgmin');
  
-  grunt.registerTask('default', ['imageoptim', 'svgmin', 'svg2png', 'watch']);
+  grunt.registerTask('default', ['sass', 'browserify', 'jshint', 'uglify', 'watch']);
  
 };

README.md

@@ -14,14 +14,15 @@ A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. The
 * Customised functions.php adding theme support for high customisation
 * Minimised HTTP requests for high Web Performance
 * Localised strings for multiple language support
-* Grunt.js integration - automatic image optimisation, Sass compiling and watching, css minification and live reload support
+* Grunt integration - automatic image optimisation, Sass compiling and watching, css minification and live reload support
 
 ## Installation
 
 ### Dependencies
 
-* Node.js
+* [Node.js](http://nodejs.org)
-* Grunt.js
+* [Grunt](http://gruntjs.com)
+* [Browserify](http://browserify.org)
 
 #### Optional
 
@@ -31,7 +32,13 @@ Clone/download the barebones repositories into your WordPress /wp-content/themes
 
     $ npm install
 
-Then run `grunt`:
+Then run `grunt` to execute the default tasks: compiling sass/js and creating the watcher.
+
+To aid performance, the image-centric tasks aren't run by default and can be executed by running:
+
+    $ grunt svgmin
+    $ grunt svg2png
+    $ grunt imageoptim
 
 ## WordPress Support
 
@@ -50,3 +57,4 @@ Compatible with WordPress 3.2 and above, but always use the latest version.
 
 * ~~Organisation of Sass folders~~
 * ~~Simple grid framework~~
+* ~~Organisation of JS~~

functions.php

@@ -37,13 +37,15 @@ add_filter( 'post_comments_feed_link', 'barebones_remove_comments_rss' );
  */
 
 function barebones_scripts() {
-  // If you need 'em
+  /*
-  // wp_enqueue_style( 'fonts', '//fonts.googleapis.com/css?family=Font+Family' );
+   * For IE8 to play nice, you'll need to include your CSS here, for example:
-  // wp_enqueue_style( 'icons', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' );
+   *
+   * wp_enqueue_style( 'fonts', '//fonts.googleapis.com/css?family=Font+Family' );
+   * wp_enqueue_style( 'icons', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' );
+   */
   wp_deregister_script( 'jquery' );
   wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js', false, '1.11.1', true );
   wp_enqueue_script( 'jquery' );
-  wp_enqueue_script( 'bxSlider', get_stylesheet_directory_uri() . '/js/jquery.bxslider.min.js', array( 'jquery' ), null, true );
   wp_enqueue_script( 'script', get_stylesheet_directory_uri() . '/js/script.js', array( 'jquery' ), null, true );
 }
 

js/main.js

@@ -0,0 +1,5 @@
+/*
+ * Require all your other JS files here, for example:
+ *
+ * var slider = require('./slider');
+ */

js/script.js

@@ -1,5 +0,0 @@
-$(function() {
-  
-  
-
-});

package.json

@@ -8,6 +8,7 @@
     "grunt-svgmin": "~0.4.0",
     "grunt-contrib-uglify": "~0.5.0",
     "grunt-contrib-jshint": "~0.10.0",
-    "grunt-autoprefixer": "~0.8.2"
+    "grunt-autoprefixer": "~0.8.2",
+    "grunt-browserify": "~2.1.4"
   }
 }

scss/_vars.scss

@@ -19,7 +19,7 @@ $breakpoint-md: 768px;
 $breakpoint-ld: 1200px;
 
 $breakpoints-list: (
-    'sd' '(max-width:' + $breakpoint-sm + ')',
+    'sd' '(max-width:' + $breakpoint-sd + ')',
     'md' '(min-width:' + ($breakpoint-md + 1) + ') and (max-width:' + ($breakpoint-ld - 1) + ')',
     'ld' '(min-width:' + $breakpoint-ld + ')'
 );