Move styling to less and add gulp tasks to generate css.

Author: dalelotts

.csscomb.json

@@ -0,0 +1,26 @@
+{
+  "remove-empty-rulesets": true,
+  "always-semicolon": true,
+  "color-case": "lower",
+  "block-indent": "  ",
+  "color-shorthand": false,
+  "element-case": "lower",
+  "eof-newline": true,
+  "leading-zero": true,
+  "quotes": "single",
+  "sort-order-fallback": "abc",
+  "space-before-colon": "",
+  "space-after-colon": " ",
+  "space-before-combinator": " ",
+  "space-after-combinator": " ",
+  "space-between-declarations": "\n",
+  "space-before-opening-brace": " ",
+  "space-after-opening-brace": "\n",
+  "space-after-selector-delimiter": "\n",
+  "space-before-selector-delimiter": "",
+  "space-before-closing-brace": "\n",
+  "strip-spaces": true,
+  "tab-size": true,
+  "unitless-zero": true,
+  "vendor-prefix-align": true
+}

Gruntfile.js

@@ -6,11 +6,13 @@ module.exports = function (grunt) {
   // load all grunt tasks
   require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
 
+  var paths = require('./paths');
+
   // Project configuration.
   grunt.initConfig({
     bump: {
       options: {
-        files: ['package.json', 'bower.json', 'README.md', 'src/js/*.js', 'src/css/*.css'],
+        files: paths.bump,
         updateConfigs: [],
         commit: false,
         createTag: false,

demo/demo-controller.js

@@ -55,7 +55,7 @@ angular.module('demo.demoController', [])
       };
 
       $scope.beforeRender = function ($dates) {
-        var index = Math.floor(Math.random() * $dates.length);
+        var index = Math.ceil($dates.length / 2);
         $log.info(index);
         $dates[index].selectable = false;
       };

demo/index.html

@@ -326,7 +326,7 @@ <h3>ng-repeat with drop-down using text link</h3>
 
     <div class="col-sm-6">
         <h3>Drop-down Datetime with restricted dates</h3>
-        <h4>One date is randomly disabled on each view</h4>
+        <h4>One date - somewhere near the middle of the display - is disabled on each view</h4>
 
         <p><code>dropdownSelector: '#dropdown6'</code> to toggle the dropdown.</p>
 

gulpfile.js

@@ -53,8 +53,28 @@ gulp.task('test', function (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, ['jscs', 'lint', 'csslint']);
+  gulp.watch(paths.all.concat(paths.less), ['jscs', 'lint', 'makecss']);
 
   var config = testConfig(
     {
@@ -84,4 +104,5 @@ gulp.task('jscs', function () {
     .pipe(jscs('.jscsrc'));
 });
 
+gulp.task('makecss', ['less', 'csscomb']);
 gulp.task('default', ['jscs', 'lint', 'csslint', 'complexity', 'test']);

package.json

@@ -15,15 +15,20 @@
   },
   "devDependencies": {
     "angular-mocks": "^1.4.7",
+    "autoprefixer": "^6.0.3",
     "bootstrap": "^3.3.5",
     "bower": "latest",
+    "csscomb": "^3.1.8",
     "csslint": "^0.10.0",
     "grunt": "^0.4.4",
     "grunt-bump": "^0.6.0",
     "gulp": "^3.8.11",
     "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-sourcemaps": "^1.6.0",
     "jquery": "^2.1.4",
     "jshint": "^2.6.0",
     "jshint-stylish": "^2.0.1",

paths.js

@@ -9,17 +9,19 @@ 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 sourceFiles = ['src/**/*.js'];
 var testFiles = ['test/**/*.spec.js'];
 
 module.exports = {
-  all: modules.concat(sourceFiles).concat(testFiles).concat(demoFiles),
+  all: modules.concat(sourceFiles).concat(testFiles).concat(demoFiles).concat(cssFiles),
   app: sourceFiles,
-  bump: bumpFiles.concat(cssFiles),
+  bump: bumpFiles.concat(cssFiles).concat(lessFiles),
   css: cssFiles,
+  less: lessFiles,
   lint: miscFiles.concat(sourceFiles).concat(testFiles).concat(miscFiles),
   src: sourceFiles,
   test: testFiles