fix(build): use Usemin for all CSS.

Author: stephenplusplus

app/index.js

@@ -76,31 +76,21 @@ util.inherits(Generator, yeoman.generators.Base);
 Generator.prototype.askForBootstrap = function askForBootstrap() {
   var cb = this.async();
 
-  this.prompt({
+  this.prompt([{
     type: 'confirm',
     name: 'bootstrap',
     message: 'Would you like to include Twitter Bootstrap?',
     default: true
-  }, function (props) {
-    this.bootstrap = props.bootstrap;
-
-    cb();
-  }.bind(this));
-};
-
-Generator.prototype.askForCompass = function askForCompass() {
-  if (!this.bootstrap) {
-    return;
-  }
-
-  var cb = this.async();
-
-  this.prompt({
+  }, {
     type: 'confirm',
     name: 'compassBootstrap',
-    message: 'If so, would you like to use Twitter Bootstrap for Compass (as opposed to vanilla CSS)?',
-    default: true
-  }, function (props) {
+    message: 'Would you like to use Twitter Bootstrap for Compass (as opposed to vanilla CSS)?',
+    default: true,
+    when: function (props) {
+      return props.bootstrap;
+    }
+  }], function (props) {
+    this.bootstrap = props.bootstrap;
     this.compassBootstrap = props.compassBootstrap;
 
     cb();
@@ -138,16 +128,33 @@ Generator.prototype.askForModules = function askForModules() {
 
 // Waiting a more flexible solution for #138
 Generator.prototype.bootstrapFiles = function bootstrapFiles() {
-  if (this.compassBootstrap) {
-    this.copy('styles/bootstrap.scss', path.join(this.appPath, 'styles/main.scss'));
-  } else if (this.bootstrap) {
-    this.log.writeln('Writing compiled Bootstrap');
-    var cssFiles = ['styles/bootstrap.css', 'styles/main.css'];
-
-    cssFiles.forEach(function (css) {
-      this.copy(css, path.join(this.appPath, css));
-    }.bind(this));
+  var sass = this.compassBootstrap;
+  var files = [];
+  var source = 'styles/' + ( sass ? 'scss/' : 'css/' );
+
+  if (sass) {
+    files.push('main.scss');
+  } else {
+    if (this.bootstrap) {
+      files.push('bootstrap.css');
+    }
+
+    files.push('main.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() {
@@ -192,7 +199,6 @@ Generator.prototype.extraModules = function extraModules() {
     this.indexFile = this.appendScripts(this.indexFile, 'scripts/modules.js',
         modules);
   }
-
 };
 
 Generator.prototype.createIndexHtml = function createIndexHtml() {

app/templates/styles/bootstrap.scss

@@ -0,0 +1,22 @@
+body {
+    background: #fafafa;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #333;
+}
+
+.hero-unit {
+    margin: 50px auto 0 auto;
+    width: 300px;
+    font-size: 18px;
+    font-weight: 200;
+    line-height: 30px;
+    background-color: #eee;
+    border-radius: 6px;
+    padding: 60px;
+}
+
+.hero-unit h1 {
+    font-size: 60px;
+    line-height: 1;
+    letter-spacing: -1px;
+}

app/templates/styles/bootstrap.css app/templates/styles/css/bootstrap.cssapp/templates/styles/bootstrap.css renamed to app/templates/styles/css/bootstrap.css

@@ -0,0 +1,29 @@
+@import "bootstrap-sass/lib/bootstrap";
+
+/* Put your CSS here */
+html, body {
+  margin: 20px;
+}
+
+body {
+    background: #fafafa;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    color: #333;
+}
+
+.hero-unit {
+    margin: 50px auto 0 auto;
+    width: 300px;
+    font-size: 18px;
+    font-weight: 200;
+    line-height: 30px;
+    background-color: #eee;
+    border-radius: 6px;
+    padding: 60px;
+}
+
+.hero-unit h1 {
+    font-size: 60px;
+    line-height: 1;
+    letter-spacing: -1px;
+}

app/templates/styles/css/main.css

@@ -201,14 +201,17 @@ module.exports = function (grunt) {
       }
     },
     cssmin: {
-      dist: {
-        files: {
-          '<%%= yeoman.dist %>/styles/main.css': [
-            '.tmp/styles/{,*/}*.css',
-            '<%%= yeoman.app %>/styles/{,*/}*.css'
-          ]
-        }
-      }
+      // By default, your `index.html` <!-- Usemin Block --> will take care of
+      // minification. This option is pre-configured if you do not wish to use
+      // Usemin blocks.
+      // dist: {
+      //   files: {
+      //     '<%%= yeoman.dist %>/styles/main.css': [
+      //       '.tmp/styles/{,*/}*.css',
+      //       '<%%= yeoman.app %>/styles/{,*/}*.css'
+      //     ]
+      //   }
+      // }
     },
     htmlmin: {
       dist: {
@@ -329,11 +332,11 @@ module.exports = function (grunt) {
     'clean:dist',
     'useminPrepare',
     'concurrent:dist',
-    'cssmin',
     'concat',
     'copy',
     'cdnify',
     'ngmin',
+    'cssmin',
     'uglify',
     'rev',
     'usemin'

app/templates/styles/main.css

@@ -10,7 +10,6 @@
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">
     <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
-    <link rel="stylesheet" href="styles/main.css">
   </head>
   <body ng-app="<%= _.camelize(appname) %>App">
     <!--[if lt IE 7]>
@@ -25,19 +24,19 @@
     <!-- Add your site or application content here -->
     <div class="container" ng-view></div>
 
-    <script src="bower_components/angular/angular.js"></script>
-
-    <!-- build:js scripts/scripts.js -->
-    <script src="scripts/app.js"></script>
-    <script src="scripts/controllers/main.js"></script>
-    <!-- endbuild -->
-
     <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
     <script>
       var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
       (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
       g.src='//www.google-analytics.com/ga.js';
       s.parentNode.insertBefore(g,s)}(document,'script'));
     </script>
+
+    <script src="bower_components/angular/angular.js"></script>
+
+    <!-- build:js scripts/scripts.js -->
+    <script src="scripts/app.js"></script>
+    <script src="scripts/controllers/main.js"></script>
+    <!-- endbuild -->
   </body>
 </html>