update isVendorPreprocessed and the readme

Author: Swiip

README.md

@@ -107,18 +107,18 @@ The root directory generated for a app with name `gulpAngular` :
 * *Unit test (karma)* : out of the box unit test configuration with karma
 * *e2e test (protractor)* : out of the box e2e test configuration with protractor
 * *browser sync* : full-featured development web server with livereload and devices sync
-* *ngHtml2js* : all HTML partials will be converted to JS to be bundled in the application
+* *angular-templatecache* : all HTML partials will be converted to JS to be bundled in the application
 * **TODO** lazy : don't process files which haven't changed when possible
 
 ## Questions the generator will ask
 * *jQuery*: jQuery 1.x, 2.x, Zepto, none
 * *Angular modules*: animate, cookies, touch, sanitize
 * *Resource handler*: ngResource, Restangular, none
 * *Router*: ngRoute, UI Router, none
-* *UI Framework*: Bootstrap, Foundation, none (depends on the chosen CSS preprocessor)
+* *UI Framework*: Bootstrap, Foundation, Angular Material, none (depends on the chosen CSS preprocessor)
 * *CSS pre-processor*: Less, Sass with Ruby and Node, Stylus, none
-* **TODO** Bootstrap directives : UI Bootstrap, Angular Strap, none (only if you chose Bootstrap)
-* **TODO** JS preprocessor: CoffeeScript, TypeScript, ECMAScript6 (Traceur)
+* *Bootstrap directives* : UI Bootstrap, Angular Strap, official Bootstrap JavaScript, none (only if you chose Bootstrap)
+* **TODO** JS preprocessor: CoffeeScript, TypeScript, ECMAScript6 (Traceur and 6to5)
 * **TODO** HTML preprocessor: Jade ?
 * **TODO** Script loader: Require, Browserify, ES6 with Require?, none
 * **TODO** Test framework: Jasmine, Mocha, Qunit

app/index.js

@@ -7,13 +7,9 @@ var chalk = require('chalk');
 
 var prompts = require('./prompts.json');
 
-var _;
-
 var GulpAngularGenerator = yeoman.generators.Base.extend({
 
   init: function () {
-    _ = this._;
-
     // Define the appName
     this.argument('appName', {
       type: String,
@@ -58,7 +54,7 @@ var GulpAngularGenerator = yeoman.generators.Base.extend({
 
     var done = this.async();
 
-    _.findWhere(prompts, {name: 'bootstrapComponents'}).when = function(props) {
+    this._.findWhere(prompts, {name: 'bootstrapComponents'}).when = function(props) {
       return props.ui.key === 'bootstrap';
     };
 

app/src/format.js

@@ -110,12 +110,24 @@ module.exports = function () {
   var styleAppSrc = 'src/app/__' + uiFileKey + '-index.' + this.props.cssPreprocessor.extension;
   this.styleCopies[styleAppSrc] = 'src/app/index.' + this.props.cssPreprocessor.extension;
 
-  this.isVendorStylesPreprocessed = !(
-    this.props.cssPreprocessor.extension === 'css' ||
-    this.props.cssPreprocessor.extension === 'styl' ||
-    this.props.ui.key === 'angular-material' ||
-    this.props.cssPreprocessor.extension === 'less' && this.props.ui.key === 'foundation'
-  );
+  // There is 2 ways of dealing with vendor styles
+  // - If the vendor styles exist in the css preprocessor chosen,
+  //   the best is to include directly the source files
+  // - If not, the vendor styles are simply added as standard css links
+  //
+  // isVendorStylesPreprocessed defines which solution has to be used
+  // regarding the ui framework and the css preprocessor chosen.
+  this.isVendorStylesPreprocessed = false;
+
+  if(this.props.cssPreprocessor.extension === 'scss') {
+    if(this.props.ui.key === 'bootstrap' || this.props.ui.key === 'foundation') {
+      this.isVendorStylesPreprocessed = true;
+    }
+  } else if(this.props.cssPreprocessor.extension === 'less') {
+    if(this.props.ui.key === 'bootstrap') {
+      this.isVendorStylesPreprocessed = true;
+    }
+  }
 
   if(this.isVendorStylesPreprocessed && this.props.ui.name !== null) {
     var styleVendorSource = 'src/app/__' + uiFileKey + '-vendor.' + this.props.cssPreprocessor.extension;

app/templates/src/_index.html

@@ -9,8 +9,7 @@
     <% if (props.ui.name !== null) { %>
     <!-- build:css({.tmp,src}) styles/vendor.css --><% if (isVendorStylesPreprocessed) { %>
     <link rel="stylesheet" href="app/vendor.css"><% } else if (props.ui.key === 'bootstrap') { %>
-    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css"><% } else if (props.ui.key === 'foundation') { %>
-    <link rel="stylesheet" href="../bower_components/foundation/css/foundation.css"><% } %>
+    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.css"><% } %>
     <!-- bower:css -->
     <!-- run `gulp wiredep` to automaticaly populate bower styles dependencies -->
     <!-- endbower -->

test/test-files-generate.mocha.js

@@ -470,7 +470,6 @@ describe('gulp-angular generator', function () {
         ]));
 
         assert.fileContent([].concat(expectedGulpContent, [
-          ['src/index.html', /<link rel="stylesheet" href="..\/bower_components\/foundation\/css\/foundation.css">/],
           ['bower.json', /"foundation": "5.4.x"/],
           ['package.json', /"gulp-less": "\^1.3.3"/],
         ]));
@@ -505,7 +504,6 @@ describe('gulp-angular generator', function () {
         ]));
 
         assert.fileContent([].concat(expectedGulpContent, [
-          ['src/index.html', /<link rel="stylesheet" href="..\/bower_components\/foundation\/css\/foundation.css">/],
           ['bower.json', /"foundation": "5.4.x"/],
           ['package.json', /"gulp-stylus": "\^1.3.3"/],
         ]));
@@ -546,7 +544,6 @@ describe('gulp-angular generator', function () {
 
         // No Gulp task for style
         assert.fileContent([
-          ['src/index.html', /<link rel="stylesheet" href="..\/bower_components\/foundation\/css\/foundation.css">/],
           ['bower.json', /"foundation": "5.4.x"/],
         ]);
         done();