Added support for TS and ES2015

CHANGELOG.MD

@@ -1,4 +1,8 @@
 * 0.0.8
+  * added support for both TypeScript and ES2015
+    * changed back the way the build is organized
+      * TS > ES5
+      * ES2015 > ES5
   * removed unnecessary package.json validation
 * 0.0.7
   * Fixed an npm publish issue (configured files and folders to include and exclude from the page)

TODO.md

@@ -1,4 +1,5 @@
-* add support for ES2015 AND TypeScript
+* remove the gen-ts-refs task once everything needed is available in TS
+* remove the BrowserSync reload in scripts-javascript and scripts-typescript if it does it twice
 * fill-in File organization section
   * how to organize app code and components
   * distinction between components and pages
@@ -7,6 +8,8 @@
 * review: https://github.com/areusjs/load-common-gulp-tasks
   * eval possibility to reuse
 * provide a way for client projects to override some parts of the configuration
+  * e.g., should hot reloading be enabled for images, ...
+  * e.g., enable/disable TS support
 * reusable build scripts
   * implement a solution to make useful scripts reusable
   * examples: npm run scripts in midnightLightV2
@@ -21,6 +24,10 @@
   * customize behavior (e.g., logging)
 * refactor own build to mimic the task loading mechanism & reuse code
 * add npm shrinkwrap
+* update jscs: https://www.npmjs.com/package/jscs
+  * reqVarDeclFirst
 * make TypeScript optional
-* make SystemJS/JSPM optional (quid bundling)
+* make JSPM optional (quid bundling)
 * add shields: http://shields.io/
+* make sure that minification is enabled for prod
+* ensure that no errors are raised if there are no TS files in the project and no tsconfig.json

gulp/config.js

@@ -39,7 +39,7 @@ let javascript = {
 	dest: folders.dist
 };
 
-module.exports = {
+export default {
 	extensions,
 	folders,
 	globs,

gulp/utils.js

@@ -81,7 +81,7 @@ let filterEmptyDirectories = function(es){
 	});
 };
 
-module.exports = {
+export default {
 	exclude,
 	reportError,
 	plumbedSrc,

package.json

@@ -1,15 +1,15 @@
 {
   "name": "modern-web-dev-build",
   "description": "Modern Web Development Build.",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "author": {
 	"name": "Sebastien Dubois",
 	"email": "[email protected]",
 	"url": "https://www.dsebastien.net/"
    },
   "contributors": [
   ],
-  "homepage": "http://www.dsebastien.net",
+  "homepage": "https://www.dsebastien.net",
   "private": false,
   "license": "MIT",
   "bugs": "https://github.com/dsebastien/modernWebDevBuild/issues",

src/gulp/abstractTaskLoader.js

@@ -4,7 +4,7 @@ import utils from "./utils";
  * Base abstract class for task loaders.
  * Reference: http://stackoverflow.com/questions/29480569/does-ecmascript-6-have-a-convention-for-abstract-classes
  */
-class AbstractTaskLoader {
+export default class AbstractTaskLoader {
 	constructor(){
 		"use strict";
 
@@ -25,5 +25,3 @@ class AbstractTaskLoader {
 		utils.validateGulpObjectIsConfigured(gulp);
 	}
 }
-
-module.exports = AbstractTaskLoader;

src/gulp/config.js

@@ -53,7 +53,7 @@ let webServerFolders = {
 	dev: [
 		// the order IS important. Folders above have precedence
 		folders.root, // necessary to have jspm_packages & jspm config file without needing a copy step
-		folders.temp, // before app so that ES5 code emitted by Babel takes precedence over ES2015 code emitted by TS in the app folder
+		folders.temp, // before app so that ES5 code emitted by TypeScript/Babel takes precedence over ES2015 code that might be written in the app folder
 		folders.app
 	],
 	dist: [
@@ -82,7 +82,7 @@ let typescript = {
 	srcAppOnly: [
 		folders.app + globs.scripts.typescript
 	],
-	dest: folders.app // because we now emit ES2015 instead of ES5; Babel then takes that as input and emits ES5 code under the temp folder
+	dest: folders.temp // ES5 code is emitted in the temp folder
 };
 
 let styles = {
@@ -154,7 +154,7 @@ let minifyCss = { // https://www.npmjs.com/package/gulp-minify-g
 	aggressiveMerging: false // necessary because it breaks PureCSS
 };
 
-module.exports = {
+export default {
 	extensions,
 	folders,
 	globs,

src/gulp/tasks/clean.js

@@ -12,8 +12,6 @@ class CleanTaskLoader extends AbstractTaskLoader {
 
 		gulp.task("clean", "Clean output directories",
 			del.bind(null, [
-					config.folders.app + config.globs.scripts.javascript, // TS emits ES2015 code under app but that output is transient
-					config.folders.app + config.globs.sourcemaps,
 					config.folders.temp,
 					config.folders.dist + config.globs.any
 				], {

src/gulp/tasks/default.js

@@ -26,13 +26,14 @@ class DefaultTaskLoader extends AbstractTaskLoader {
 		gulp.task("prepare-default", "Do all the necessary preparatory work for the default task", [
 				"clean",
 				"ts-lint",
-				"gen-ts-refs"
-
-				//"check-js-style",
-				//"check-js-quality"
+				"gen-ts-refs",
+				"check-js-style",
+				"check-js-quality"
 			], (callback) =>{
-				return runSequence("scripts-typescript",
-					[ "scripts-javascript" ],
+				return runSequence([
+						"scripts-typescript",
+						"scripts-javascript"
+					],
 					callback);
 			}
 		);

src/gulp/tasks/scripts-javascript-to-es5.js

@@ -0,0 +1,33 @@
+"use strict";
+
+import AbstractTaskLoader from "../abstractTaskLoader";
+//import config from "../config";
+//import utils from "../utils";
+
+import browserSync from "browser-sync";
+
+class ScriptsJavaScriptToES5TaskLoader extends AbstractTaskLoader {
+	registerTask(gulp){
+		super.registerTask(gulp);
+
+		let runSequence = require("run-sequence");
+
+		runSequence = runSequence.use(gulp); // needed to bind to the correct gulp object (alternative is to pass gulp to runSequence as first argument)
+
+		gulp.task("scripts-javascript-to-es5", "Transpile JavaScript to ES5 and reload the browser (this task should only be called during serve)", () =>{
+			runSequence("prepare-scripts-javascript-to-es5", browserSync.reload); // here we need to ensure that all the other tasks are done before we ask BrowserSync to reload
+		});
+
+		gulp.task("prepare-scripts-javascript-to-es5", "Transpile JavaScript to ES5 and generate sourcemaps", [
+			"check-js-style",
+			"check-js-quality"
+		], (callback) =>{
+			return runSequence(
+				"scripts-javascript",
+				[],
+				callback);
+		});
+	}
+}
+
+export default new ScriptsJavaScriptToES5TaskLoader();

src/gulp/tasks/scripts-javascript.js

@@ -71,4 +71,4 @@ class ScriptsJavaScriptTaskLoader extends AbstractTaskLoader {
 	}
 }
 
-module.exports = new ScriptsJavaScriptTaskLoader();
+export default new ScriptsJavaScriptTaskLoader();

src/gulp/tasks/scripts-typescript-to-es5.js

@@ -11,22 +11,20 @@ class ScriptsTypeScriptToES5TaskLoader extends AbstractTaskLoader {
 		super.registerTask(gulp);
 
 		let runSequence = require("run-sequence");
-		
+
 		runSequence = runSequence.use(gulp); // needed to bind to the correct gulp object (alternative is to pass gulp to runSequence as first argument)
 
 		gulp.task("scripts-typescript-to-es5", "Transpile TypeScript to ES5 and reload the browser (this task should only be called during serve)", () =>{
 			runSequence("prepare-scripts-typescript-to-es5", browserSync.reload); // here we need to ensure that all the other tasks are done before we ask BrowserSync to reload
 		});
 
-		gulp.task("prepare-scripts-typescript-to-es5", "Transpile TypeScript to ES2015 and use Babel to transpile to ES5 and generate sourcemaps", [
+		gulp.task("prepare-scripts-typescript-to-es5", "Transpile TypeScript to ES5 and generate sourcemaps", [
 			"ts-lint",
 			"gen-ts-refs"
-			//"check-js-style",
-			//"check-js-quality"
 		], (callback) =>{
-			return runSequence("scripts-typescript", [
-				"scripts-javascript"
-			], callback);
+			return runSequence(
+				"scripts-typescript",
+				callback);
 		});
 	}
 }

src/gulp/tasks/scripts-typescript.js

@@ -14,7 +14,7 @@ class ScriptsTypeScriptTaskLoader extends AbstractTaskLoader {
 	registerTask(gulp){
 		super.registerTask(gulp);
 
-		gulp.task("scripts-typescript", "Transpile TypeScript to ES2015, include references to library and app .d.ts files and generate sourcemaps", () =>{
+		gulp.task("scripts-typescript", "Transpile TypeScript to ES5, include references to library and app .d.ts files and generate sourcemaps", () =>{
 			// references:
 			// https://www.npmjs.com/package/gulp-typescript
 			let tsProject = ts.createProject("tsconfig.json", {
@@ -37,11 +37,12 @@ class ScriptsTypeScriptTaskLoader extends AbstractTaskLoader {
 
 			return tsResult.js
 
-				.pipe(sourcemaps.write(".", { // use "." to write the sourcemap to a separate file in the same dir
+				.pipe(sourcemaps.write({ // use "." to write the sourcemap to a separate file in the same dir
 					// sourcemaps need to be written to separate files otherwise Babel freaks out (!)
 					includeContent: false, // alternative: include the contents and remove sourceRoot. Avoids issues but prevents from editing the sources directly in the browser
 					sourceRoot: "/" // use an absolute path because we have scripts in different subpaths
 				}))
+
 				// Output files
 				.pipe(gulp.dest(config.typescript.dest))
 

src/gulp/tasks/serve.js

@@ -52,6 +52,9 @@ class ServeTaskLoader extends AbstractTaskLoader {
 			gulp.watch(config.typescript.srcAppOnly, [
 				"scripts-typescript-to-es5"
 			]); // TypeScript changes will force a reload
+			gulp.watch(config.javascript.src, [
+				"scripts-javascript-to-es5"
+			]); // JavaScript changes will force a reload
 			gulp.watch(config.images.src, browserSync.reload); // image changes will force a reload
 		};
 
@@ -62,12 +65,12 @@ class ServeTaskLoader extends AbstractTaskLoader {
 		gulp.task("prepare-serve", "Do all the necessary preparatory work for the serve task", [
 			"clean",
 			"ts-lint",
-			"gen-ts-refs"
-
-			//"check-js-style",
-			//"check-js-quality"
+			"gen-ts-refs",
+			"check-js-style",
+			"check-js-quality"
 		], (callback) =>{
-			return runSequence("scripts-typescript", [
+			return runSequence([
+				"scripts-typescript",
 				"scripts-javascript",
 				"styles",
 				"validate-package-json"

src/gulp/utils.js

@@ -91,7 +91,7 @@ let validateArgument = (arg, errorMessage) =>{
 	errorMessage = errorMessage || "the provided argument cannot be null or undefined!";
 
 	if(arg === null || arg === undefined){
-		throw new Error(errorMessage);
+		throw new TypeError(errorMessage);
 	}
 };
 
@@ -144,7 +144,7 @@ let configureGulpObject = obj =>{
 	return configuredGulpObject;
 };
 
-module.exports = {
+export default {
 	exclude,
 	reportError,
 	filterEmptyDirectories,

src/index.js

@@ -51,4 +51,4 @@ class TasksLoader {
 	}
 }
 
-module.exports = new TasksLoader();
+export default new TasksLoader();