From 955f2109c136ed215c4357d8b7e6e8341679065a Mon Sep 17 00:00:00 2001
From: Carson Shold <carson@carsonshold.com>
Date: Wed, 7 Sep 2016 09:31:30 -0400
Subject: [PATCH] Switch to gulp-include for theme JS

---
 package.json.ejs                             |   8 +-
 src/layout/gift_card.liquid                  |   7 +-
 src/layout/password.liquid                   |   4 -
 src/layout/theme.liquid                      |   2 +-
 src/scripts/global/global.js                 |  23 +--
 src/scripts/slate/a11y.js                    |   2 +-
 src/scripts/slate/rte.js                     |   2 +-
 src/scripts/slate/uri-helpers.js             |  90 ----------
 src/scripts/templates/customers-addresses.js |  14 +-
 src/scripts/templates/customers-login.js     |  79 ++++----
 src/scripts/templates/giftcard.js            |  41 +++--
 src/scripts/templates/product.js             | 178 ++++++++++---------
 src/scripts/theme.js                         |  15 +-
 tasks/js-build.js                            |  47 ++---
 14 files changed, 204 insertions(+), 308 deletions(-)
 delete mode 100644 src/scripts/slate/uri-helpers.js

diff --git a/package.json.ejs b/package.json.ejs
index 14dfa70a2..cca7b8cfb 100644
--- a/package.json.ejs
+++ b/package.json.ejs
@@ -19,8 +19,6 @@
   "dependencies": {
     "bluebird": "3.4.0",
     "browser-sync": "2.13.0",
-    "browserify": "13.1.0",
-    "browserify-shim": "^3.8.12",
     "chokidar": "1.5.2",
     "del": "2.2.0",
     "eslint": "3.2.2",
@@ -30,7 +28,8 @@
     "gulp-concat": "2.6.0",
     "gulp-cssimport": "3.0.2",
     "gulp-eslint": "2.0.0",
-    "gulp-ext-replace": "^0.3.0",
+    "gulp-ext-replace": "0.3.0",
+    "gulp-include": "2.3.1",
     "gulp-jsonlint": "1.1.2",
     "gulp-open": "2.0.0",
     "gulp-plumber": "1.1.0",
@@ -44,10 +43,7 @@
     "open": "0.0.5",
     "require-dir": "0.3.0",
     "run-sequence": "1.2.1",
-    "vinyl-buffer": "1.0.0",
     "vinyl-paths": "2.1.0",
-    "vinyl-source-stream": "1.1.0",
-    "watchify": "3.7.0",
     "yargs": "4.7.1"
   }
 }
diff --git a/src/layout/gift_card.liquid b/src/layout/gift_card.liquid
index 866e6c724..72e3a738a 100644
--- a/src/layout/gift_card.liquid
+++ b/src/layout/gift_card.liquid
@@ -20,13 +20,12 @@
 
   {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
 
-  <script>
-    var theme = {};
-  </script>
-
   <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor/qrcode.js' | shopify_asset_url }}" defer="defer"></script><!--<![endif]-->
   <!--[if lt IE 9]><script src="{{ 'vendor/qrcode.js' | shopify_asset_url }}"></script><![endif]-->
 
+  <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
+  <!--[if lt IE 9]><script src="{{ 'vendor.js' | asset_url }}"></script><![endif]-->
+
   <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'theme.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
   <!--[if lt IE 9]><script src="{{ 'theme.js' | asset_url }}"></script><![endif]-->
 
diff --git a/src/layout/password.liquid b/src/layout/password.liquid
index ff55a1a29..4502bcac7 100644
--- a/src/layout/password.liquid
+++ b/src/layout/password.liquid
@@ -22,10 +22,6 @@
 
   {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
 
-  <script>
-    var theme = {};
-  </script>
-
   <!--[if (gt IE 9)|!(IE)]><!--><script src="{{ 'vendor.js' | asset_url }}" defer="defer"></script><!--<![endif]-->
   <!--[if lt IE 9]><script src="{{ 'vendor.js' | asset_url }}"></script><![endif]-->
 
diff --git a/src/layout/theme.liquid b/src/layout/theme.liquid
index 64d3e2be0..dcd6981d5 100755
--- a/src/layout/theme.liquid
+++ b/src/layout/theme.liquid
@@ -24,7 +24,7 @@
   {{ 'theme.scss.css' | asset_url | stylesheet_tag }}
 
   <script>
-    var theme = {
+    window.theme = {
       strings: {
         addToCart: {{ 'products.product.add_to_cart' | t | json }},
         soldOut: {{ 'products.product.sold_out' | t | json }},
diff --git a/src/scripts/global/global.js b/src/scripts/global/global.js
index 2e312c23c..5571a51c8 100644
--- a/src/scripts/global/global.js
+++ b/src/scripts/global/global.js
@@ -1,13 +1,16 @@
-var a11y = require('./../slate/a11y.js');
-var rte = require('./../slate/rte.js');
+window.slate = window.slate || {};
+// =require ../slate/a11y.js
+// =require ../slate/rte.js
 
-// Common a11y fixes
-a11y.pageLinkFocus($(window.location.hash));
+$(document).ready(function() {
+  // Common a11y fixes
+  slate.a11y.pageLinkFocus($(window.location.hash));
 
-$('.in-page-link').on('click', function(evt) {
-  a11y.pageLinkFocus($(evt.currentTarget.hash));
-});
+  $('.in-page-link').on('click', function(evt) {
+    slate.a11y.pageLinkFocus($(evt.currentTarget.hash));
+  });
 
-// Wrap videos in div to force responsive layout.
-rte.wrapTable();
-rte.iframeReset();
+  // Wrap videos in div to force responsive layout.
+  slate.rte.wrapTable();
+  slate.rte.iframeReset();
+});
diff --git a/src/scripts/slate/a11y.js b/src/scripts/slate/a11y.js
index bae2f9813..ab50b8b2b 100755
--- a/src/scripts/slate/a11y.js
+++ b/src/scripts/slate/a11y.js
@@ -8,7 +8,7 @@
  * @namespace a11y
  */
 
-module.exports = {
+slate.a11y = {
 
   /**
    * For use when focus shifts to a container rather than a link
diff --git a/src/scripts/slate/rte.js b/src/scripts/slate/rte.js
index 29d9ab99d..c6158d14f 100644
--- a/src/scripts/slate/rte.js
+++ b/src/scripts/slate/rte.js
@@ -6,7 +6,7 @@
  * @namespace rte
  */
 
-module.exports = {
+slate.rte = {
 
   wrapTable: function() {
     $('.rte table').wrap('<div class="rte__table-wrapper"></div>');
diff --git a/src/scripts/slate/uri-helpers.js b/src/scripts/slate/uri-helpers.js
deleted file mode 100644
index 954a771eb..000000000
--- a/src/scripts/slate/uri-helpers.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/* eslint no-undefined: "off" */
-
-/**
- * URI Helper Functions
- * -----------------------------------------------------------------------------
- * Based off the node module query-string https://github.com/sindresorhus/query-string
- *
- * queryParams = slate.QueryString.parse(location.search)
- * queryParams.sort_by = 'created-descending'
- * location.search = slate.QueryString.stringify(queryParams);
- */
-
-module.exports = {
-
-  parse: function(str) {
-    var ret = Object.create(null);
-
-    if (typeof str !== 'string') {
-      return ret;
-    }
-
-    str = str.trim().replace(/^(\?|#|&)/, '');
-
-    if (!str) {
-      return ret;
-    }
-
-    str.split('&').forEach(function(param) {
-      var parts = param.replace(/\+/g, ' ').split('=');
-      // Firefox (pre 40) decodes `%3D` to `=`
-      // https://github.com/sindresorhus/query-string/pull/37
-      var key = parts.shift();
-      var val = parts.length > 0 ? parts.join('=') : undefined;
-
-      key = decodeURIComponent(key);
-
-      // missing `=` should be `null`:
-      // http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
-      val = val === undefined ? null : decodeURIComponent(val);
-
-      if (ret[key] === undefined) {
-        ret[key] = val;
-      } else if (Array.isArray(ret[key])) {
-        ret[key].push(val);
-      } else {
-        ret[key] = [ret[key], val];
-      }
-    });
-
-    return ret;
-  },
-
-  stringify: function(obj) {
-    return obj ? Object.keys(obj).sort().map(function(key) {
-      var val = obj[key];
-
-      if (val === undefined) {
-        return '';
-      }
-
-      if (val === null) {
-        return key;
-      }
-
-      if (Array.isArray(val)) {
-        var result = [];
-
-        val.slice().sort().forEach(function(val2) {
-          if (val2 === undefined) {
-            return;
-          }
-
-          if (val2 === null) {
-            result.push(encodeURIComponent(key));
-          } else {
-            result.push(encodeURIComponent(key) + '=' + encodeURIComponent(val2));
-          }
-        });
-
-        return result.join('&');
-      }
-
-      return encodeURIComponent(key) + '=' + encodeURIComponent(val);
-    })
-    .filter(function(x) {
-      return x.length > 0;
-    })
-    .join('&') : '';
-  }
-};
diff --git a/src/scripts/templates/customers-addresses.js b/src/scripts/templates/customers-addresses.js
index cfcf67bbe..5b73afcdb 100644
--- a/src/scripts/templates/customers-addresses.js
+++ b/src/scripts/templates/customers-addresses.js
@@ -7,9 +7,13 @@
  * @namespace customerAddresses
  */
 
-var $newAddressForm = $('#AddressNewForm');
+theme.customerAddresses = (function() {
+  var $newAddressForm = $('#AddressNewForm');
+
+  if (!$newAddressForm.length) {
+    return;
+  }
 
-if ($newAddressForm.length) {
   // Initialize observers on address selectors, defined in shopify_common.js
   if (Shopify) {
     // eslint-disable-next-line no-new
@@ -18,7 +22,7 @@ if ($newAddressForm.length) {
     });
   }
 
-// Initialize each edit form's country/province selector
+  // Initialize each edit form's country/province selector
   $('.address-country-option').each(function() {
     var formId = $(this).data('form-id');
     var countrySelector = 'AddressCountry_' + formId;
@@ -31,7 +35,7 @@ if ($newAddressForm.length) {
     });
   });
 
-// Toggle new/edit address forms
+  // Toggle new/edit address forms
   $('.address-new-toggle').on('click', function() {
     $newAddressForm.toggleClass('hide');
   });
@@ -50,4 +54,4 @@ if ($newAddressForm.length) {
       Shopify.postLink('/account/addresses/' + formId, {parameters: {_method: 'delete'}});
     }
   });
-}
+})();
diff --git a/src/scripts/templates/customers-login.js b/src/scripts/templates/customers-login.js
index d31573483..5aa39a5ea 100644
--- a/src/scripts/templates/customers-login.js
+++ b/src/scripts/templates/customers-login.js
@@ -6,51 +6,56 @@
  * @namespace password
  */
 
-var config = {
-  recoverPasswordForm: '#RecoverPassword',
-  hideRecoverPasswordLink: '#HideRecoverPasswordLink'
-};
+theme.customerLogin = (function() {
+  var config = {
+    recoverPasswordForm: '#RecoverPassword',
+    hideRecoverPasswordLink: '#HideRecoverPasswordLink'
+  };
 
+  if (!$(config.recoverPasswordForm).length) {
+    return;
+  }
 
-checkUrlHash();
-resetPasswordSuccess();
-
-$(config.recoverPasswordForm).on('click', onShowHidePasswordForm);
-$(config.hideRecoverPasswordLink).on('click', onShowHidePasswordForm);
-
-function onShowHidePasswordForm(evt) {
-  evt.preventDefault();
-  toggleRecoverPasswordForm();
-}
+  checkUrlHash();
+  resetPasswordSuccess();
 
-function checkUrlHash() {
-  var hash = window.location.hash;
+  $(config.recoverPasswordForm).on('click', onShowHidePasswordForm);
+  $(config.hideRecoverPasswordLink).on('click', onShowHidePasswordForm);
 
-  // Allow deep linking to recover password form
-  if (hash === '#recover') {
+  function onShowHidePasswordForm(evt) {
+    evt.preventDefault();
     toggleRecoverPasswordForm();
   }
-}
 
-/**
- *  Show/Hide recover password form
- */
-function toggleRecoverPasswordForm() {
-  $('#RecoverPasswordForm').toggleClass('hide');
-  $('#CustomerLoginForm').toggleClass('hide');
-}
+  function checkUrlHash() {
+    var hash = window.location.hash;
 
-/**
- *  Show reset password success message
- */
-function resetPasswordSuccess() {
-  var $formState = $('.reset-password-success');
+    // Allow deep linking to recover password form
+    if (hash === '#recover') {
+      toggleRecoverPasswordForm();
+    }
+  }
 
-  // check if reset password form was successfully submited.
-  if (!$formState.length) {
-    return;
+  /**
+   *  Show/Hide recover password form
+   */
+  function toggleRecoverPasswordForm() {
+    $('#RecoverPasswordForm').toggleClass('hide');
+    $('#CustomerLoginForm').toggleClass('hide');
   }
 
-  // show success message
-  $('#ResetSuccess').removeClass('hide');
-}
+  /**
+   *  Show reset password success message
+   */
+  function resetPasswordSuccess() {
+    var $formState = $('.reset-password-success');
+
+    // check if reset password form was successfully submited.
+    if (!$formState.length) {
+      return;
+    }
+
+    // show success message
+    $('#ResetSuccess').removeClass('hide');
+  }
+})();
diff --git a/src/scripts/templates/giftcard.js b/src/scripts/templates/giftcard.js
index 97d618f48..3affee569 100644
--- a/src/scripts/templates/giftcard.js
+++ b/src/scripts/templates/giftcard.js
@@ -4,7 +4,10 @@
  * A file that contains scripts highly couple code to the Gift Card template.
  */
 
-if ($('body').hasClass('template-giftcard')) {
+theme.giftCard = (function() {
+  if (!$('body').hasClass('template-giftcard')) {
+    return;
+  }
 
   var config = {
     qrCode: '#QrCode',
@@ -25,23 +28,23 @@ if ($('body').hasClass('template-giftcard')) {
     window.print();
   });
 
-// Auto-select gift card code on click, based on ID passed to the function
+  // Auto-select gift card code on click, based on ID passed to the function
   $(config.giftCardCode).on('click', {element: 'GiftCardDigits'}, selectText);
-}
-
-function selectText(evt) {
-  var text = document.getElementById(evt.data.element);
-  var range = '';
-
-  if (document.body.createTextRange) { // ms method
-    range = document.body.createTextRange();
-    range.moveToElementText(text);
-    range.select();
-  } else if (window.getSelection) { // moz, opera, webkit method
-    var selection = window.getSelection();
-    range = document.createRange();
-    range.selectNodeContents(text);
-    selection.removeAllRanges();
-    selection.addRange(range);
+
+  function selectText(evt) {
+    var text = document.getElementById(evt.data.element);
+    var range = '';
+
+    if (document.body.createTextRange) { // ms method
+      range = document.body.createTextRange();
+      range.moveToElementText(text);
+      range.select();
+    } else if (window.getSelection) { // moz, opera, webkit method
+      var selection = window.getSelection();
+      range = document.createRange();
+      range.selectNodeContents(text);
+      selection.removeAllRanges();
+      selection.addRange(range);
+    }
   }
-}
+})();
diff --git a/src/scripts/templates/product.js b/src/scripts/templates/product.js
index 7e685f08c..5c0e22706 100644
--- a/src/scripts/templates/product.js
+++ b/src/scripts/templates/product.js
@@ -6,17 +6,20 @@
    * @namespace product
  */
 
-var cache = {
-  $addToCart: $('#AddToCart'),
-  $productPrice: $('#ProductPrice'),
-  $comparePrice: $('#ComparePrice'),
-  $addToCartText: $('#AddToCartText'),
-  $productFeaturedImage: $('#ProductPhotoImg'),
-  $productThumbs: $('#ProductThumbs').find('.product-single__thumbnail')
-};
-
-if (theme.productSingleObject) {
-  Shopify.Image.preload(theme.productSingleObject.images, 'large');
+theme.product = (function() {
+  if (!theme.productSingleObject) { return; }
+
+  var cache = {
+    $addToCart: $('#AddToCart'),
+    $productPrice: $('#ProductPrice'),
+    $comparePrice: $('#ComparePrice'),
+    $addToCartText: $('#AddToCartText'),
+    $productFeaturedImage: $('#ProductPhotoImg'),
+    $productThumbs: $('#ProductThumbs').find('.product-single__thumbnail')
+  };
+
+  var productImageSize = Shopify.Image.imageSize(cache.$productFeaturedImage.attr('src'));
+  Shopify.Image.preload(theme.productSingleObject.images, productImageSize);
 
   // eslint-disable-next-line no-new
   new Shopify.OptionSelectors('ProductSelect', {
@@ -25,95 +28,96 @@ if (theme.productSingleObject) {
     enableHistoryState: true
   });
 
+
   // Clean up variant labels if the Shopify-defined
   // defaults are the only ones left
   simplifyVariantLabels(theme.productSingleObject);
-}
 
-/**
- * Updates the product page once a varient is selected. Changes button
- * status, text feedback, varient image, and prices.
- *
- * @param {Object} variant - Product object
- */
-function updateVariantSelection(variant) {
-  // Update cart button and text status
-  if (!variant) {
-    updateAddToCartState(false, theme.strings.unavailable);
-    return;
-  }
+  /**
+   * Updates the product page once a varient is selected. Changes button
+   * status, text feedback, varient image, and prices.
+   *
+   * @param {Object} variant - Product object
+   */
+  function updateVariantSelection(variant) {
+    // Update cart button and text status
+    if (!variant) {
+      updateAddToCartState(false, theme.strings.unavailable);
+      return;
+    }
+
+    if (variant.available) {
+      updateAddToCartState(true, theme.strings.addToCart);
+    } else {
+      updateAddToCartState(false, theme.strings.soldOut);
+    }
+
+    // Update variant image, if one is set
+    if (variant.featured_image) {
+      updateProductImage(variant.featured_image.src);
+    }
 
-  if (variant.available) {
-    updateAddToCartState(true, theme.strings.addToCart);
-  } else {
-    updateAddToCartState(false, theme.strings.soldOut);
+    // Update the product prices
+    updateProductPrices(variant.price, variant.compare_at_price);
   }
 
-  // Update variant image, if one is set
-  if (variant.featured_image) {
-    updateProductImage(variant.featured_image.src);
+  /**
+   * Updates the DOM state of the cart
+   *
+   * @param {boolean} enabeled - Decides whether cart is enabled or disabled
+   * @param {string} text - Updates the text notification content of the cart
+   */
+  function updateAddToCartState(enabeled, text) {
+    cache.$addToCart.prop('disabled', !enabeled);
+    cache.$addToCartText.html(text);
   }
 
-  // Update the product prices
-  updateProductPrices(variant.price, variant.compare_at_price);
-}
+  /**
+   * Updates the DOM with specified prices
+   *
+   * @param {string} productPrice - The current price of the product
+   * @param {string} comparePrice - The original price of the product
+   */
+  function updateProductPrices(productPrice, comparePrice) {
+    cache.$productPrice
+      .html(Shopify.formatMoney(productPrice, theme.moneyFormat));
 
-/**
- * Updates the DOM state of the cart
- *
- * @param {boolean} enabeled - Decides whether cart is enabled or disabled
- * @param {string} text - Updates the text notification content of the cart
- */
-function updateAddToCartState(enabeled, text) {
-  cache.$addToCart.prop('disabled', !enabeled);
-  cache.$addToCartText.html(text);
-}
-
-/**
- * Updates the DOM with specified prices
- *
- * @param {string} productPrice - The current price of the product
- * @param {string} comparePrice - The original price of the product
- */
-function updateProductPrices(productPrice, comparePrice) {
-  cache.$productPrice
-    .html(Shopify.formatMoney(productPrice, theme.moneyFormat));
-
-  if (comparePrice > productPrice) {
-    cache.$comparePrice
-      .html(Shopify.formatMoney(comparePrice, theme.moneyFormat))
-      .removeClass('hide');
-  } else {
-    cache.$comparePrice
-      .addClass('hide');
+    if (comparePrice > productPrice) {
+      cache.$comparePrice
+        .html(Shopify.formatMoney(comparePrice, theme.moneyFormat))
+        .removeClass('hide');
+    } else {
+      cache.$comparePrice
+        .addClass('hide');
+    }
   }
-}
 
-/**
- *  Adjust option_selection.js labels based on variant default values
- */
-function simplifyVariantLabels(product) {
-  // option_selection.js does not add a label if there is only one variant
-  // option. Add one as long as it is not 'Title' (Shopify's default), add
-  // one.
-  if (product.options.length === 1 && product.options[0] !== 'Title') {
-    $('.selector-wrapper:eq(0)').prepend('<label for="ProductSelect-option-0">' + product.options[0] + '</label>');
-  }
+  /**
+   *  Adjust option_selection.js labels based on variant default values
+   */
+  function simplifyVariantLabels(product) {
+    // option_selection.js does not add a label if there is only one variant
+    // option. Add one as long as it is not 'Title' (Shopify's default), add
+    // one.
+    if (product.options.length === 1 && product.options[0] !== 'Title') {
+      $('.selector-wrapper:eq(0)').prepend('<label for="ProductSelect-option-0">' + product.options[0] + '</label>');
+    }
 
-  // Hide variant dropdown if only one exists and title contains 'Default'
-  if (product.variants.length && product.variants[0].title.indexOf('Default') >= 0) {
-    $('.selector-wrapper').hide();
+    // Hide variant dropdown if only one exists and title contains 'Default'
+    if (product.variants.length && product.variants[0].title.indexOf('Default') >= 0) {
+      $('.selector-wrapper').hide();
+    }
   }
-}
 
-/**
- * Updates the DOM with the specified image URL
- *
- * @param {string} src - Image src URL
- */
-function updateProductImage(src) {
-  var size = Shopify.Image.imageSize(cache.$productFeaturedImage.attr('src'));
-  var sizedImgUrl = Shopify.Image.getSizedImageUrl(src, size);
+  /**
+   * Updates the DOM with the specified image URL
+   *
+   * @param {string} src - Image src URL
+   */
+  function updateProductImage(src) {
+    var size = Shopify.Image.imageSize(cache.$productFeaturedImage.attr('src'));
+    var sizedImgUrl = Shopify.Image.getSizedImageUrl(src, size);
 
-  $('#ProductPhotoImg').attr('src', sizedImgUrl);
-}
+    $('#ProductPhotoImg').attr('src', sizedImgUrl);
+  }
+})();
diff --git a/src/scripts/theme.js b/src/scripts/theme.js
index 2872dc0a1..32b87c485 100644
--- a/src/scripts/theme.js
+++ b/src/scripts/theme.js
@@ -1,12 +1,13 @@
-$(document).ready(function() {
-  // GLOBAL SCRIPTS
-  require('./global/global.js');
+window.theme = window.theme || {};
+
+// =require global/global.js
 
+$(document).ready(function() {
   // TEMPLATE SCRIPTS
-  require('./templates/customers-addresses.js');
-  require('./templates/giftcard.js');
-  require('./templates/customers-login.js');
-  require('./templates/product.js');
+  // =require templates/customers-addresses.js
+  // =require templates/customers-login.js
+  // =require templates/giftcard.js
+  // =require templates/product.js
 
   // Custom theme script
   // ---------------------------------------------------------------------------
diff --git a/tasks/js-build.js b/tasks/js-build.js
index 8bab762a7..03ca17576 100644
--- a/tasks/js-build.js
+++ b/tasks/js-build.js
@@ -1,12 +1,8 @@
 var gulp = require('gulp');
 var concat = require('gulp-concat');
+var include = require('gulp-include');
 var plumber = require('gulp-plumber');
 var chokidar = require('chokidar');
-var size = require('gulp-size');
-var stream = require('vinyl-source-stream');
-var buffer = require('vinyl-buffer');
-var browserify = require('browserify');
-var watchify = require('watchify');
 
 var config = require('./includes/config.js');
 var messages = require('./includes/messages.js');
@@ -50,42 +46,21 @@ function processVendorJs() {
 
 
 gulp.task('build:js', lintTask, function() {
-  var bundler = browserify(config.roots.js, {
-    extensions: ['.js', '.js.liquid'],
-    debug: false
-  });
-
-  return bundle(bundler);
+  processThemeJs();
 });
 
 gulp.task('watch:js', function() {
-
-  var bundler = browserify({
-    entries: [config.roots.js],
-    extensions: ['.js', '.js.liquid'],
-    debug: false,
-    plugin: [watchify],
-    cache: {},
-    packageCache: {}
-  }).on('update', function() {
-    bundle(bundler);
+  chokidar.watch(config.src.js, {ignoreInitial: true})
+  .on('all', function(event, path) {
+    messages.logFileEvent(event, path);
+    processThemeJs();
   });
-
-  return bundle(bundler);
 });
 
-/**
- * Concatenate js via browserify and copys to the `/dist` folder
- *
- * @returns {Stream}
- * @private
- */
-function bundle(bundler) {
-  messages.logBundleJs();
-  return bundler.bundle()
-    .on('error', utils.errorHandler)
-    .pipe(stream('theme.js.liquid'))
-    .pipe(buffer())
-    .pipe(size({showFiles: true, pretty: true}))
+function processThemeJs() {
+  messages.logProcessFiles('build:js');
+  return gulp.src(config.roots.js)
+    .pipe(plumber(utils.errorHandler))
+    .pipe(include())
     .pipe(gulp.dest(config.dist.assets));
 }