Repository: couchdb-fauxton Updated Branches: refs/heads/master 096c6fd6c -> a0c0b166d
build: faster build for less/css & without grunt this slices our first build step out of the monolithic grunt build. improvements: - faster less build - no useless css files for modules in debug folder, just one `index.css` - multiple targets possible (so we don't need to build from `dist/debug` in the future performance for less build & concat: ``` old: - 762ms -- 757ms + 5ms (separate concat) new: - 597ms ``` why is it faster? 1. previous buildstep wrote css files on the disk to read & concat it later 2. grunt.readfile / grunt.readjson are slow compared to the native require function which also supports caching needs node 4.x like our travis builds PR: #586 PR-URL: https://github.com/apache/couchdb-fauxton/pull/586 Reviewed-By: Benjamin Keen <[email protected]> Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/a0c0b166 Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/a0c0b166 Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/a0c0b166 Branch: refs/heads/master Commit: a0c0b166d85d5e3db30342949290b33107e9304e Parents: 096c6fd Author: Robert Kowalski <[email protected]> Authored: Fri Nov 20 16:33:06 2015 +0100 Committer: Robert Kowalski <[email protected]> Committed: Fri Dec 4 09:34:25 2015 +0100 ---------------------------------------------------------------------- .eslintrc | 1 + Gruntfile.js | 52 ++++++++--------------------------- build-helper/less.js | 69 +++++++++++++++++++++++++++++++++++++++++++++++ package.json | 4 ++- 4 files changed, 84 insertions(+), 42 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/a0c0b166/.eslintrc ---------------------------------------------------------------------- diff --git a/.eslintrc b/.eslintrc index 04e9936..6974475 100644 --- a/.eslintrc +++ b/.eslintrc @@ -38,6 +38,7 @@ "amd": true, "mocha": true, "phantomjs": true, + "es6": true }, "globals": { http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/a0c0b166/Gruntfile.js ---------------------------------------------------------------------- diff --git a/Gruntfile.js b/Gruntfile.js index 8fa4743..4b7574a 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -61,31 +61,12 @@ module.exports = function (grunt) { var assets = function () { // Base assets var theAssets = { - less:{ - paths: ["assets/less"], - files: { - "dist/debug/css/fauxton.css": "assets/less/fauxton.less" - } - }, fonts: ["assets/fonts/*.eot", "assets/fonts/*.svg", "assets/fonts/*.ttf", "assets/fonts/*.woff"], - img: ["assets/img/**"], - // used in concat:index_css to keep file ordering intact - // fauxton.css should load first - css: ["assets/css/*.css", "dist/debug/css/fauxton.css"] + img: ["assets/img/**"] }; initHelper.processAddons(function (addon) { - // Less files from addons - var root = addon.path || "app/addons/" + addon.name; - var lessPath = root + "/assets/less"; - if (fs.existsSync(lessPath)) { - // .less files exist for this addon - theAssets.less.paths.push(lessPath); - theAssets.less.files["dist/debug/css/" + addon.name + ".css"] = - lessPath + "/" + addon.name + ".less"; - theAssets.css.push("dist/debug/css/" + addon.name + ".css"); - } // Images - root = addon.path || "app/addons/" + addon.name; + var root = addon.path || "app/addons/" + addon.name; var imgPath = root + "/assets/img"; if (fs.existsSync(imgPath)) { theAssets.img.push(imgPath + "/**"); @@ -156,15 +137,6 @@ module.exports = function (grunt) { watch: cleanableAddons }, - less: { - compile: { - options: { - paths: assets.less.paths - }, - files: assets.less.files - } - }, - // The jst task compiles all application templates into JavaScript // functions with the underscore.js template function from 1.2.4. You can // change the namespace and the template options, by reading this: @@ -200,11 +172,6 @@ module.exports = function (grunt) { dest: "dist/debug/js/require.js" }, - index_css: { - src: assets.css, - dest: 'dist/debug/css/index.css' - }, - test_config_js: { src: ["dist/debug/templates.js", "test/test.config.js"], dest: 'test/test.config.js' @@ -250,7 +217,7 @@ module.exports = function (grunt) { }, style: { files: initHelper.watchFiles(['.less', '.css'], ["./app/**/*.css", "./app/**/*.less", "./assets/**/*.css", "./assets/**/*.less"]), - tasks: ['clean:watch', 'dependencies', 'less', 'concat:index_css'] + tasks: ['clean:watch', 'dependencies', 'shell:build-less'] }, html: { // the index.html is added in as a dummy file incase there is no @@ -390,6 +357,10 @@ module.exports = function (grunt) { command: 'npm run stylecheck' }, + 'build-less': { + command: 'npm run build:less' + }, + stylecheckSingleFile: { command: '' // populated dynamically }, @@ -515,7 +486,6 @@ module.exports = function (grunt) { grunt.loadNpmTasks('grunt-contrib-copy'); grunt.loadNpmTasks('grunt-contrib-clean'); grunt.loadNpmTasks('grunt-contrib-jst'); - grunt.loadNpmTasks('grunt-contrib-less'); grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.loadNpmTasks('grunt-contrib-cssmin'); @@ -543,7 +513,7 @@ module.exports = function (grunt) { // minify code and css, ready for release. grunt.registerTask('minify', ['uglify', 'cssmin:compress']); grunt.registerTask('jsx', ['shell:build-jsx']); - grunt.registerTask('build', ['less', 'concat:index_css', 'jst', 'requirejs', 'concat:requirejs', 'uglify', + grunt.registerTask('build', ['shell:build-less', 'jst', 'requirejs', 'concat:requirejs', 'uglify', 'cssmin:compress', 'md5:requireJS', 'md5:css', 'template:release']); /* @@ -553,11 +523,11 @@ module.exports = function (grunt) { grunt.registerTask('dev', ['debugDev', 'couchserver']); // build a debug release - grunt.registerTask('debug', ['lint', 'dependencies', "gen_initialize:development", 'jsx', 'concat:requirejs', 'less', - 'concat:index_css', 'template:development', 'copy:debug']); + grunt.registerTask('debug', ['lint', 'dependencies', "gen_initialize:development", 'jsx', 'concat:requirejs', 'shell:build-less', + 'template:development', 'copy:debug']); grunt.registerTask('debugDev', ['clean', 'dependencies', "gen_initialize:development", 'jsx', 'shell:stylecheck', - 'less', 'concat:index_css', 'template:development', 'copy:debug']); + 'shell:build-less', 'template:development', 'copy:debug']); grunt.registerTask('watchRun', ['clean:watch', 'dependencies', 'shell:stylecheck']); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/a0c0b166/build-helper/less.js ---------------------------------------------------------------------- diff --git a/build-helper/less.js b/build-helper/less.js new file mode 100644 index 0000000..5cf7733 --- /dev/null +++ b/build-helper/less.js @@ -0,0 +1,69 @@ +'use strict'; + +const root = __dirname + '/../'; +const target = root + 'dist/debug/css/index.css'; + +const fs = require('fs'); +const async = require('async'); +const less = require('less'); + +let settings; +if (fs.existsSync(root + 'settings.json')) { + settings = require(root + 'settings.json'); +} else if (fs.existsSync(root + 'settings.json.default.json')) { + settings = require(root + 'settings.json.default.json'); +} else { + throw new Error('no settings.json or settings.json.default found'); +} + +const srcAndTarget = settings.deps.map(addonName => { + addonName = addonName.name; + + return 'app/addons/' + addonName + '/assets/less/' + addonName + '.less'; +}); + +const paths = settings.deps.map(addonName => { + addonName = addonName.name; + return 'app/addons/' + addonName + '/assets/less/'; +}); + +srcAndTarget.unshift('assets/less/fauxton.less'); +paths.unshift('assets/less'); + +// --- end setup --- + +const options = { + paths: paths +}; + +const parser = new less.Parser(options); + + +function writeCSS (files) { + function concatCSS (src, cb) { + fs.readFile(root + src, 'utf8', (err, data) => { + if (err) { + return cb(null, []); + } + + parser.parse(data, (err, tree) => { + if (err) { + throw err; + } + return cb(null, [tree.toCSS()]); + }); + }); + }; + + async.concatSeries(files, concatCSS, (err, data) => { + fs.writeFile(target, data.join('\n'), (err) => { + if (err) { + throw err; + } + + process.exit(0); + }); + }); +} + +writeCSS(srcAndTarget); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/a0c0b166/package.json ---------------------------------------------------------------------- diff --git a/package.json b/package.json index e80131a..8db3dea 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "grunt-contrib-copy": "~0.4.1", "grunt-contrib-cssmin": "~0.5.0", "grunt-contrib-jst": "~0.5.0", - "grunt-contrib-less": "~0.11.0", "grunt-contrib-requirejs": "~0.4.1", "grunt-contrib-uglify": "~0.2.0", "grunt-couchapp": "~0.2.1", @@ -36,7 +35,9 @@ "grunt-md5": "^0.1.11", "grunt-shell": "^1.1.1", "http-proxy": "~1.10.1", + "less": "^1.7.5", "lodash": "^3.6.0", + "mkdirp": "^0.5.1", "nano": "~5.12.0", "optimist": "^0.6.1", "react-tools": "^0.12.0", @@ -48,6 +49,7 @@ }, "scripts": { "stylecheck": "eslint --ext=js,jsx .", + "build:less": "mkdirp ./dist/debug/css && node ./build-helper/less.js", "test": "grunt test", "couchdebug": "grunt couchdebug", "couchdb": "grunt couchdb",
