feat(gen): add Compass support to the initialization process

Twitter Bootstrap with the Compass CSS Authoring Framework question will show up only if both Compass and Bootstrap have both been enabled
yeoman · Dec 13, 2013 · 7fac119 · 7fac119
1 parent 4ab6eb2
commit 7fac119
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 19 deletions.
diff --git a/app/index.js b/app/index.js
@@ -129,7 +129,23 @@ Generator.prototype.welcome = function welcome() {
   }
 };
 
+Generator.prototype.askForCompass = function askForCompass() {
+  var cb = this.async();
+
+  this.prompt([{
+    type: 'confirm',
+    name: 'compass',
+    message: 'Would you like to use Sass (with Compass)?',
+    default: true
+  }], function (props) {
+    this.compass = props.compass;
+
+    cb();
+  }.bind(this));
+};
+
 Generator.prototype.askForBootstrap = function askForBootstrap() {
+  var compass = this.compass;
   var cb = this.async();
 
   this.prompt([{
@@ -140,10 +156,10 @@ Generator.prototype.askForBootstrap = function askForBootstrap() {
   }, {
     type: 'confirm',
     name: 'compassBootstrap',
-    message: 'Would you like to use the SCSS version of Twitter Bootstrap with the Compass CSS Authoring Framework?',
+    message: 'Would you like to use the Sass version of Twitter Bootstrap?',
     default: true,
     when: function (props) {
-      return props.bootstrap;
+      return props.bootstrap && compass;
     }
   }], function (props) {
     this.bootstrap = props.bootstrap;
@@ -218,7 +234,7 @@ Generator.prototype.readIndex = function readIndex() {
 
 // Waiting a more flexible solution for #138
 Generator.prototype.bootstrapFiles = function bootstrapFiles() {
-  var sass = this.compassBootstrap;
+  var sass = this.compass;
   var source = 'styles/' + ( sass ? 's' : '' ) + 'css/';
   var dest = 'app/styles/';
   var mainFile = 'main.' + (sass ? 's' : '') + 'css';

diff --git a/app/templates/styles/scss/main.scss b/app/templates/styles/scss/main.scss
@@ -1,8 +1,8 @@
-$icon-font-path: "/bower_components/sass-bootstrap/fonts/";
+<% if (compassBootstrap) { %>$icon-font-path: "/bower_components/sass-bootstrap/fonts/";
 
 @import 'sass-bootstrap/lib/bootstrap';
 
-.browsehappy {
+<% } %>.browsehappy {
     margin: 0.2em 0;
     background: #ccc;
     color: #000;

diff --git a/templates/common/Gruntfile.js b/templates/common/Gruntfile.js
@@ -45,7 +45,7 @@ module.exports = function (grunt) {
       jsTest: {
         files: ['test/spec/{,*/}*.js'],
         tasks: ['newer:jshint:test', 'karma']
-      },<% } %><% if (compassBootstrap) { %>
+      },<% } %><% if (compass) { %>
       compass: {
         files: ['<%%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
         tasks: ['compass:server', 'autoprefixer']
@@ -187,7 +187,7 @@ module.exports = function (grunt) {
       }
     },<% } %>
 
-<% if (compassBootstrap) { %>
+<% if (compass) { %>
     // Compiles Sass to CSS and generates necessary files if requested
     compass: {
       options: {
@@ -341,17 +341,17 @@ module.exports = function (grunt) {
     // Run some tasks in parallel to speed up the build process
     concurrent: {
       server: [<% if (coffee) { %>
-        'coffee:dist',<% } %><% if (compassBootstrap) { %>
+        'coffee:dist',<% } %><% if (compass) { %>
         'compass:server'<% } else { %>
         'copy:styles'<% } %>
       ],
       test: [<% if (coffee) { %>
-        'coffee',<% } %><% if (compassBootstrap) { %>
+        'coffee',<% } %><% if (compass) { %>
         'compass'<% } else { %>
         'copy:styles'<% } %>
       ],
       dist: [<% if (coffee) { %>
-        'coffee',<% } %><% if (compassBootstrap) { %>
+        'coffee',<% } %><% if (compass) { %>
         'compass:dist',<% } else { %>
         'copy:styles',<% } %>
         'imagemin',

diff --git a/test/test-appname-substitution.js b/test/test-appname-substitution.js
@@ -42,8 +42,9 @@ describe('Angular generator template mechanism', function () {
             'test/spec/controllers/main.js'
         ];
         helpers.mockPrompt(angular, {
+          compass: true,
           bootstrap: true,
-          compassBoostrap: true,
+          compassBootstrap: true,
           modules: []
         });
 

diff --git a/test/test-file-creation.js b/test/test-file-creation.js
@@ -33,8 +33,9 @@ describe('Angular generator', function () {
 
   it('should generate dotfiles', function (done) {
     helpers.mockPrompt(angular, {
+      compass: true,
       bootstrap: true,
-      compassBoostrap: true,
+      compassBootstrap: true,
       modules: []
     });
 
@@ -49,7 +50,7 @@ describe('Angular generator', function () {
                     'app/404.html',
                     'app/favicon.ico',
                     'app/robots.txt',
-                    'app/styles/main.css',
+                    'app/styles/main.scss',
                     'app/views/main.html',
                     ['.bowerrc', /"directory": "app\/bower_components"/],
                     'Gruntfile.js',
@@ -61,8 +62,9 @@ describe('Angular generator', function () {
                     'test/spec/controllers/main.js'
                     ];
     helpers.mockPrompt(angular, {
+      compass: true,
       bootstrap: true,
-      compassBoostrap: true,
+      compassBootstrap: true,
       modules: []
     });
 
@@ -77,7 +79,7 @@ describe('Angular generator', function () {
                     'app/404.html',
                     'app/favicon.ico',
                     'app/robots.txt',
-                    'app/styles/main.css',
+                    'app/styles/main.scss',
                     'app/views/main.html',
                     ['.bowerrc', /"directory": "app\/bower_components"/],
                     'Gruntfile.js',
@@ -89,8 +91,9 @@ describe('Angular generator', function () {
                     'test/spec/controllers/main.coffee'
                     ];
     helpers.mockPrompt(angular, {
+      compass: true,
       bootstrap: true,
-      compassBoostrap: true,
+      compassBootstrap: true,
       modules: []
     });
 
@@ -132,8 +135,9 @@ describe('Angular generator', function () {
     angularGenerator = helpers.createGenerator('angular:' + generatorType, deps, [name]);
 
     helpers.mockPrompt(angular, {
+      compass: true,
       bootstrap: true,
-      compassBoostrap: true,
+      compassBootstrap: true,
       modules: []
     });
     angular.run([], function (){
@@ -198,8 +202,9 @@ describe('Angular generator', function () {
       angularView = helpers.createGenerator('angular:view', deps, ['foo']);
 
       helpers.mockPrompt(angular, {
+        compass: true,
         bootstrap: true,
-        compassBoostrap: true,
+        compassBootstrap: true,
         modules: []
       });
       angular.run([], function (){
@@ -218,8 +223,9 @@ describe('Angular generator', function () {
       angularView = helpers.createGenerator('angular:view', deps, ['foo/bar']);
 
       helpers.mockPrompt(angular, {
+        compass: true,
         bootstrap: true,
-        compassBoostrap: true,
+        compassBootstrap: true,
         modules: []
       });
       angular.run([], function (){