showcase: gulp wiredep task

diff --git a/angularjs/showcase/gulp.config.js b/angularjs/showcase/gulp.config.js
index 349bec4..fd98db1 100644 (file)
--- a/angularjs/showcase/gulp.config.js
+++ b/angularjs/showcase/gulp.config.js
@@ -1,23 +1,44 @@
 module.exports = function() {
-
+  var main = './src/showcase/';
+  var app = main + 'app/';
+  var bower = {
+    json: require('./bower.json'),
+    directory: './bower_components/',
+    ignorePath: '../..'
+  };
   var config = {
-    javaScriptFiles: [
+    main: main,
+    jsAllFiles: [
         './src/**/*.js',
         './*.js'
     ],
+    jsFilesWithoutSpecs: [
+      app + '**/*.module.js',
+      app + '**/*.js',
+      '!' + app + '**/*.spec.js'
+    ],
+    jsFilesStubs: [
+      bower.directory + 'angular-mocks/angular-mocks.js',
+      main + 'stubs/**/*.js'
+    ],
+    index: main + 'index.html',
     jshintConfigurationFile: '.jshintrc',
     jscsConfigurationFile: '.jscsrc'
   };
 
   config.getWiredepDefaultOptions = function() {
-    var options = {
-      bowerJson: config.bower.json,
-      directory: config.bower.directory,
-      ignorePath: config.bower.ignorePath
+    return {
+      // The directory of your Bower packages. default: '.bowerrc'.directory || bower_components
+      bowerJson: bower.json,
+      // Your bower.json file contents. default: require('./bower.json')
+      directory: bower.directory,
+      // string or regexp to ignore from the injected filepath
+      ignorePath: bower.ignorePath,
+      dependencies: true,     // default: true
+      devDependencies: false, // default: false
+      includeSelf: false      // default: false
     };
-    return options;
   };
 
-
   return config;
 };

diff --git a/angularjs/showcase/gulpfile.js b/angularjs/showcase/gulpfile.js
index d44c5c9..c9ee560 100644 (file)
--- a/angularjs/showcase/gulpfile.js
+++ b/angularjs/showcase/gulpfile.js
@@ -14,6 +14,7 @@ var plugins = require('gulp-load-plugins')({
  * Arguments:
  *
  * --verbose  : Various tasks will produce more output to the console.
+ * --stubs    : Using stubs in index.html (for mocking services, controllers or any other stuff)
  */
 
 gulp.task('help', plugins.taskListing);
@@ -28,7 +29,7 @@ gulp.task('vet', function() {
 
   plugins.util.log(plugins.util.colors.blue('Checking source with JSHint and JSCS'));
 
-  return gulp.src(config.javaScriptFiles)
+  return gulp.src(config.jsAllFiles)
     .pipe(plugins.if(args.verbose, plugins.print()))
     .pipe(plugins.jshint(config.jshintConfigurationFile))
     .pipe(plugins.jshint.reporter('jshint-stylish', {verbose: true}))
@@ -41,17 +42,34 @@ gulp.task('vet', function() {
 
 gulp.task('wiredep', function() {
 
-  plugins.util.log('Wiring the bower dependencies into the html');
+  plugins.util.log('Wiring bower dependencies into html');
 
   var wiredep = require('wiredep').stream;
-  var options = config.getWiredepDefaultOptions();
+  var wiredepOptions = config.getWiredepDefaultOptions();
 
-  // Only include stubs if flag is enabled
-  var js = args.stubs ? [].concat(config.js, config.stubsjs) : config.js;
+  var jsFiles = args.stubs ? [].concat(config.jsFilesWithoutSpecs, config.jsFilesStubs) : config.jsFilesWithoutSpecs;
 
-  return gulp
-    .src(config.index)
-    .pipe(wiredep(options))
-    .pipe(inject(js, '', config.jsOrder))
-    .pipe(gulp.dest(config.client));
+  return gulp.src(config.index)
+    .pipe(wiredep(wiredepOptions))
+    .pipe(inject(jsFiles, ''))
+    .pipe(gulp.dest(config.main));
 });
+
+/**
+ * @description
+ * Inject files in a sorted sequence at a specified inject label.
+ *
+ * @param {Array} source Source files (glob patterns)
+ * @param {string=} label The label name to be used by gulp-inject.
+ * @returns {Stream} The stream.
+ */
+function inject(source, label) {
+  var options = {relative: false};
+  if (label) {
+    options.name = 'inject:' + label;
+  }
+
+  return plugins.inject(
+    gulp.src(source)
+      .pipe(plugins.angularFilesort(), options));
+}
\ No newline at end of file

diff --git a/angularjs/showcase/package.json b/angularjs/showcase/package.json
index 9b765a9..c6282dc 100644 (file)
--- a/angularjs/showcase/package.json
+++ b/angularjs/showcase/package.json
@@ -6,10 +6,13 @@
     "express": "~4.13.3",
     "express-http-proxy": "~0.6.0",
     "gulp": "~3.9.0",
+    "gulp-angular-filesort": "~1.1.1",
     "gulp-if": "~1.2.5",
+    "gulp-inject": "~1.5.0",
     "gulp-jscs": "~2.0.0",
     "gulp-jshint": "~1.11.2",
     "gulp-load-plugins": "~1.0.0-rc.1",
+    "gulp-order": "~1.1.1",
     "gulp-print": "~1.1.0",
     "gulp-task-listing": "~1.0.1",
     "gulp-useref": "~1.3.0",

diff --git a/angularjs/showcase/src/showcase/index.html b/angularjs/showcase/src/showcase/index.html
index 0ff5580..6db5d71 100644 (file)
--- a/angularjs/showcase/src/showcase/index.html
+++ b/angularjs/showcase/src/showcase/index.html
@@ -7,51 +7,58 @@
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 
 
-    <!-- Using wiredep for filling up index.html file with bower dependencies (no devDependencies) by means of tags: bower:css/bower:js/-->
-    <!-- Using gulp-useref for combining css and js files by means of the found tags in index.html file: build:css/build:js/build:remove -->
+    <!--
+    * Using wiredep for filling up index.html file with bower dependencies (no devDependencies) by means of tags:
+    bower:css/bower:js/
 
+    * Using gulp-inject for filling up index.html file with the required files for this application by means of tags:
+    inject:css/inject:js/inject:templates:js
+
+    * Using gulp-useref for combining css and js files by means of the found tags in index.html file:
+    build:css/build:js/build:remove
+    -->
 
     <!-- Vendor styles -->
-    <!-- build:css(.) styles/vendor.css -->
+    <!-- build:css(.) styles/lib.css -->
     <!-- bower:css -->
-    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css" />
-    <link rel="stylesheet" href="../bower_components/font-awesome/css/font-awesome.css" />
+    <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.css" />
+    <link rel="stylesheet" href="/bower_components/font-awesome/css/font-awesome.css" />
     <!-- endbower -->
     <!-- endbuild -->
 
     <!-- Custom styles -->
-    <!-- build:css(.tmp) styles/main.css -->
+    <!-- build:css(.tmp) styles/app.css -->
+    <!-- inject:css -->
+    <!-- endinject -->
     <!-- endbuild -->
 
 
 
     <!-- Vendor JavaScript -->
-    <!-- build:js(.) scripts/vendor.js -->
+    <!-- build:js(.) js/lib.js -->
     <!-- bower:js -->
-    <script src="../bower_components/angular/angular.js"></script>
-    <script src="../bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
-    <script src="../bower_components/angular-translate/angular-translate.js"></script>
-    <script src="../bower_components/angular-ui-router/release/angular-ui-router.js"></script>
-    <script src="../bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>
-    <script src="../bower_components/jquery/dist/jquery.js"></script>
-    <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
+    <script src="/bower_components/angular/angular.js"></script>
+    <script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
+    <script src="/bower_components/angular-translate/angular-translate.js"></script>
+    <script src="/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
+    <script src="/bower_components/oclazyload/dist/ocLazyLoad.min.js"></script>
+    <script src="/bower_components/jquery/dist/jquery.js"></script>
+    <script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
     <!-- endbower -->
     <!-- endbuild -->
 
 
     <!-- Custom JavaScript -->
-    <!-- build:js({.tmp,app}) scripts/showcase.js -->
-    <script src="app.module.js"></script>
-    <script src="app.config.js"></script>
+    <!-- build:js({.tmp,app}) js/app.js -->
+    <!-- inject:js -->
+    <script src="/src/showcase/app/welcome/welcome.controller.js"></script>
+    <script src="/src/showcase/app/app.module.js"></script>
+    <script src="/src/showcase/app/app.config.js"></script>
+    <!-- endinject -->
+
+    <!-- inject:templates:js -->
+    <!-- endinject -->
     <!-- endbuild -->
-
-
-
-    <!-- build:remove -->
-    <!-- MOCKS -->
-    <!-- MOCKS END -->
-    <!-- endbuild -->
-
   </head>