#4: Refactoring

- Moving away from Grunt & Babel.
- JavaScript ES2015 and ES2015 modules
- JavaScript sourcemaps

assets/js/links.js

@@ -0,0 +1,32 @@
+import $ from 'jquery';
+import debug from 'debug';
+
+export function emptyLinks() {
+	const log   = debug('theme:emptyLinks');
+	const links = $('a[href=""], a[href="#"]').toArray();
+	log(`There are ${links.length} empty links on this page`, links);
+}
+
+export function externalLinks() {
+	const log    = debug('theme:externalLinks');
+	const $links = $('a[href]:not([target])').filter((i, link) => {
+		const href     = $(link).attr('href').trim();
+		const isEmpty  = href === '';
+		const isLocal  = href.indexOf(document.location.origin) === 0;
+		const isAnchor = href.indexOf('#') === 0;
+
+		if (isEmpty || isLocal || isAnchor) {
+			return false;
+		}
+
+		return true;
+	});
+
+	$links.attr('target', '_blank');
+	log(`There are ${$links.length} external links on this page`, $links);
+}
+
+export default {
+	emptyLinks   : emptyLinks,
+	externalLinks: externalLinks
+};

assets/js/site.js

@@ -1,25 +1,31 @@
-(function ($, $window, $document, $body, Site, Modernizr, _) {
+// external scripts
+import $ from 'jquery';
+import debug from 'debug';
 
-	$.extend(Site, {
-		// DOM ready code
-		init: function () {
+// example of ES2015 modules loading & tree shaking
+import { emptyLinks } from './links';
 
-		},
+const $window   = $(window);
+const $document = $(document);
 
-		// window on load code
-		load: function () {
+class Site {
+	constructor() {
+		$document.ready(() => this.domReady());
+		$window.on('load', () => this.windowLoad());
+	}
 
-		}
-	});
+	domReady() {
+		const log = debug('theme:domReady');
+		log('dom.ready');
+	}
 
-	// Make our namespace globally accessible
-	window.Site = Site;
+	windowLoad() {
+		const log = debug('theme:windowLoad');
+		log('window.onload');
 
-	// Run initialization script on DOM ready
-	$document.on('ready', Site.init);
+		// example of ES2015 modules loading & tree shaking
+		emptyLinks();
+	}
+}
 
-	// Defer scripts to window on load event
-	$window.on('load', Site.load);
-
-})(window.jQuery, window.jQuery(window), window.jQuery(document), window.jQuery(document.body), window.Site || {}, window.Modernizr, window._);
-//# sourceMappingURL=site.js.map
+export default Site;

gulpfile.js

@@ -0,0 +1,30 @@
+const gulp = require('gulp');
+const gp   = require('gulp-load-plugins')();
+
+gulp.task('rollup', function() {
+  const es2015 = require('rollup-plugin-buble');
+  const uglify = require('rollup-plugin-uglify');
+
+  gulp.src(__dirname + '/assets/js/site.js')
+    .pipe(gp.sourcemaps.init())
+    .pipe(gp.rollup({
+      format: 'umd',
+      globals: {
+        debug: 'debug',
+        jquery: 'jQuery',
+        modernizr: 'Modernizr'
+      },
+      moduleName: 'Site',
+      sourceMap: true,
+      plugins: [
+        es2015(),
+        uglify()
+      ]
+    }))
+    .pipe(gp.size({
+      showFiles: true,
+      title: 'JavaScript'
+    }))
+    .pipe(gp.sourcemaps.write('.'))
+    .pipe(gulp.dest(__dirname + '/assets/dist'));
+});

package.json

@@ -10,26 +10,19 @@
   "author": "The Web Development Group",
   "license": "MIT",
   "scripts": {
-    "bower": "bower",
-    "grunt": "grunt"
+    "gulp": "gulp"
   },
   "devDependencies": {
-    "babel-preset-es2015": "^6.1.18",
-    "bower": "^1.6.5",
-    "grunt": "^0.4.5",
-    "grunt-autoprefixer": "*",
-    "grunt-babel": "^6.0.0",
-    "grunt-cli": "^0.1.13",
-    "grunt-contrib-imagemin": "*",
-    "grunt-contrib-jshint": "*",
-    "grunt-contrib-watch": "*",
-    "grunt-lodash": "^0.5.0",
-    "grunt-lodash-autobuild": "^0.3.0",
-    "grunt-modernizr": "*",
-    "grunt-sass": "*",
-    "grunt-sass-globbing": "*",
-    "lodash-cli": "^3.10.1",
-    "node-bourbon": "^1.2.3",
-    "node-neat": "^1.7.2"
-  }
+    "babel-preset-es2015-rollup": "1.1.1",
+    "gulp": "3.9.1",
+    "gulp-cli": "1.2.1",
+    "gulp-load-plugins": "1.2.2",
+    "gulp-rollup": "1.8.0",
+    "gulp-size": "2.1.0",
+    "gulp-sourcemaps": "2.0.0-alpha",
+    "gulp-util": "3.0.7",
+    "rollup-plugin-buble": "0.6.0",
+    "rollup-plugin-uglify": "0.3.1"
+  },
+  "dependencies": {}
 }