Update vendor js build (#18)

* update vendor build and minify

* watch vendor js root

* switch uglify versions

* add file comments

* add comment about preserve comment

* update preserve comment

* fix tab character

* update comment structure

* update to include other root level scripts

package.json.ejs

@@ -25,7 +25,6 @@
     "eslint-plugin-shopify": "13.0.0",
     "gulp": "3.9.1",
     "gulp-cheerio": "0.6.2",
-    "gulp-concat": "2.6.0",
     "gulp-cssimport": "3.0.2",
     "gulp-eslint": "2.0.0",
     "gulp-ext-replace": "0.3.0",
@@ -36,6 +35,7 @@
     "gulp-sass-lint": "git+ssh://[email protected]:Shopify/gulp-sass-lint.git#849714ccf55b0b986d9e1fe5a4d361bb0d9c7ad3",
     "gulp-size": "2.1.0",
     "gulp-svgmin": "1.2.2",
+    "gulp-uglify": "2.0.0",
     "gulp-util": "3.0.7",
     "gulp-zip": "3.2.0",
     "js-yaml": "3.6.1",

src/scripts/vendor.js

@@ -0,0 +1,25 @@
+/*!
+ * lodash.core.min.js
+ */
+// =require vendor/lodash.core.min.js
+
+/*!
+ * modernizr.min.js
+ */
+// =require vendor/modernizr.min.js
+
+/*!
+ * jquery-2.2.3.min.js
+ */
+// =require vendor/jquery-2.2.3.min.js
+
+// Attempts to preserve comments that likely contain licensing information,
+// even if the comment does not have directives such as `@license` or `/*!`.
+//
+// Implemented via the [`uglify-save-license`](https://github.com/shinnn/uglify-save-license)
+// module, this option preserves a comment if one of the following is true:
+//
+// 1. The comment is in the *first* line of a file
+// 2. A regular expression matches the string of the comment.
+//    For example: `MIT`, `@license`, or `Copyright`.
+// 3. There is a comment at the *previous* line, and it matches 1, 2, or 3.

tasks/includes/config.js.ejs

@@ -36,7 +36,6 @@ var config = {
     root: 'src/',
     js: 'src/scripts/**/*.js',
     jsSections: 'src/sections/**/*.js',
-    vendorJs: 'src/scripts/vendor/*.js',
     json: 'src/**/*.json',
     css: 'src/styles/**/*.{scss,scss.liquid}',
     cssLint: 'src/styles/**/*.scss',
@@ -63,7 +62,8 @@ var config = {
   },
 
   roots: {
-    js: 'src/scripts/theme.js',
+    js: 'src/scripts/*.js',
+    vendorJs: 'src/scripts/vendor.js',
     css: 'src/styles/*.scss'
   },
 

tasks/js-build.js

@@ -1,5 +1,5 @@
 var gulp = require('gulp');
-var concat = require('gulp-concat');
+var uglify = require('gulp-uglify');
 var include = require('gulp-include');
 var plumber = require('gulp-plumber');
 var chokidar = require('chokidar');
@@ -10,26 +10,12 @@ var utils = require('./includes/utilities.js');
 
 var lintTask = config.enableLinting ? ['lint:js'] : [];
 
-/**
- * Concatenate JS together into a single file for use in the theme
- *
- * @function build:js
- * @memberof slate-cli.tasks.build
- * @static
- */
 gulp.task('build:vendor-js', function() {
   processVendorJs();
 });
 
-/**
- * watches js in src dir ...
- *
- * @function watch:js
- * @memberof slate-cli.tasks.watch
- * @static
- */
 gulp.task('watch:vendor-js', function() {
-  chokidar.watch(config.src.vendorJs, {ignoreInitial: true})
+  chokidar.watch(config.roots.vendorJs, {ignoreInitial: true})
   .on('all', function(event, path) {
     messages.logFileEvent(event, path);
     processVendorJs();
@@ -38,19 +24,23 @@ gulp.task('watch:vendor-js', function() {
 
 function processVendorJs() {
   messages.logProcessFiles('build:vendor-js');
-  return gulp.src(config.src.vendorJs)
+  return gulp.src(config.roots.vendorJs)
     .pipe(plumber(utils.errorHandler))
-    .pipe(concat('vendor.js'))
+    .pipe(include())
+    .pipe(uglify({
+      mangle: true,
+      compress: true,
+      preserveComments: 'license'
+    }))
     .pipe(gulp.dest(config.dist.assets));
 }
 
-
 gulp.task('build:js', lintTask, function() {
   processThemeJs();
 });
 
 gulp.task('watch:js', function() {
-  chokidar.watch(config.src.js, {ignoreInitial: true})
+  chokidar.watch([config.src.js, '!' + config.roots.vendorJs], {ignoreInitial: true})
   .on('all', function(event, path) {
     messages.logFileEvent(event, path);
     processThemeJs();
@@ -59,7 +49,7 @@ gulp.task('watch:js', function() {
 
 function processThemeJs() {
   messages.logProcessFiles('build:js');
-  return gulp.src(config.roots.js)
+  return gulp.src([config.roots.js, '!' + config.roots.vendorJs])
     .pipe(plumber(utils.errorHandler))
     .pipe(include())
     .pipe(gulp.dest(config.dist.assets));