Add support for scss - drop support for less.

Author: dalelotts

gulpfile.js

@@ -12,6 +12,13 @@ var paths = require('./paths');
 var plato = require('plato');
 var Server = require('karma').Server;
 
+gulp.task('build-css', ['scss'], function () {
+  var Comb = require('csscomb');
+  var config = require('./.csscomb.json');
+  var comb = new Comb(config);
+  comb.processPath('./src/css/');
+});
+
 gulp.task('complexity', function (done) {
 
   var callback = function () {
@@ -29,6 +36,43 @@ gulp.task('csslint', function () {
     .pipe(csslint.failReporter());
 });
 
+gulp.task('jscs', function () {
+  return gulp
+    .src(paths.lint)
+    .pipe(jscs('.jscsrc'));
+});
+
+gulp.task('lint', function () {
+  return gulp
+    .src(paths.lint)
+    .pipe(jshint('.jshintrc'))
+    .pipe(jshint.reporter('default', {verbose: true}))
+    .pipe(jshint.reporter('jshint-stylish'))
+    .pipe(jshint.reporter('fail'));
+});
+
+
+gulp.task('scss', ['scss-lint'], function () {
+  var scss = require('gulp-sass');
+  var postcss = require('gulp-postcss');
+  var sourcemaps = require('gulp-sourcemaps');
+  var autoprefixer = require('autoprefixer');
+
+  return gulp.src(paths.scss)
+    .pipe(scss())
+    .pipe(sourcemaps.init())
+    .pipe(postcss([autoprefixer({browsers: ['last 2 versions']})]))
+    .pipe(sourcemaps.write('.'))
+    .pipe(gulp.dest('./src/css'));
+});
+
+gulp.task('scss-lint', function () {
+  var scssLint = require('gulp-scss-lint');
+  var scssLintStylish = require('gulp-scss-lint-stylish');
+  return gulp.src('./src/scss/*.scss')
+    .pipe(scssLint({customReport: scssLintStylish}));
+});
+
 var testConfig = function (options) {
   var travisOptions = process.env.TRAVIS &&
     {
@@ -39,70 +83,36 @@ var testConfig = function (options) {
   return lodash.assign(options, travisOptions);
 };
 
-gulp.task('test', function (done) {
+gulp.task('tdd', function (done) {
+  gulp.watch(paths.all.concat(paths.scss), ['jscs', 'lint', 'build-css']);
 
   var config = testConfig(
     {
+      autoWatch: true,
+      browsers: ['PhantomJS'],
       configFile: karmaConfig,
-      singleRun: true,
-      reporters: ['progress', 'coverage', 'threshold']
+      singleRun: false
     }
   );
 
   var server = new Server(config, done);
   server.start();
 });
 
-gulp.task('less', function () {
-  var less         = require('gulp-less');
-  var postcss      = require('gulp-postcss');
-  var sourcemaps   = require('gulp-sourcemaps');
-  var autoprefixer = require('autoprefixer');
-
-  return gulp.src('./src/less/datetimepicker.less')
-    .pipe(less())
-    .pipe(sourcemaps.init())
-    .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
-    .pipe(sourcemaps.write('.'))
-    .pipe(gulp.dest('./src/css'));
-});
-
-gulp.task('csscomb', ['less'], function () {
-  var Comb = require('csscomb');
-  var comb = new Comb();
-  comb.processPath('./src/css');
-});
 
-gulp.task('tdd', function (done) {
-  gulp.watch(paths.all.concat(paths.less), ['jscs', 'lint', 'makecss']);
+gulp.task('test', function (done) {
 
   var config = testConfig(
     {
-      autoWatch: true,
-      browsers: ['PhantomJS'],
       configFile: karmaConfig,
-      singleRun: false
+      singleRun: true,
+      reporters: ['progress', 'coverage', 'threshold']
     }
   );
 
   var server = new Server(config, done);
   server.start();
 });
 
-gulp.task('lint', function () {
-  return gulp
-    .src(paths.lint)
-    .pipe(jshint('.jshintrc'))
-    .pipe(jshint.reporter('default', {verbose: true}))
-    .pipe(jshint.reporter('jshint-stylish'))
-    .pipe(jshint.reporter('fail'));
-});
-
-gulp.task('jscs', function () {
-  return gulp
-    .src(paths.lint)
-    .pipe(jscs('.jscsrc'));
-});
 
-gulp.task('makecss', ['less', 'csscomb']);
-gulp.task('default', ['jscs', 'lint', 'csslint', 'complexity', 'test']);
+gulp.task('default', ['jscs', 'lint', 'complexity', 'csslint', 'test']);

package.json

@@ -26,8 +26,10 @@
     "gulp-csslint": "^0.2.0",
     "gulp-jscs": "^3.0.0",
     "gulp-jshint": "^1.11.2",
-    "gulp-less": "^3.0.3",
     "gulp-postcss": "^6.0.1",
+    "gulp-sass": "^2.0.4",
+    "gulp-scss-lint": "^0.3.6",
+    "gulp-scss-lint-stylish": "^1.0.0",
     "gulp-sourcemaps": "^1.6.0",
     "jquery": "^2.1.4",
     "jshint": "^2.6.0",

paths.js

@@ -9,20 +9,20 @@ var modules = [
   'node_modules/angular-mocks/angular-mocks.js'
 ];
 var bumpFiles = ['package.json', 'bower.json', 'README.md', 'src/js/*.js'];
-var lessFiles = ['src/less/*.less'];
 var cssFiles = ['src/css/*.css'];
 var demoFiles = ['demo/**/*.js'];
 var miscFiles = ['GruntFile.js', 'gulpfile.js', 'karma.conf.js', 'paths.js'];
+var scssFiles = ['src/scss/*.scss'];
 var sourceFiles = ['src/**/*.js'];
 var testFiles = ['test/**/*.spec.js'];
 
 module.exports = {
   all: modules.concat(sourceFiles).concat(testFiles).concat(demoFiles).concat(cssFiles),
   app: sourceFiles,
-  bump: bumpFiles.concat(cssFiles).concat(lessFiles),
+  bump: bumpFiles.concat(scssFiles).concat(cssFiles),
   css: cssFiles,
-  less: lessFiles,
   lint: miscFiles.concat(sourceFiles).concat(testFiles).concat(miscFiles),
+  scss: scssFiles,
   src: sourceFiles,
   test: testFiles
 };