From 0fd0e4743e465480aca031a22e85b1b0eec137b3 Mon Sep 17 00:00:00 2001 From: Ananth Date: Wed, 13 Sep 2017 20:56:00 +0530 Subject: [PATCH 1/3] Added functionality to specify custom source directory for element-theme-default. This is useful when you want to modify the Element default theme creating a custom version of the same and want to build on that. --- README.md | 10 ++++-- bin/element-theme | 47 +++++++++++++++---------- index.js | 54 ++++++++++++++--------------- lib/config.js | 59 +++++++++++++++---------------- lib/gen-vars.js | 88 +++++++++++++++++++++++------------------------ lib/task.js | 80 +++++++++++++++++++++--------------------- 6 files changed, 178 insertions(+), 160 deletions(-) diff --git a/README.md b/README.md index 168727b..8174345 100644 --- a/README.md +++ b/README.md @@ -25,10 +25,10 @@ npm i https://github.com/ElementUI/theme-default -D et --init [file path] # watch then build -et --watch [--config variable file path] [--out theme path] +et --watch [--config variable file path] [--out theme path] [-s --source filePath] # build -et [--config variable file path] [--out theme path] [--minimize] +et [--config variable file path] [--out theme path] [--minimize] [-s --source filePath] ``` ## Node API @@ -38,12 +38,14 @@ var et = require('element-theme') // watch mode et.watch({ config: 'variables/path', + source: 'source/path' out: 'output/path' }) // build et.run({ config: 'variables/path', + source: 'source/path' out: 'output/path', minimize: true }) @@ -53,6 +55,9 @@ et.run({ ### config Variable file path, default `./element-variables.css`. +### source +Theme source files path, default `element-theme-default module folder`. + ### out Theme output path, default `./theme`. @@ -74,6 +79,7 @@ You can configure some options in `element-theme` by putting it in package.json: { "element-theme": { "browsers": ["ie > 9", "last 2 versions"], + "source": "theme source files" "out": "./theme", "config": "./element-variables.css", "theme": "element-theme-default", diff --git a/bin/element-theme b/bin/element-theme index 7987874..d6aca9a 100755 --- a/bin/element-theme +++ b/bin/element-theme @@ -1,28 +1,39 @@ #!/usr/bin/env node -var program = require('commander') -var main = require('../index.js') -var check = require('../lib/gen-vars').check -var config = {} +var program = require('commander'); +var main = require('../index.js'); +var check = require('../lib/gen-vars').check; +var config = {}; -console.log() +console.log(); process.on('exit', function () { - console.log() -}) + console.log(); +}); program - .version(require('../package.json').version) - .option('-i --init [filePath]', 'init variables file') - .option('-w --watch', 'watch variable changes then build') - .option('-o --out [outPath]', 'output path', function (out) {config.out = out}) - .option('-m --minimize', 'compressed file', function (minimize) {config.minimize = minimize !== false}) - .option('-c --config [filePath]', 'variables file', function (c) {config.config = c}) - .option('-b --browsers ', 'set browsers', function (browsers) {config.browsers = browsers.split(',')}) - .parse(process.argv) + .version(require('../package.json').version) + .option('-i --init [filePath]', 'init variables file') + .option('-w --watch', 'watch variable changes then build') + .option('-o --out [outPath]', 'output path', function (out) { + config.out = out; + }) + .option('-m --minimize', 'compressed file', function (minimize) { + config.minimize = minimize !== false; + }) + .option('-c --config [filePath]', 'variables file', function (c) { + config.config = c; + }) + .option('-s --source [filePath]', 'Source path', function (s) { + config.themePath = s; + }) + .option('-b --browsers ', 'set browsers', function (browsers) { + config.browsers = browsers.split(','); + }) + .parse(process.argv); -check() +check(); if (program.init) { - return main.init(program.init) + return main.init(program.init); } -program.watch ? main.watch(config) : main.run(config) +program.watch ? main.watch(config) : main.run(config); diff --git a/index.js b/index.js index f7edda1..dac0bae 100644 --- a/index.js +++ b/index.js @@ -1,37 +1,37 @@ -var gulp = require('gulp') -var series = require('run-sequence').use(gulp) -var task = require('./lib/task') -var vars = require('./lib/gen-vars') -var config = require('./lib/config') +var gulp = require('gulp'); +var series = require('run-sequence').use(gulp); +var task = require('./lib/task'); +var vars = require('./lib/gen-vars'); +var config = require('./lib/config'); var build = function (opts) { - return function () { - return task.build(Object.assign(opts, {message: 'build element theme'})) - } -} + return function () { + return task.build(Object.assign(opts, {message: 'build element theme'})); + }; +}; var fonts = function (opts) { - return function () { - return task.fonts(Object.assign(opts, {message: 'build theme font'})) - } -} + return function () { + return task.fonts(Object.assign(opts, {message: 'build theme font'})); + }; +}; exports.init = function (filePath) { - filePath = {}.toString.call(filePath) === '[object String]' ? filePath : '' - vars.init(filePath) -} + filePath = {}.toString.call(filePath) === '[object String]' ? filePath : ''; + vars.init(filePath); +}; exports.watch = function (opts) { - gulp.task('build', build(opts)) - exports.run(opts) - gulp.watch(opts.config || config.config, ['build']) -} + gulp.task('build', build(opts)); + exports.run(opts); + gulp.watch(opts.config || config.config, ['build']); +}; exports.run = function (opts, cb) { - gulp.task('build', build(opts)) - gulp.task('fonts', fonts(opts)) - if (typeof cb === 'function') { - return series('build', 'fonts', cb); - } - return series('build', 'fonts'); -} + gulp.task('build', build(opts)); + gulp.task('fonts', fonts(opts)); + if (typeof cb === 'function') { + return series('build', 'fonts', cb); + } + return series('build', 'fonts'); +}; diff --git a/lib/config.js b/lib/config.js index 35700f3..63b8803 100644 --- a/lib/config.js +++ b/lib/config.js @@ -1,36 +1,37 @@ -var path = require('path') +var path = require('path'); -var pkg = {} +var pkg = {}; try { - pkg = require(path.resolve(process.cwd(), 'package.json')) -} catch (err) {} + pkg = require(path.resolve(process.cwd(), 'package.json')); +} catch (err) { +} var config = Object.assign({ - browsers: ['ie > 9', 'last 2 versions'], - out: './theme', - config: './element-variables.css', - theme: 'element-theme-default', - minimize: false -}, pkg['element-theme']) + browsers: ['ie > 9', 'last 2 versions'], + out: './theme', + config: './element-variables.css', + theme: 'element-theme-default', + minimize: false +}, pkg['element-theme']); exports.features = { - bem: { - shortcuts: { - component: 'b', - modifier: 'm', - descendent: 'e' - }, - separators: { - descendent: '__', - modifier: '--' - } - } -} -exports.themePath = path.resolve(process.cwd(), './node_modules/' + config.theme) -exports.out = config.out -exports.config = config.config -exports.minimize = config.minimize -exports.browsers = config.browsers -exports.components = config.components -exports.themeName = config.theme + bem: { + shortcuts: { + component: 'b', + modifier: 'm', + descendent: 'e' + }, + separators: { + descendent: '__', + modifier: '--' + } + } +}; +exports.themePath = path.resolve(process.cwd(), './node_modules/' + config.theme); +exports.out = config.out; +exports.config = config.config; +exports.minimize = config.minimize; +exports.browsers = config.browsers; +exports.components = config.components; +exports.themeName = config.theme; diff --git a/lib/gen-vars.js b/lib/gen-vars.js index a54b5b9..60563af 100644 --- a/lib/gen-vars.js +++ b/lib/gen-vars.js @@ -1,54 +1,54 @@ -var path = require('path') -var fs = require('fs') -var Readable = require('stream').Readable -var ora = require('ora') -var through = require('through2') -var config = require('./config') +var path = require('path'); +var fs = require('fs'); +var Readable = require('stream').Readable; +var ora = require('ora'); +var through = require('through2'); +var config = require('./config'); -var varsPath = path.resolve(config.themePath, './src/common/var.css') -var filePath = path.resolve(process.cwd(), config.config) +var varsPath = path.resolve(config.themePath, './src/common/var.css'); +var filePath = path.resolve(process.cwd(), config.config); exports.check = function () { - if (!fs.existsSync(varsPath)) { - ora('please install `' + config.themeName + '`').fail() - process.exit(1) - } -} + if (!fs.existsSync(varsPath)) { + ora('please install `' + config.themeName + '`').fail(); + process.exit(1); + } +}; exports.init = function (_file) { - var spinner = ora('Generator variables file').start() + var spinner = ora('Generator variables file').start(); - filePath = path.resolve(process.cwd(), _file ? _file : config.config) - if (fs.existsSync(filePath)) { - spinner.text = 'Variables file is exist.' - spinner.fail() - } else { - fs.writeFileSync(filePath, fs.readFileSync(varsPath), 'utf-8') - spinner.succeed() - } -} + filePath = path.resolve(process.cwd(), _file ? _file : config.config); + if (fs.existsSync(filePath)) { + spinner.text = 'Variables file is exist.'; + spinner.fail(); + } else { + fs.writeFileSync(filePath, fs.readFileSync(varsPath), 'utf-8'); + spinner.succeed(); + } +}; exports.replace = function (_file) { - filePath = path.resolve(process.cwd(), _file ? _file : config.config) - if (!fs.existsSync(filePath)) { - ora('Not found variables file ' + filePath + ', please run "et -i"').fail() - process.exit(1) - } + filePath = path.resolve(process.cwd(), _file ? _file : config.config); + if (!fs.existsSync(filePath)) { + ora('Not found variables file ' + filePath + ', please run "et -i"').fail(); + process.exit(1); + } - return through.obj(function (file, encoding, callback) { - if (file.isNull() || file.path === filePath) { - return callback(null, file) - } + return through.obj(function (file, encoding, callback) { + if (file.isNull() || file.path === filePath) { + return callback(null, file); + } - var custom = new Buffer('@import "' + filePath + '";', encoding) - if (file.isStream()) { - var rs = new Readable() - rs.push(custom, encoding) - rs.pipe(file.contents) - return callback(null, file) - } else if (file.isBuffer()) { - file.contents = Buffer.concat([file.contents, custom]) - return callback(null, file) - } - }) -} + var custom = new Buffer('@import "' + filePath + '";', encoding); + if (file.isStream()) { + var rs = new Readable(); + rs.push(custom, encoding); + rs.pipe(file.contents); + return callback(null, file); + } else if (file.isBuffer()) { + file.contents = Buffer.concat([file.contents, custom]); + return callback(null, file); + } + }); +}; diff --git a/lib/task.js b/lib/task.js index 8a584b7..2fbf4f7 100644 --- a/lib/task.js +++ b/lib/task.js @@ -1,50 +1,50 @@ -var path = require('path') -var gulp = require('gulp') -var ora = require('ora') -var nop = require('gulp-nop') -var postcss = require('gulp-postcss') -var cssmin = require('gulp-cssmin') -var config = require('./config') -var replaceVars = require('./gen-vars').replace +var path = require('path'); +var gulp = require('gulp'); +var ora = require('ora'); +var nop = require('gulp-nop'); +var postcss = require('gulp-postcss'); +var cssmin = require('gulp-cssmin'); +var config = require('./config'); +var replaceVars = require('./gen-vars').replace; var salad = function (browsers) { - return require('postcss-salad')({ - browsers: browsers || config.browsers, - features: config.features - }) -} + return require('postcss-salad')({ + browsers: browsers || config.browsers, + features: config.features + }); +}; exports.fonts = function (opts) { - var spin = ora(opts.message).start() - var stream = gulp.src(path.resolve(config.themePath, './src/fonts/**')) - .pipe((opts.minimize || config.minimize) ? cssmin({showLog: false}) : nop()) - .pipe(gulp.dest(path.resolve(opts.out || config.out, './fonts'))) - .on('end', function () { - spin.succeed() - }) + var spin = ora(opts.message).start(); + var stream = gulp.src(path.resolve(opts.themePath || config.themePath, './src/fonts/**')) + .pipe((opts.minimize || config.minimize) ? cssmin({showLog: false}) : nop()) + .pipe(gulp.dest(path.resolve(opts.out || config.out, './fonts'))) + .on('end', function () { + spin.succeed(); + }); - return stream -} + return stream; +}; exports.build = function (opts) { - var spin = ora(opts.message).start() - var stream - var components - var cssFiles = '*' + var spin = ora(opts.message).start(); + var stream; + var components; + var cssFiles = '*'; - if (config.components) { - components = config.components.concat(['base']) - cssFiles = '{' + components.join(',') + '}' - } + if (config.components) { + components = config.components.concat(['base']); + cssFiles = '{' + components.join(',') + '}'; + } - stream = gulp.src([opts.config || config.config, path.resolve(config.themePath, './src/' + cssFiles + '.css')]) - .pipe(replaceVars(opts.config)) - .pipe(postcss([salad(opts.browsers)])) - .pipe((opts.minimize || config.minimize) ? cssmin({showLog: false}) : nop()) - .pipe(gulp.dest(opts.out || config.out)) - .on('end', function () { - spin.succeed() - }) + stream = gulp.src([opts.config || config.config, path.resolve(opts.themePath || config.themePath, './src/' + cssFiles + '.css')]) + .pipe(replaceVars(opts.config)) + .pipe(postcss([salad(opts.browsers)])) + .pipe((opts.minimize || config.minimize) ? cssmin({showLog: false}) : nop()) + .pipe(gulp.dest(opts.out || config.out)) + .on('end', function () { + spin.succeed(); + }); - return stream -} + return stream; +}; From 9ece2208858d3e531cab176c7129a8a8390834d1 Mon Sep 17 00:00:00 2001 From: Ananth Date: Wed, 13 Sep 2017 20:59:25 +0530 Subject: [PATCH 2/3] Fixed a typo --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8174345..8abde8f 100644 --- a/README.md +++ b/README.md @@ -79,7 +79,7 @@ You can configure some options in `element-theme` by putting it in package.json: { "element-theme": { "browsers": ["ie > 9", "last 2 versions"], - "source": "theme source files" + "source": "theme source files", "out": "./theme", "config": "./element-variables.css", "theme": "element-theme-default", From 57b49d7e1c99a93c037c31faa9c1360afadc4122 Mon Sep 17 00:00:00 2001 From: Ananth Date: Thu, 28 Jun 2018 11:43:43 +0530 Subject: [PATCH 3/3] Updated to support latest Element Chalk theme --- lib/config.js | 26 ++++++++-------- lib/gen-vars.js | 42 ++++++++++++------------- lib/task.js | 82 ++++++++++++++++++++++++------------------------- package.json | 4 +-- 4 files changed, 77 insertions(+), 77 deletions(-) diff --git a/lib/config.js b/lib/config.js index 0fff6c7..9118484 100644 --- a/lib/config.js +++ b/lib/config.js @@ -8,17 +8,17 @@ try { } var config = Object.assign({ - browsers: ['ie > 9', 'last 2 versions'], - out: './theme', - config: './element-variables.scss', - theme: 'element-theme-chalk', - minimize: false -}, pkg['element-theme']) + browsers: ['ie > 9', 'last 2 versions'], + out: './theme', + config: './element-variables.scss', + theme: 'element-theme-chalk', + minimize: false +}, pkg['element-theme']); -exports.themePath = path.resolve(process.cwd(), './node_modules/' + config.theme) -exports.out = config.out -exports.config = config.config -exports.minimize = config.minimize -exports.browsers = config.browsers -exports.components = config.components -exports.themeName = config.theme +exports.themePath = path.resolve(process.cwd(), './node_modules/' + config.theme); +exports.out = config.out; +exports.config = config.config; +exports.minimize = config.minimize; +exports.browsers = config.browsers; +exports.components = config.components; +exports.themeName = config.theme; diff --git a/lib/gen-vars.js b/lib/gen-vars.js index 4b4ef10..e869cb4 100644 --- a/lib/gen-vars.js +++ b/lib/gen-vars.js @@ -1,27 +1,27 @@ -var path = require('path') -var fs = require('fs') -var ora = require('ora') -var config = require('./config') +var path = require('path'); +var fs = require('fs'); +var ora = require('ora'); +var config = require('./config'); -var varsPath = path.resolve(config.themePath, './src/common/var.scss') -var filePath = path.resolve(process.cwd(), config.config) +var varsPath = path.resolve(config.themePath, './src/common/var.scss'); +var filePath = path.resolve(process.cwd(), config.config); exports.check = function () { - if (!fs.existsSync(varsPath)) { - ora('please install `' + config.themeName + '`').fail() - process.exit(1) - } -} + if (!fs.existsSync(varsPath)) { + ora('please install `' + config.themeName + '`').fail(); + process.exit(1); + } +}; exports.init = function (_file) { - var spinner = ora('Generator variables file').start() + var spinner = ora('Generator variables file').start(); - filePath = path.resolve(process.cwd(), _file ? _file : config.config) - if (fs.existsSync(filePath)) { - spinner.text = 'Variables file already exists.' - spinner.fail() - } else { - fs.writeFileSync(filePath, fs.readFileSync(varsPath), 'utf-8') - spinner.succeed() - } -} + filePath = path.resolve(process.cwd(), _file ? _file : config.config); + if (fs.existsSync(filePath)) { + spinner.text = 'Variables file already exists.'; + spinner.fail(); + } else { + fs.writeFileSync(filePath, fs.readFileSync(varsPath), 'utf-8'); + spinner.succeed(); + } +}; diff --git a/lib/task.js b/lib/task.js index 557e233..b09a9b3 100644 --- a/lib/task.js +++ b/lib/task.js @@ -1,49 +1,49 @@ -var path = require('path') -var fs = require('fs') -var gulp = require('gulp') -var ora = require('ora') -var nop = require('gulp-nop') -var sass = require('gulp-sass') -var autoprefixer = require('gulp-autoprefixer') -var cssmin = require('gulp-cssmin') -var config = require('./config') +var path = require('path'); +var fs = require('fs'); +var gulp = require('gulp'); +var ora = require('ora'); +var nop = require('gulp-nop'); +var sass = require('gulp-sass'); +var autoprefixer = require('gulp-autoprefixer'); +var cssmin = require('gulp-cssmin'); +var config = require('./config'); exports.fonts = function (opts) { - var spin = ora(opts.message).start() - var stream = gulp.src(path.resolve(config.themePath, './src/fonts/**')) - .pipe((opts.minimize || config.minimize) ? cssmin({showLog: false}) : nop()) - .pipe(gulp.dest(path.resolve(opts.out || config.out, './fonts'))) - .on('end', function () { - spin.succeed() - }) + var spin = ora(opts.message).start(); + var stream = gulp.src(path.resolve(opts.themePath || config.themePath, './src/fonts/**')) + .pipe((opts.minimize || config.minimize) ? cssmin({showLog: false}) : nop()) + .pipe(gulp.dest(path.resolve(opts.out || config.out, './fonts'))) + .on('end', function () { + spin.succeed(); + }); - return stream -} + return stream; +}; exports.build = function (opts) { - var spin = ora(opts.message).start() - var stream - var components - var cssFiles = '*' + var spin = ora(opts.message).start(); + var stream; + var components; + var cssFiles = '*'; - if (config.components) { - components = config.components.concat(['base']) - cssFiles = '{' + components.join(',') + '}' - } - var varsPath = path.resolve(config.themePath, './src/common/var.scss') - fs.writeFileSync(varsPath, fs.readFileSync(path.resolve(process.cwd(), opts.config || config.config)), 'utf-8') + if (config.components) { + components = config.components.concat(['base']); + cssFiles = '{' + components.join(',') + '}'; + } + var varsPath = path.resolve(opts.themePath || config.themePath, './src/common/var.scss'); + fs.writeFileSync(varsPath, fs.readFileSync(path.resolve(process.cwd(), opts.config || config.config)), 'utf-8'); - stream = gulp.src([opts.config || config.config, path.resolve(config.themePath, './src/' + cssFiles + '.scss')]) - .pipe(sass.sync()) - .pipe(autoprefixer({ - browsers: config.browsers, - cascade: false - })) - .pipe((opts.minimize || config.minimize) ? cssmin({showLog: false}) : nop()) - .pipe(gulp.dest(opts.out || config.out)) - .on('end', function () { - spin.succeed() - }) + stream = gulp.src([opts.config || config.config, path.resolve(opts.themePath || config.themePath, './src/' + cssFiles + '.scss')]) + .pipe(sass.sync()) + .pipe(autoprefixer({ + browsers: config.browsers, + cascade: false + })) + .pipe((opts.minimize || config.minimize) ? cssmin({showLog: false}) : nop()) + .pipe(gulp.dest(opts.out || config.out)) + .on('end', function () { + spin.succeed(); + }); - return stream -} + return stream; +}; diff --git a/package.json b/package.json index a6b467b..55f5f24 100644 --- a/package.json +++ b/package.json @@ -15,9 +15,9 @@ "test": "xo" }, "xo": { - "space": true, + "space": false, "rule": { - "semi": 0, + "semi": 1, "unicorn/no-process-exit": 0, "import/no-dynamic-require": 0 }