🐙 add combine/minify JS task

.gitignore

@@ -10,3 +10,6 @@ node_modules
 # Sass
 .sass-cache
 css
+
+# JS pipeline
+js

_js/sample1.js

@@ -0,0 +1,11 @@
+/**
+ * This is an example JS file that will have its comments stripped out when it
+ * is minified.
+ */
+(function () {
+  var message1 = 'This message will appear in the minified file,';
+  var message2 = 'but the variable name will be changed.';
+
+  // console.log gets stripped out during minification
+  console.log(message1, message2);
+})();

_js/sample2.js

@@ -0,0 +1,10 @@
+/**
+ * This is a second JS file that will be combined with the other one.
+ */
+(function () {
+  var message1 = 'This is second JS file.';
+  var message2 = 'It has been combined with the first.';
+
+  // console.log gets stripped out during minification
+  console.log(message1, message2);
+})();

_layouts/page.html

@@ -48,5 +48,7 @@
     <main class="container">
       {{ content }}
     </main>
+
+    <script src="/js/all.min.js"></script>
   </body>
 </html>

gulpfile.js

@@ -14,6 +14,7 @@ var sass = require('gulp-sass');
 var concat = require('gulp-concat');
 var mincss = require('gulp-minify-css');
 var uncss = require('gulp-uncss');
+var uglify = require('gulp-uglify');
 
 // -----------------------------------------------------------------------------
 // Remove old CSS
@@ -98,6 +99,19 @@ gulp.task('uncss', function() {
     .pipe(gulp.dest('css/'));
 });
 
+// -----------------------------------------------------------------------------
+// Combine and Minify JS
+//
+// Just like the CSS task, the end result of this task is a minified aggregate
+// of JS ready to be served.
+// -----------------------------------------------------------------------------
+gulp.task('js', function() {
+  return gulp.src('_js/**/*.js')
+    .pipe(concat('all.min.js'))
+    .pipe(uglify())
+    .pipe(gulp.dest('js'));
+});
+
 // -----------------------------------------------------------------------------
 // Watch tasks
 //
@@ -107,6 +121,7 @@ gulp.task('uncss', function() {
 // -----------------------------------------------------------------------------
 gulp.task('watch', function() {
   gulp.watch('_sass/**/*.scss', ['css']);
+  gulp.watch('_js/**/*.js', ['js']);
 });
 
 // -----------------------------------------------------------------------------

js/.gitkeep

@@ -0,0 +1 @@
+# Gulp will generate JS in this directory

package.json

@@ -13,6 +13,7 @@
     "gulp-concat": "^2.5.2",
     "gulp-minify-css": "^1.0.0",
     "gulp-task-listing": "^1.0.0",
+    "gulp-uglify": "^1.2.0",
     "gulp-uncss": "^1.0.1"
   }
 }