Added support for SCSS

- Added support for SCSS
- Clean up dependencies
- Re-reorganized Gulp config
- Removed "watch"-task from "build tasks"-list

CHANGES

@@ -1,3 +1,9 @@
+[1.2.0]
+- Added support for SCSS
+- Clean up dependencies
+- Re-reorganized Gulp config
+- Removed "watch"-task from "build tasks"-list
+
 [1.1.3]
 - Update packages
 - Rename “lala.txt” to “keepme.txt”

gulp/config.js

@@ -8,6 +8,7 @@ module.exports = (function () {
     var bowerPath = projectPath + "vendor/bower"; // remember to edit .bowerrc aswell (for CLI)
     var distPath = projectPath + "dist";
     var cleanPaths = [distPath];
+    var preprocessor = "less"; //choose between "less" or "scss"
 
     return {
         // ------------- Bundles -------------
@@ -32,25 +33,21 @@ module.exports = (function () {
                 "./scripts/components/novicell.map.js",
                 "./scripts/master.js"
             ],
-            styles: ["./less/master.less"],
+            styles: ["./" + preprocessor + "/master." + preprocessor],
             images: ["./images/*.{jpg,png,svg,gif}"],
             icons: ["./images/icons/*.svg"]
         }],
 
-        // ------------- Return Paths -------------
-        projectPath: projectPath,
-        bowerPath: bowerPath,
-        cleanPaths: cleanPaths,
 
-        // ------------- Tasks -------------
-        loadTasks: [
-            "bower", "styles", "scripts",
-            "images", "icons", "copy",
-            "watch", "build"
-        ],
-        buildTasks: [
-            "styles", "scripts",
-            "images", "icons", "copy", "watch"
+        // ------------- Styles -------------
+        stylesDist: distPath + "/css",
+        stylesVendorPrefixes: [
+            "last 2 version",
+            "safari 5",
+            "ie 9",
+            "opera 12.1",
+            "ios 8",
+            "android 4"
         ],
 
         // ------------- Scripts -------------
@@ -85,17 +82,6 @@ module.exports = (function () {
         // ------------- Fonts -------------
         fontsDist: distPath + "/fonts",
 
-        // ------------- Styles -------------
-        stylesDist: distPath + "/css",
-        stylesVendorPrefixes: [
-            "last 2 version",
-            "safari 5",
-            "ie 9",
-            "opera 12.1",
-            "ios 8",
-            "android 4"
-        ],
-
         // ------------- Images -------------
         imagesDist: distPath + "/images",
         imagesOptimizationLevel: 5,
@@ -119,8 +105,8 @@ module.exports = (function () {
             projectPath + "vendor/**/*.js"
         ],
         watchStyles: [
-            projectPath + "less/**/*.less",
-            projectPath + "vendor/**/*.less"
+            projectPath + preprocessor + "/**/*." + preprocessor,
+            projectPath + "vendor/**/*.{less, scss}"
         ],
 
         // ------------- Copy on build --------
@@ -129,6 +115,24 @@ module.exports = (function () {
             to: distPath  + "/fonts"
         }],
 
+
+        // ------------- Tasks -------------
+        loadTasks: [
+            "bower", "styles", "scripts",
+            "images", "icons", "copy",
+            "watch", "build"
+        ],
+        buildTasks: [
+            "styles", "scripts",
+            "images", "icons", "copy"
+        ],
+
+        // ------------- Return Paths -------------
+        projectPath: projectPath,
+        bowerPath: bowerPath,
+        cleanPaths: cleanPaths,
+        preprocessor: preprocessor,
+
         // ---------- Errorhandler ------
         errorHandler: function(taskName)
         {

gulp/tasks/styles.js

@@ -11,11 +11,16 @@ gulp.task('styles', function () {
 
         var useSourcemaps = ignores.indexOf("sourcemaps") == -1;
         var useAutoprefixer = ignores.indexOf("autoprefixer") == -1;
+        var useLess = config.preprocessor == "less";
+        var useScss = config.preprocessor == "scss";
+
+        console.log(b.name + ' styles is being compiled using ' + config.preprocessor);
 
         return gulp.src(b.styles)
             .pipe(plugins.plumber(config.errorHandler("styles")))
             .pipe(plugins.if(useSourcemaps, plugins.sourcemaps.init({ loadMaps: true })))
-            .pipe(plugins.less())
+            .pipe(plugins.if(useLess, plugins.less()))
+            .pipe(plugins.if(useScss, plugins.sass()))
             .pipe(plugins.concat(b.name + ".min.css"))
             .pipe(plugins.if(useAutoprefixer, plugins.autoprefixer(config.stylesVendorPrefixes)))
             .pipe(plugins.minifyCss({keepBreaks:false}))

package.json

@@ -1,6 +1,6 @@
 {
   "name": "novicell-frontend",
-  "version": "1.1.3",
+  "version": "1.2.0",
   "author": {
     "name": "Adam Peter Nielsen",
     "email": "apn@novicell.dk"
@@ -41,36 +41,20 @@
     "gulp-concat": "^2.4.1",
     "gulp-if": "^1.2.5",
     "gulp-imagemin": "^1.2.1",
-    "gulp-jscs": "^1.2.0",
-    "gulp-jshint": "^1.8.5",
-    "gulp-less": "^1.3.6",
+    "gulp-jscs": "^1.6.0",
+    "gulp-jshint": "~1.12.0",
+    "gulp-less": "~1.3.9",
     "gulp-livereload": "^2.1.1",
-    "gulp-load-plugins": "^0.7.1",
-    "gulp-minify-css": "^0.3.11",
+    "gulp-load-plugins": "~0.7.1",
+    "gulp-minify-css": "~0.3.13",
     "gulp-notify": "^2.0.0",
-    "gulp-plumber": "^0.6.6",
+    "gulp-plumber": "~0.6.6",
     "gulp-sourcemaps": "^1.2.8",
-    "gulp-svg-sprite": "^1.0.18",
+    "gulp-sass": "^2.1.0",
+    "gulp-svg-sprite": "~1.2.12",
     "gulp-uglify": "^1.0.1",
-    "merge-stream": "^0.1.6",
-    "node-notifier": "^4.0.2",
-    "yargs": "^1.3.2"
-  },
-  "dependencies": {
-    "del": "~0.1.3",
-    "yargs": "~1.3.3",
-    "gulp-load-plugins": "~0.7.1",
     "merge-stream": "~0.1.8",
-    "gulp-if": "~1.2.5",
-    "gulp-autoprefixer": "~1.0.1",
-    "gulp-jshint": "~1.12.0",
-    "gulp-plumber": "~0.6.6",
-    "gulp-less": "~1.3.9",
-    "gulp-jscs": "~1.6.0",
-    "gulp-livereload": "~2.1.1",
-    "gulp-minify-css": "~0.3.13",
-    "gulp-bower": "0.0.7",
-    "gulp-svg-sprite": "~1.2.12",
-    "gulp-imagemin": "~1.2.1"
+    "node-notifier": "^4.0.2",
+    "yargs": "~1.3.3"
   }
 }