Using grunt-contrib-stylus with yeoman

README.md

Using grunt-contrib-stylus with yeoman

• Make every compiled .styl file goes to .tmp directory as a single .css file.

• Reference that generated .css file in your index.html cssmin block, and left your others css as usual.

• Add stylus task into concurrent:server and build processes.

• Watch changes within .styl files, and add stylus task to be executed.

changes.patch

diff --git a/web/Gruntfile.js b/web/Gruntfile.js
index dc6a88c..278407c 100644
--- a/web/Gruntfile.js
+++ b/web/Gruntfile.js
@@ -27,8 +27,8 @@ module.exports = function (grunt) {
         tasks: ['coffee:test']
       },
       styles: {
-        files: ['<%= yeoman.app %>/styles/{,*/}*.css'],
-        tasks: ['copy:styles', 'autoprefixer']
+        files: ['<%= yeoman.app %>/styles/{,*/}*.css', '<%= yeoman.app %>/styles/{,*/}*.styl'],
+        tasks: ['stylus', 'copy:styles', 'autoprefixer']
       },
       livereload: {
         options: {
@@ -184,18 +184,25 @@ module.exports = function (grunt) {
         }]
       }
     },
+    stylus: {
+      compile: {
+        files: {
+          '.tmp/styles/main.css': '<%= yeoman.app %>/styles/{,*/}*.styl'
+        }
+      }
+    },
     cssmin: {
       // 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'
-      //     ]
-      //   }
-      // }
+      dist: {
+        files: {
+          '<%= yeoman.dist %>/styles/main.css': [
+            '.tmp/styles/{,*/}*.css',
+            '<%= yeoman.app %>/styles/{,*/}*.css'
+          ]
+        }
+      }
     },
     htmlmin: {
       dist: {
@@ -252,6 +259,7 @@ module.exports = function (grunt) {
     concurrent: {
       server: [
         'coffee:dist',
+        'stylus',
         'copy:styles'
       ],
       test: [
@@ -329,6 +337,7 @@ module.exports = function (grunt) {
     'copy:dist',
     'cdnify',
     'ngmin',
+    'stylus',
     'cssmin',
     'uglify',
     'rev',

diff --git a/web/app/index.html b/web/app/index.html
index d448c92..b76f003 100644
--- a/web/app/index.html
+++ b/web/app/index.html
@@ -10,6 +10,7 @@
     <!-- build:css(.tmp) styles/main.css -->
     <link rel="stylesheet" href="styles/topcoat-mobile-light.css">
     <link rel="stylesheet" href="styles/topcoat-spinner.css">
     <link rel="stylesheet" href="styles/variables-mobile.css">
     <link rel="stylesheet" href="styles/main.css">
     <!-- endbuild -->

diff --git a/web/package.json b/web/package.json
index 3cd7625..7756e7c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -11,6 +11,7 @@
     "grunt-contrib-compass": "~0.5.0",
     "grunt-contrib-jshint": "~0.6.0",
     "grunt-contrib-cssmin": "~0.6.0",
+    "grunt-contrib-stylus": "~0.11.0",
     "grunt-contrib-connect": "~0.5.0",
     "grunt-contrib-clean": "~0.5.0",
     "grunt-contrib-htmlmin": "~0.1.3",