Build LESS files with Gulp

Switch to LESS 2.5; Switch from CSSMin to clean-css;
nagendra421 · Oct 8, 2015 · 4939367 · 4939367
1 parent 9a7fc92
commit 4939367
Show file tree

Hide file tree

Showing 6 changed files with 5,007 additions and 533 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -7,7 +7,7 @@ module.exports = function(grunt) {
     grunt.loadNpmTasks('grunt-debug-task');
     grunt.loadNpmTasks('grunt-contrib-jshint');
     grunt.loadNpmTasks('grunt-contrib-copy');
-    grunt.loadNpmTasks('grunt-postcss');
+    grunt.loadNpmTasks('grunt-shell');
     grunt.loadTasks('build/grunt/tasks');
 
     // support different test sets for public|private repo
@@ -175,14 +175,6 @@ module.exports = function(grunt) {
                     src: "kendo.timezones.js" ,
                     dest: '<%= kendo.options.jsDestDir %>/'
                 }]
-            },
-            css_assets: {
-                files: [{
-                    expand: true,
-                    cwd: "styles",
-                    src: ["**/*.less", "**/*.woff", "**/*.ttf", "**/*.png", "**/*.gif", "**/*.css", "**/*.svg" ],
-                    dest: '<%= kendo.options.stylesDestDir %>/'
-                }]
             }
         },
 
@@ -232,25 +224,12 @@ module.exports = function(grunt) {
             }
         },
 
-        less: {
+        shell: {
             options: {
-                destDir: "<%= kendo.options.destDir %>",
-                autoprefixer: {
-                    browsers: ([
-                        "Explorer >= 7",
-                        "Chrome >= 21",
-                        "Firefox ESR",
-                        "Opera >= 15",
-                        "Android >= 2.3",
-                        "Safari >= 6.2.6",
-                        "ExplorerMobile >= 10",
-                        "iOS >= 6",
-                        "BlackBerry >= 10"
-                    ]).join(",")
-                }
+                stderr: false
             },
-            compile: {
-                src: [ "styles/**/kendo*.less" ]
+            gulpStyles: {
+                command: 'node_modules/gulp/bin/gulp.js styles'
             }
         },
 
@@ -268,7 +247,7 @@ module.exports = function(grunt) {
     // Default task(s).
     grunt.registerTask('default', ['karma:unit']);
     grunt.registerTask('tests', [ 'styles', 'karma:unit' ]);
-    grunt.registerTask('styles', [ 'copy:css_assets', 'less' ]);
+    grunt.registerTask('styles', [ 'shell:gulpStyles' ]);
     grunt.registerTask('all', [ 'kendo', 'download_builder', 'copy:jquery', 'copy:angular', 'copy:timezones' ]);
     grunt.registerTask('build', [ 'kendo', 'copy:jquery', 'copy:angular', 'styles', 'license' ]);
 

diff --git a/build/grunt/tasks/less.js b/build/grunt/tasks/less.js
diff --git a/build/grunt/tasks/license.js b/build/grunt/tasks/license.js
@@ -1,6 +1,5 @@
 var PATH = require("path");
-var LESS = require("less");
-var CSSMIN = require("cssmin").cssmin;
+
 var licensePath = PATH.join("resources", "legal", "core-license.txt");
 
 module.exports = function(grunt) {
@@ -14,4 +13,4 @@ module.exports = function(grunt) {
             });
         });
     });
-}
+};
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,59 @@
+/* jshint browser:false, node:true, esnext: true */
+
+var gulp = require('gulp');
+var debug = require('gulp-debug'); // jshint ignore:line
+var less = require('gulp-less');
+var logger = require('gulp-logger');
+var replace =  require('gulp-replace');
+var minifyCSS = require('gulp-minify-css');
+var rename = require('gulp-rename');
+var clone = require('gulp-clone');
+
+var merge = require('merge2');
+var autoprefix = require('less-plugin-autoprefix');
+
+var browsers = [
+    "Explorer >= 7",
+    "Chrome >= 21",
+    "Firefox ESR",
+    "Opera >= 15",
+    "Android >= 2.3",
+    "Safari >= 6.2.6",
+    "ExplorerMobile >= 10",
+    "iOS >= 6",
+    "BlackBerry >= 10"
+].join(",");
+
+var cleanCssOptions = {
+    compatibility: 'ie7',
+    aggressiveMerging: false,
+    advanced: false
+};
+
+var logger = logger({
+    before: 'Starting LESS',
+    after: 'LESS complete!',
+    extname: '.css',
+    showChange: true
+});
+
+gulp.task("css-assets", function() {
+    return gulp.src("styles/**/*.{less,woff,ttf,png,gif,css,svg}").
+        pipe(gulp.dest("dist/gulp-styles"));
+});
+
+gulp.task("styles", [ "css-assets" ], function() {
+    var css = gulp.src("styles/**/kendo*.less")
+        .pipe(logger)
+        .pipe(less({
+            relativeUrls: true,
+            plugins: [new autoprefix({ browsers: browsers }) ]
+        }))
+        .pipe(replace(/\.\.\/mobile\//g, '')); // temp hack for the discrepancy between source and generated "source"
+
+    var minCss = css.pipe(clone())
+        .pipe(minifyCSS(cleanCssOptions))
+        .pipe(rename({ suffix: ".min" }));
+
+    merge(css, minCss).pipe(gulp.dest('dist/styles'));
+});