refactor(gulp) change gulp <task>:env to gulp <task> --env

A necessary refactor for the upcomming devs (and it makes the gulp tasks faster and clearer to understand)
topheman · Aug 22, 2015 · 0be9352 · 0be9352
1 parent 160e9bb
commit 0be9352
Show file tree

Hide file tree

Showing 7 changed files with 104 additions and 121 deletions.
diff --git a/README.md b/README.md
@@ -41,8 +41,8 @@ NB: `gulp`, `jspm`, `karma` ... are all installed locally so if you don't want i
 You can launch your app in different modes (dev/prod/test):
 
 * `gulp serve` : **will launch a dev server**
-* `gulp serve:prod` : will launch the version of the site built in `build/dist` folder (need to `gulp build` before) - *usefull to check your site before deploying it*.
-* `gulp serve:test` : will launch a dev server with test configuration - *usefull to debug / create unit tests*:
+* `gulp serve --env prod` : will launch the version of the site built in `build/dist` folder (need to `gulp build` before) - *usefull to check your site before deploying it*.
+* `gulp serve --env test` : will launch a dev server with test configuration - *usefull to debug / create unit tests*:
 	* jspm configuration overridden by the `test/jspm.override.json` file
 	* the app will appear with "TEST" in background, thanks to `test/fixtures/bs.snippet.html` injected on the the fly (containing specific css)
 

diff --git a/gulp/tasks/html.js b/gulp/tasks/html.js
@@ -3,41 +3,30 @@
 import gulp from 'gulp';
 import htmlhint from 'gulp-htmlhint';
 import paths from '../paths';
+import {ENV} from '../utils.js';
 
 /**
- * Returns a htmlhint gulp task according to the env
- * @param {String} env "dev"|"test"
- * @returns {*}
+ * The 'htmlhint' task defines the rules of our hinter as well as which files we
+ * should check. It helps to detect errors and potential problems in our
+ * HTML code.
+ *
+ * Can also be executed in test env, like the jshint task
+ *
+ * @return {Stream}
  */
-function generateHtmlhintTask(env) {
+gulp.task('htmlhint', () => {
   var src;
-  switch (env.toLowerCase()) {
+  switch (ENV) {
     case 'test':
       src = [].concat(paths.app.html, paths.app.templates, paths.test.fixtures);
       break;
-    default: //(dev)
+    case 'dev':
+    default:
       src = [].concat(paths.app.html, paths.app.templates);
       break;
   }
   return gulp.src(src)
     .pipe(htmlhint('.htmlhintrc'))
     .pipe(htmlhint.reporter())
     .pipe(htmlhint.failReporter());
-}
-
-/**
- * The 'htmlhint' task defines the rules of our hinter as well as which files we
- * should check. It helps to detect errors and potential problems in our
- * HTML code.
- *
- * Can also be executed in test env, like the jshint task
- *
- * @return {Stream}
- */
-gulp.task('htmlhint:dev', () => {
-  return generateHtmlhintTask('dev');
-});
-gulp.task('htmlhint:test', () => {
-  return generateHtmlhintTask('test');
 });
-gulp.task('htmlhint', ['htmlhint:dev']);
diff --git a/gulp/tasks/scripts.js b/gulp/tasks/scripts.js
@@ -5,19 +5,23 @@ import gulp from 'gulp';
 import jshint from 'gulp-jshint';
 import cache from 'gulp-cache';
 
+import {ENV} from '../utils.js';
 import paths from '../paths';
 
 /**
- * Returns a jshint gulp task according to the env
- * @param {String} env "dev"|"test"
- * @returns {*}
+ * The 'jshint' task defines the rules of our hinter as well as which files
+ * we should check. It helps to detect errors and potential problems in our
+ * JavaScript code.
+ *
+ * It can be launched in test env (which will also hint all test related tasks)
  */
-function generateJshintTask(env = 'dev') {
+gulp.task('jshint', () => {
   var src;
-  switch (env.toLowerCase()) {
+  switch (ENV) {
     case 'test':
       src = [].concat(paths.app.scripts, paths.gulpfile, paths.test.config.karma, paths.test.config.e2e, paths.test.stubs, paths.test.unit, paths.test.e2e);
       break;
+    case 'dev':
     default:
       src = [].concat(paths.app.scripts, paths.gulpfile, paths.test.config.karma, paths.test.config.e2e);
       break;
@@ -26,23 +30,7 @@ function generateJshintTask(env = 'dev') {
     .pipe(jshint('.jshintrc'))
     .pipe(jshint.reporter('jshint-stylish'))
     .pipe(jshint.reporter('fail'));
-}
-
-/**
- * The 'jshint' task defines the rules of our hinter as well as which files
- * we should check. It helps to detect errors and potential problems in our
- * JavaScript code.
- *
- * It can be launched in test env (which will also hint all test related tasks)
- * Those tasks are splitted for performance
- */
-gulp.task('jshint:dev', () => {
-  return generateJshintTask('dev');
-});
-gulp.task('jshint:test', () => {
-  return generateJshintTask('test');
 });
-gulp.task('jshint', ['jshint:dev']);
 
 /**
  * Create JS production bundle.

diff --git a/gulp/tasks/server.js b/gulp/tasks/server.js
@@ -7,15 +7,15 @@ import browserSync from 'browser-sync';
 
 import jspmOverride from '../../test/jspm.override.json';
 
-import {COLORS,LOG,SERVER_PORT,OPEN} from '../utils.js';
+import {COLORS,LOG,SERVER_PORT,OPEN,ENV} from '../utils.js';
 
 import {DEFAULT_SERVER_PORT} from '../const.js';
 
 import path from '../paths';
 
 function infos(env) {
-  LOG(COLORS.yellow('[INFOS] call `gulp serve:' + env + ' --port 9002` (for example) to launch on another port'));
-  LOG(COLORS.yellow('[INFOS] call `gulp serve:' + env + ' --disable-watch` if you don\'t need it'));
+  LOG(COLORS.yellow('[INFOS] call `gulp serve --env ' + env + ' --port 9002` (for example) to launch on another port'));
+  LOG(COLORS.yellow('[INFOS] call `gulp serve --env ' + env + ' --disable-watch` if you don\'t need it'));
 }
 
 //=============================================
@@ -106,28 +106,35 @@ function startBrowserSync(env, baseDir, options = {}) {
 //=============================================
 
 /**
- * The 'serve' task serve the dev environment.
- */
-gulp.task('serve:dev', ['sass', 'watch:dev'], () => {
-  infos('dev');
-  startBrowserSync('dev', ['.tmp', 'src', 'jspm_packages', './'], {port: SERVER_PORT, open: OPEN});
-});
-gulp.task('serve', ['serve:dev']);
-
-/**
- * The 'serve' task adding the overrides to the jspm configuration for mocks and stubs
+ * The 'serve' task. run `gulp serve --env dev/prod/test`
  *
- * This is for dev purpose of the tests. Launch the tests with `npm test` or `npm test-unit`
- */
-gulp.task('serve:test', ['sass', 'watch:test'], () => {
-  infos('test');
-  startBrowserSync('test', ['.tmp', 'src', 'jspm_packages', './'], {port: SERVER_PORT, open: OPEN});
-});
-
-/**
- * The 'serve' task serve the prod environment (you need to build before)
+ * Pass the env dev/prod/test via the --env flag
+ *
+ * - dev: runs a dev server with livereload/watch
+ * - test: runs a test server with livereload/watch (over the test also)
+ * - prod: serves the `build/dist` folder
  */
-gulp.task('serve:prod', () => {
-  infos('prod');
-  startBrowserSync('prod', ['./build/dist'], {port: SERVER_PORT, open: OPEN});
+var gulpServeDependencyTasks;
+switch(ENV){
+  case 'prod':
+    gulpServeDependencyTasks = [];
+    break;
+  case 'test':
+  case 'dev':
+    gulpServeDependencyTasks = ['sass', 'watch'];
+    break;
+}
+gulp.task('serve', gulpServeDependencyTasks, () => {
+  infos(ENV);
+  switch(ENV){
+    case 'prod':
+      startBrowserSync('prod', ['./build/dist'], {port: SERVER_PORT, open: OPEN});
+      break;
+    case 'test':
+      startBrowserSync('test', ['.tmp', 'src', 'jspm_packages', './'], {port: SERVER_PORT, open: OPEN});
+      break;
+    case 'dev':
+      startBrowserSync('dev', ['.tmp', 'src', 'jspm_packages', './'], {port: SERVER_PORT, open: OPEN});
+      break;
+  }
 });
diff --git a/gulp/tasks/watch.js b/gulp/tasks/watch.js
@@ -4,68 +4,56 @@ import gulp from 'gulp';
 import util from 'gulp-util';
 import browserSync from 'browser-sync';
 
-import {COLORS,LOG} from '../utils.js';
+import {COLORS,LOG,ENV} from '../utils.js';
 
 import paths from '../paths';
 
 import {DISABLE_WATCH} from '../utils.js';
 
-function setupBasicGulpWatch() {
-  // Watch images and fonts files
-  gulp.watch([paths.app.images, paths.app.fonts], [browserSync.reload]);
-
-  // Watch css files
-  return gulp.watch(paths.app.styles, ['sass', browserSync.reload]);//if takes to long, take a look at https://github.com/Browsersync/recipes/tree/master/recipes/gulp.task.sequence
-}
-
-function getGulpWatchJs(env = 'dev') {
-  var src;
-  switch (env.toLowerCase()) {
-    case 'test':
-      src = [].concat(paths.app.scripts, paths.gulpfile, paths.test.config.karma, paths.test.config.e2e, paths.test.stubs, paths.test.unit, paths.test.e2e);
-      break;
-    default:
-      src = [].concat(paths.app.scripts, paths.gulpfile);
-      break;
-  }
-  return gulp.watch(src, ['jshint:' + env, browserSync.reload]);
-}
-
-function getGulpWatchHtml(env = 'dev') {
-  var src;
-  switch (env.toLowerCase()) {
-    case 'test':
-      src = [].concat(paths.app.html, paths.app.templates, paths.test.fixtures);
-      break;
-    default:
-      src = [].concat(paths.app.html, paths.app.templates);
-      break;
-  }
-  return gulp.watch(src, ['jshint:' + env, browserSync.reload]);
-}
-
 /**
  * The 'watch' task set up the checks to see if any of the files listed below
  * change, and then to execute the listed tasks when they do.
  *
  * According to the env it's launched to, it won't watch the same files (in test, will watch more files)
  */
-gulp.task('watch:dev', () => {
-  if(DISABLE_WATCH){
+gulp.task('watch', () => {
+  if (DISABLE_WATCH) {
     LOG(COLORS.yellow('[INFOS] watch is disabled'));
     return;
   }
-  setupBasicGulpWatch();
-  getGulpWatchJs('dev');
-  getGulpWatchHtml('dev');
-});
-gulp.task('watch:test', () => {
-  if(DISABLE_WATCH){
-    LOG(COLORS.yellow('[INFOS] watch is disabled'));
-    return;
+  // Watch images and fonts files
+  gulp.watch([paths.app.images, paths.app.fonts], [browserSync.reload]);
+
+  // Watch css files
+  gulp.watch(paths.app.styles, ['sass', browserSync.reload]);//if takes to long, take a look at https://github.com/Browsersync/recipes/tree/master/recipes/gulp.task.sequence
+
+  // Create the html list of file to watch according to env
+  if (ENV !== 'prod') {
+    var htmlFileList;
+    switch(ENV){
+      case 'test':
+        htmlFileList = [].concat(paths.app.html, paths.app.templates, paths.test.fixtures);
+        break;
+      case 'dev':
+        htmlFileList = [].concat(paths.app.html, paths.app.templates);
+        break;
+    }
+
+    // Create the js list of file to watch according to env
+    var jsFileList;
+    switch(ENV){
+      case 'test':
+        jsFileList = [].concat(paths.app.scripts, paths.gulpfile, paths.test.config.karma, paths.test.config.e2e, paths.test.stubs, paths.test.unit, paths.test.e2e);
+        break;
+      case 'dev':
+        jsFileList = [].concat(paths.app.scripts, paths.gulpfile);
+        break;
+    }
+
+    // Watch html files
+    gulp.watch(htmlFileList, ['htmlhint', browserSync.reload]);
+
+    // Watch js files
+    gulp.watch(jsFileList, ['jshint', browserSync.reload]);
   }
-  setupBasicGulpWatch();
-  getGulpWatchJs('test');
-  getGulpWatchHtml('test');
 });
-gulp.task('watch', ['watch:dev']);
diff --git a/gulp/utils.js b/gulp/utils.js
@@ -15,3 +15,14 @@ export const OPEN = util.env.open === 'false' ? false : true;
 
 //launch your task with `--disable-watch` for example
 export const DISABLE_WATCH = util.env['disable-watch'];
+
+var environment = (util.env.env || 'dev').toLowerCase();
+if (environment === true) {
+  environment = 'dev';
+}
+else if (['dev', 'prod', 'test'].indexOf(environment) === -1) {
+  throw new Error('--env flag only accepts dev/prod/test')
+}
+LOG(COLORS.yellow('### Running in ' + environment + ' ###'));
+
+export const ENV = environment;
diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "start": "./node_modules/.bin/gulp serve",
-    "test": "./node_modules/.bin/gulp jshint:test && ./node_modules/.bin/gulp htmlhint:test && ./node_modules/.bin/karma start --single-run --browsers PhantomJS --captureConsole false",
+    "test": "./node_modules/.bin/gulp jshint --env test && ./node_modules/.bin/gulp htmlhint --env test && ./node_modules/.bin/karma start --single-run --browsers PhantomJS --captureConsole false",
     "test-unit": "./node_modules/.bin/karma start",
     "postinstall": "./node_modules/.bin/jspm install",
     "test-build": "./bin/test-build.sh",