feat(app): use grunt-bower-install for dep management

Closes #497
yeoman · Dec 13, 2013 · ba7b505 · ba7b505
1 parent f2d5744
commit ba7b505
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 74 deletions.
diff --git a/app/index.js b/app/index.js
@@ -1,9 +1,11 @@
 'use strict';
+var fs = require('fs');
 var path = require('path');
 var util = require('util');
 var angularUtils = require('../util.js');
-var spawn = require('child_process').spawn;
 var yeoman = require('yeoman-generator');
+var chalk = require('chalk');
+var wiredep = require('wiredep');
 
 
 var Generator = module.exports = function Generator(args, options) {
@@ -66,7 +68,10 @@ var Generator = module.exports = function Generator(args, options) {
   });
 
   this.on('end', function () {
-    this.installDependencies({ skipInstall: this.options['skip-install'] });
+    this.installDependencies({
+      skipInstall: this.options['skip-install'],
+      callback: this._injectDependencies.bind(this)
+    });
 
     var enabledComponents = [];
 
@@ -97,9 +102,10 @@ var Generator = module.exports = function Generator(args, options) {
         ].concat(enabledComponents)
       }
     });
+
   });
 
-  this.pkg = JSON.parse(this.readFileAsString(path.join(__dirname, '../package.json')));
+  this.pkg = require('../package.json');
 };
 
 util.inherits(Generator, yeoman.generators.Base);
@@ -213,78 +219,18 @@ Generator.prototype.readIndex = function readIndex() {
 // Waiting a more flexible solution for #138
 Generator.prototype.bootstrapFiles = function bootstrapFiles() {
   var sass = this.compassBootstrap;
-  var files = [];
   var source = 'styles/' + ( sass ? 's' : '' ) + 'css/';
+  var dest = 'app/styles/';
+  var mainFile = 'main.' + (sass ? 's' : '') + 'css';
 
   if (this.bootstrap && !sass) {
-    files.push('bootstrap.css');
     this.copy('fonts/glyphicons-halflings-regular.eot', 'app/fonts/glyphicons-halflings-regular.eot');
     this.copy('fonts/glyphicons-halflings-regular.ttf', 'app/fonts/glyphicons-halflings-regular.ttf');
     this.copy('fonts/glyphicons-halflings-regular.svg', 'app/fonts/glyphicons-halflings-regular.svg');
     this.copy('fonts/glyphicons-halflings-regular.woff', 'app/fonts/glyphicons-halflings-regular.woff');
   }
 
-  files.push('main.' + (sass ? 's' : '') + 'css');
-
-  files.forEach(function (file) {
-    this.copy(source + file, 'app/styles/' + file);
-  }.bind(this));
-
-  this.indexFile = this.appendFiles({
-    html: this.indexFile,
-    fileType: 'css',
-    optimizedPath: 'styles/main.css',
-    sourceFileList: files.map(function (file) {
-      return 'styles/' + file.replace('.scss', '.css');
-    }),
-    searchPath: ['.tmp', 'app']
-  });
-};
-
-Generator.prototype.bootstrapJS = function bootstrapJS() {
-  if (!this.bootstrap) {
-    return;  // Skip if disabled.
-  }
-
-  // Wire Twitter Bootstrap plugins
-  this.indexFile = this.appendScripts(this.indexFile, 'scripts/plugins.js', [
-    'bower_components/sass-bootstrap/js/affix.js',
-    'bower_components/sass-bootstrap/js/alert.js',
-    'bower_components/sass-bootstrap/js/button.js',
-    'bower_components/sass-bootstrap/js/carousel.js',
-    'bower_components/sass-bootstrap/js/transition.js',
-    'bower_components/sass-bootstrap/js/collapse.js',
-    'bower_components/sass-bootstrap/js/dropdown.js',
-    'bower_components/sass-bootstrap/js/modal.js',
-    'bower_components/sass-bootstrap/js/scrollspy.js',
-    'bower_components/sass-bootstrap/js/tab.js',
-    'bower_components/sass-bootstrap/js/tooltip.js',
-    'bower_components/sass-bootstrap/js/popover.js'
-  ]);
-};
-
-Generator.prototype.extraModules = function extraModules() {
-  var modules = [];
-  if (this.resourceModule) {
-    modules.push('bower_components/angular-resource/angular-resource.js');
-  }
-
-  if (this.cookiesModule) {
-    modules.push('bower_components/angular-cookies/angular-cookies.js');
-  }
-
-  if (this.sanitizeModule) {
-    modules.push('bower_components/angular-sanitize/angular-sanitize.js');
-  }
-
-  if (this.routeModule) {
-    modules.push('bower_components/angular-route/angular-route.js');
-  }
-
-  if (modules.length) {
-    this.indexFile = this.appendScripts(this.indexFile, 'scripts/modules.js',
-        modules);
-  }
+  this.copy(source + mainFile, dest + mainFile);
 };
 
 Generator.prototype.appJs = function appJs() {
@@ -313,3 +259,23 @@ Generator.prototype.imageFiles = function () {
   this.sourceRoot(path.join(__dirname, 'templates'));
   this.directory('images', 'app/images', true);
 }
+
+Generator.prototype._injectDependencies = function _injectDependencies() {
+  var howToInstall =
+    '\nAfter running `npm install & bower install`, inject your front end dependencies into' +
+    '\nyour HTML by running:' +
+    '\n' +
+    chalk.yellow.bold('\n  grunt bower-install');
+
+  if (this.options['skip-install']) {
+    console.log(howToInstall);
+  } else {
+    wiredep({
+      directory: 'app/bower_components',
+      bowerJson: JSON.parse(fs.readFileSync('./bower.json')),
+      ignorePath: 'app/',
+      htmlFile: 'app/index.html',
+      cssPattern: '<link rel="stylesheet" href="{{filePath}}">'
+    });
+  }
+}
diff --git a/package.json b/package.json
@@ -22,7 +22,9 @@
     "test": "mocha"
   },
   "dependencies": {
-    "yeoman-generator": "~0.13.0"
+    "yeoman-generator": "~0.13.0",
+    "chalk": "~0.3.0",
+    "wiredep": "~0.4.2"
   },
   "peerDependencies": {
     "generator-karma": "~0.6.0",

diff --git a/templates/common/Gruntfile.js b/templates/common/Gruntfile.js
@@ -152,6 +152,14 @@ module.exports = function (grunt) {
       }
     },
 
+    // Automatically inject Bower components into the app
+    'bower-install': {
+      app: {
+        html: '<%%= yeoman.app %>/index.html',
+        ignorePath: '<%%= yeoman.app %>/'
+      }
+    },
+
 <% if (coffee) { %>
     // Compiles CoffeeScript to JavaScript
     coffee: {
@@ -398,6 +406,7 @@ module.exports = function (grunt) {
 
     grunt.task.run([
       'clean:server',
+      'bower-install',
       'concurrent:server',
       'autoprefixer',
       'connect:livereload',
@@ -420,6 +429,7 @@ module.exports = function (grunt) {
 
   grunt.registerTask('build', [
     'clean:dist',
+    'bower-install',
     'useminPrepare',
     'concurrent:dist',
     'autoprefixer',

diff --git a/templates/common/_package.json b/templates/common/_package.json
@@ -5,6 +5,7 @@
   "devDependencies": {
     "grunt": "~0.4.1",
     "grunt-autoprefixer": "~0.4.0",
+    "grunt-bower-install": "~0.7.0",
     "grunt-concurrent": "~0.4.1",
     "grunt-contrib-clean": "~0.5.0",
     "grunt-contrib-coffee": "~0.7.0",

diff --git a/templates/common/index.html b/templates/common/index.html
@@ -10,17 +10,19 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">
     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
+    <!-- build:css styles/vendor.css -->
+    <!-- bower:css -->
+    <!-- endbower -->
+    <!-- endbuild -->
+    <!-- build:css({.tmp,app}) styles/main.css -->
+    <link rel="stylesheet" href="styles/main.css">
+    <!-- endbuild -->
   </head>
   <body ng-app="<%= scriptAppName %>">
     <!--[if lt IE 7]>
       <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
     <![endif]-->
 
-    <!--[if lt IE 9]>
-      <script src="bower_components/es5-shim/es5-shim.js"></script>
-      <script src="bower_components/json3/lib/json3.min.js"></script>
-    <![endif]-->
-
     <!-- Add your site or application content here -->
     <% if (ngRoute) {
       %><div class="container" ng-view></div><%
@@ -39,7 +41,14 @@
        ga('send', 'pageview');
     </script>
 
-    <% if (bootstrap) { %><script src="bower_components/jquery/jquery.js"></script><% } %>
-    <script src="bower_components/angular/angular.js"></script>
+    <!--[if lt IE 9]>
+    <script src="bower_components/es5-shim/es5-shim.js"></script>
+    <script src="bower_components/json3/lib/json3.min.js"></script>
+    <![endif]-->
+
+    <!-- build:js scripts/vendor.js -->
+    <!-- bower:js -->
+    <!-- endbower -->
+    <!-- endbuild -->
   </body>
 </html>