Merge pull request #2 from ajoslin/master

add Sass as style choice

Author: joakimbeng

README.md

@@ -37,9 +37,9 @@ You will now be prompted to give your new AngularJS app a name, which will be da
 
 ### CSS Preprocessor
 
-You can choose between `LESS` and `Stylus` to use as the CSS Preprocessor for your project.
+You can choose between `LESS`, `Stylus`, and `Sass` to use as the CSS Preprocessor for your project.
 
-*Note* All `_*.styl` or `_*.less` files will be considered "partials" and must be imported in another stylesheet file (without a leading "_") to be compiled.
+*Note* All `_*.styl`, `_*.less`, or `_*.scss` files will be considered "partials" and must be imported in another stylesheet file (without a leading "_") to be compiled.
 
 ### Project structure
 
@@ -62,18 +62,18 @@ my-angular-app/
 └── src
     └── app
         ├── app.js                          # Main app module and configuration
-        ├── app.styl  or  app.less          # Main app stylesheet
+        ├── app.styl/less/scss              # Main app stylesheet
         ├── index.html                      # The index.html / app layout template
         ├── assets                          # A folder meant for images and such...
         │   └── .gitkeep
         ├── styles
-        │   └── _base.styl  or  _base.less  # A stylesheet partial with base styles
+        │   └── _base.styl/less/scss        # A stylesheet partial with base styles
         └── todo
             ├── todo-controller.js          # The todo controller
             ├── todo-controller_test.js     # Karma test for the todo controller
             ├── todo.html                   # The todo list template
             ├── todo.js                     # The todo module
-            └── todo.styl  or  todo.less    # Todo module specific styles
+            └── todo.styl/less/scss         # Todo module specific styles
 ```
 
 ### Gulpfile

slushfile.js

@@ -6,10 +6,35 @@ var gulp = require('gulp'),
     inquirer = require('inquirer'),
     _ = require('underscore.string');
 
+var cssTypeData = {
+  'less': {
+    plugin: 'gulp-less',
+    pluginVersion: '^1.2.3',
+    pipeCommand: 'g.less()',
+    extension: 'less'
+  },
+  'sass': {
+    plugin: 'gulp-sass',
+    pluginVersion: '^0.7.1',
+    pipeCommand: 'g.sass()',
+    extension: 'scss'
+  },
+  'styl': {
+    plugin: 'gulp-stylus',
+    pluginVersion: '^0.1.0',
+    pipeCommand: 'g.stylus({ use: ["nib"] })',
+    extension: 'styl'
+  }
+};
+
 gulp.task('default', function (done) {
   inquirer.prompt([
     {type: 'input', name: 'name', message: 'What do you want to name your AngularJS app?', default: getNameProposal()},
-    {type: 'list', name: 'csstype', message: 'What CSS preprocessor do you want to use?', default: 'styl', choices: [{name: 'Stylus', value: 'styl'}, {name: 'LESS', value: 'less'}]},
+    {type: 'list', name: 'csstype', message: 'What CSS preprocessor do you want to use?', default: 'styl', choices: [
+      {name: 'Stylus', value: 'styl'}, 
+      {name: 'LESS', value: 'less'}, 
+      {name: 'Sass', value: 'sass'}
+    ]},
     {type: 'confirm', name: 'example', message: 'Do you want to include a Todo List example in your app?', default: true}
   ],
   function (answers) {
@@ -19,11 +44,13 @@ gulp.task('default', function (done) {
     if (!answers.example) {
       files.push('!' + __dirname + '/templates/src/app/todo/**');
     }
+    answers.styleData = cssTypeData[answers.csstype];
+    console.log(answers.styleData, answers.csstype);
     return gulp.src(files)
       .pipe(template(answers))
       .pipe(rename(function (file) {
         if (file.extname === '.css') {
-          file.extname = '.' + answers.csstype;
+          file.extname = '.' + answers.styleData.extension;
         } else if (file.basename[0] === '_') {
           file.basename = '.' + file.basename.slice(1);
         }

templates/gulpfile.js

@@ -41,10 +41,10 @@ gulp.task('clean-css', function () {
 
 gulp.task('styles', ['clean-css'], function () {
   return gulp.src([
-    './src/app/**/*.<%= csstype %>',
-    '!./src/app/**/_*.<%= csstype %>'
+    './src/app/**/*.<%= styleData.extension %>',
+    '!./src/app/**/_*.<%= styleData.extension %>'
   ])
-    <% if (csstype === 'styl') { %>.pipe(g.stylus({use: ['nib']}))<% } else { %>.pipe(g.less())<% } %>
+    .pipe(<%= styleData.pipeCommand %>)
     .pipe(gulp.dest('./.tmp/css/'))
     .pipe(g.cached('built-css'))
     .pipe(livereload());
@@ -146,7 +146,7 @@ gulp.task('watch', ['statics', 'default'], function () {
   });
   gulp.watch('./src/app/index.html', ['index']);
   gulp.watch(['./src/app/**/*.html', '!./src/app/index.html'], ['templates']);
-  gulp.watch(['./src/app/**/*.<%= csstype %>'], ['csslint']).on('change', function (evt) {
+  gulp.watch(['./src/app/**/*.<%= styleData.extension %>'], ['csslint']).on('change', function (evt) {
     if (evt.type !== 'changed') {
       gulp.start('index');
     }

templates/package.json

@@ -31,7 +31,7 @@
     "gulp-serve": "~0.1.1",
     "gulp-concat": "~2.1.7",
     "gulp-clean": "~0.2.4",
-    <% if (csstype === 'styl') { %>"gulp-stylus": "~0.1.0"<% } else { %>"gulp-less": "1.2.3"<% } %>,
+    "<%= styleData.plugin %>": "<%= styleData.pluginVersion %>",
     "gulp-minify-css": "~0.3.0",
     "gulp-csslint": "~0.1.3",
     "event-stream": "~3.1.0",