From fc823edf58b3fb633615adfb424347fe5f7633f5 Mon Sep 17 00:00:00 2001 From: "qianjun.yang" Date: Tue, 10 May 2016 16:33:28 +0800 Subject: [PATCH] add cli for mmstate --- README.md | 103 +++++++---- index.js | 84 +++++++-- requirejs/build.js | 32 ---- requirejs/gulpfile.js | 55 ++++++ requirejs/package.json | 3 + requirejs/require-css/LICENSE | 10 -- requirejs/require-css/README.md | 250 --------------------------- requirejs/require-css/css-builder.js | 235 ------------------------- requirejs/require-css/css.js | 169 ------------------ requirejs/require-css/css.min.js | 1 - requirejs/require-css/normalize.js | 141 --------------- requirejs/requirejs-build.sh | 3 - webpack-avalon2-2/gulpfile.js | 10 +- webpack-avalon2/gulpfile.js | 10 +- webpack/gulpfile.js | 10 +- 15 files changed, 200 insertions(+), 916 deletions(-) delete mode 100644 requirejs/build.js create mode 100644 requirejs/gulpfile.js delete mode 100644 requirejs/require-css/LICENSE delete mode 100644 requirejs/require-css/README.md delete mode 100644 requirejs/require-css/css-builder.js delete mode 100644 requirejs/require-css/css.js delete mode 100644 requirejs/require-css/css.min.js delete mode 100644 requirejs/require-css/normalize.js delete mode 100644 requirejs/requirejs-build.sh diff --git a/README.md b/README.md index 0475154..c6deeed 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,30 @@ +## mmState CLI && demo list + +### CLI + +``` + npm install mmstate #安装 + + mmstate new projectName #创建一个默认使用avalon 1.7的mmState项目 + + mmstate new -h + -v, --avalonVersion [avalonVersion] avalon的版本 + -l, --loader [loader] 打包方式，requirejs or webpack，avalon 2只能用webpack打包 + + cd projectName + + mmstate serve #启动服务器 + + mmstate update #更新模板库，linux上可能需要 suo + + mmstate build #编译 +``` + + +### 例子 + + + ** 需要服务器环境才能跑起来【commonjs need fekit】 1，打开页面看效果 @@ -12,43 +39,53 @@ requirejs和webpack版本都支持打包以及按需加载 -###requirejs打包：r.js +###requirejs打包：gulpfile.js -build.js配置 +build task配置 ``` -({ - appDir: "www", - baseUrl: "script/", - dir: "build", - map: { - "*": { - "css": "require-css/css", - "avalon": "empty:" // 不打包avalon - } - }, - skipDirOptimize: true, // 只处理modules的配置 - optimizeCss: "none", - //separateCSS: true, - //buildCSS: false, - modules: [ - { - name: "common" - }, - { - name: "pages/stateBlog", - exclude: ["text"] - }, - { - name: "pages/stateDetail", - exclude: ["text"] +gulp.task('build', function() { + var requirejs = require('requirejs'); + + var config = { + appDir: "www", + baseUrl: "script/", + dir: "build", + map: { + "*": { + "css": "require-css/css", + "text": "lib/text", + "avalon": "empty:" // 不打包avalon + } }, - { - name: "pages/stateList", - exclude: ["text"] - } - ] -}) + skipDirOptimize: true, // 只处理modules的配置 + optimizeCss: "none", + //separateCSS: true, + //buildCSS: false, + modules: [ + { + name: "common" + }, + { + name: "pages/stateBlog", + exclude: ["text"] + }, + { + name: "pages/stateDetail", + exclude: ["text"] + }, + { + name: "pages/stateList", + exclude: ["text"] + } + ] + }; + + requirejs.optimize(config, function (buildResponse) { + var contents = fs.readFileSync(config.out, 'utf8'); + }, function(err) { + }); +}); ``` diff --git a/index.js b/index.js index 1850995..cf4d181 100755 --- a/index.js +++ b/index.js @@ -8,7 +8,8 @@ var program = require('commander'), http = require('https'), which = require('os').tmpdir().indexOf('\\') != -1 ? 'where' : 'which', tpldir = __dirname + '/__tpldir', - infoPath= tpldir + '/__info.json' + infoPath= tpldir + '/__info.json', + open = commandChecker('open', !'show no log') function error(msg) { @@ -36,13 +37,13 @@ function loadInfo() { return false } -function commandChecker(cmd) { +function commandChecker(cmd, printLog) { try { child_process.execSync(which + ' ' + cmd).toString() - success(cmd + '已安装') + if (printLog !== false) success(cmd + '已安装') return true } catch(e) { - error(cmd + ' is required, run "npm install -g ' + cmd + '"') + if (printLog !== false) error(cmd + ' is required, run "npm install -g ' + cmd + '"') return false } } @@ -106,24 +107,71 @@ program program .command('serve') + // .option('-p, --port [port]', '端口，默认8080，使用gulp-dev-server或者webpack-dev-server该项配置无效') .description('serve 启动服务') .action(function (options) { var cwd = process.cwd(), - __info = cwd + '/__info.json' - try { - __info = fs.readJsonSync(__info) - if (__info.loader !== 'requirejs') { - var ps = child_process.spawn('gulp', ['run-webpack']) - ps.stdout.on('data', function (data) { - log(data.toString()); - }); - - ps.stderr.on('data', function (data) { - error(data.toString()); - }); + __info = cwd + '/__info.json', + options = options || {}, + port = options.port || 8080 + if (commandChecker('gulp')) { + try { + __info = fs.readJsonSync(__info) + var args = ['gulp', ['webserver']], + url = 'http://localhost:' + port + // if (__info.loader == 'requirejs') { + // if (commandChecker('python', !'show no log')) { + // success('检测到python，使用python启动服务，端口:' + port) + // args = ['python', ['-m', 'SimpleHTTPServer', port]] + // } else { + // try { + // var express = require('express'), + // app = express() + // success('检测到express，使用express启动服务，端口:' + port) + // app.use(express.static(cwd + '/www')) + // app.listen(port) + // args = null + // } catch(e) { + // return error('检测到系统未安装python或者express，无法启动服务') + // } + // } + // } + if (args) { + var ps = child_process.spawn(args[0], args[1], {cwd: cwd + '/www'}) + ps.stdout.on('data', function (data) { + log(data.toString()) + }) + ps.stderr.on('data', function (data) { + var msg = data.toString() + if (msg.match(/HTTP\/[0-9]\.[0-9]" [0-9]{3}/g)) { + log(msg) + } else { + error(msg) + } + }) + } + } catch(e) { + return error('启动失败' + error) } - } catch(e) { - return error('启动失败' + error) + } + }) + +program + .command('build') + .option('-t, --task [task]', 'gulp任务名，默认是build') + .description('build 编译项目') + .action(function(options) { + options = options || {} + var task = options.task || 'build', + cwd = process.cwd() + if (commandChecker('gulp')) { + var ps = child_process.spawn('gulp', [task], {cwd: cwd}) + ps.stdout.on('data', function (data) { + log(data.toString()) + }) + ps.stderr.on('data', function (data) { + error(data.toString()) + }) } }) diff --git a/requirejs/build.js b/requirejs/build.js deleted file mode 100644 index b53000b..0000000 --- a/requirejs/build.js +++ /dev/null @@ -1,32 +0,0 @@ -({ - appDir: "www", - baseUrl: "script/", - dir: "build", - map: { - "*": { - "css": "require-css/css", - "avalon": "empty:" // 不打包avalon - } - }, - skipDirOptimize: true, // 只处理modules的配置 - optimizeCss: "none", - //separateCSS: true, - //buildCSS: false, - modules: [ - { - name: "common" - }, - { - name: "pages/stateBlog", - exclude: ["text"] - }, - { - name: "pages/stateDetail", - exclude: ["text"] - }, - { - name: "pages/stateList", - exclude: ["text"] - } - ] -}) \ No newline at end of file diff --git a/requirejs/gulpfile.js b/requirejs/gulpfile.js new file mode 100644 index 0000000..d810b78 --- /dev/null +++ b/requirejs/gulpfile.js @@ -0,0 +1,55 @@ +var gulp = require('gulp'); +var webserver = require('gulp-webserver'); + +gulp.task('webserver', function() { + gulp + .src('./www') + .pipe(webserver({ + livereload: true, + port: 8080, + open: true + })); +}); + +gulp.task('build', function() { + var requirejs = require('requirejs'); + + var config = { + appDir: "www", + baseUrl: "script/", + dir: "build", + map: { + "*": { + "css": "require-css/css", + "text": "lib/text", + "avalon": "empty:" // 不打包avalon + } + }, + skipDirOptimize: true, // 只处理modules的配置 + optimizeCss: "none", + //separateCSS: true, + //buildCSS: false, + modules: [ + { + name: "common" + }, + { + name: "pages/stateBlog", + exclude: ["text"] + }, + { + name: "pages/stateDetail", + exclude: ["text"] + }, + { + name: "pages/stateList", + exclude: ["text"] + } + ] + }; + + requirejs.optimize(config, function (buildResponse) { + var contents = fs.readFileSync(config.out, 'utf8'); + }, function(err) { + }); +}); \ No newline at end of file diff --git a/requirejs/package.json b/requirejs/package.json index bf10ae7..a64f64d 100644 --- a/requirejs/package.json +++ b/requirejs/package.json @@ -4,6 +4,9 @@ "description": "avalon app base on mmState", "main": "main.js", "dependencies": { + "gulp": "^3.9.1", + "gulp-webserver": "^0.9.1", + "requirejs": "^2.2.0" }, "devDependencies": {}, "scripts": { diff --git a/requirejs/require-css/LICENSE b/requirejs/require-css/LICENSE deleted file mode 100644 index e39e77c..0000000 --- a/requirejs/require-css/LICENSE +++ /dev/null @@ -1,10 +0,0 @@ -MIT License ------------ - -Copyright (C) 2013 Guy Bedford - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/requirejs/require-css/README.md b/requirejs/require-css/README.md deleted file mode 100644 index cbf8bcf..0000000 --- a/requirejs/require-css/README.md +++ /dev/null @@ -1,250 +0,0 @@ -require-css -=========== - -RequireJS CSS requiring and optimization, with almond support. - -Useful for writing modular CSS dependencies alongside scripts. - -For LESS inclusion, use [require-less](https://github.com/guybedford/require-less), which behaves and builds the css exactly like this module apart from the preprocessing step. - - - -Overview --------- - -Allows the construction of scripts that can require CSS, using the simple RequireJS syntax: - -```javascript -define(['css!styles/main'], function() { - //code that requires the stylesheet: styles/main.css -}); -``` - -Fully compatible in IE 6+, Chrome 3+, Firefox 3.5+, Opera 10+, iOS. - -* **CSS builds** When run as part of a build with the RequireJS optimizer, `css!` dependencies are automatically inlined into the built layer within the JavaScript, fully compatible with layering. CSS injection is performed as soon as the layer is loaded. -* **Option to build separate layer CSS files** A `separateCSS` build parameter allows for built layers to output their css files separately, instead of inline with the JavaScript, for manual inclusion. -* **CSS compression** CSS redundancy compression is supported through the external library, [csso](https://github.com/css/csso). - -Installation and Setup ----------------------- - -Download the require-css folder manually or use Bower: - -```bash -bower install require-css -``` - -To allow the direct `css!` usage, add the following [map configuration](http://requirejs.org/docs/api.html#config-map) in RequireJS: - -```javascript -map: { - '*': { - 'css': 'require-css/css' // or whatever the path to require-css is - } -} -``` - -Use Cases and Benefits ----------------------- - -### Motivation - -The use case for RequireCSS came out of a need to manage templates and their CSS together. -The idea being that a CSS require can be a dependency of the code that dynamically renders a template. -When writing a large dynamic application, with templates being rendered on the client-side, it can be beneficial to inject the CSS as templates are required instead -of dumping all the CSS together separately. The added benefit of this is then being able to build the CSS naturally with the RequireJS optimizer, -which also supports [separate build layers](http://requirejs.org/docs/1.0/docs/faq-optimization.html#priority) as needed. - -### Script-inlined CSS Benefits - -By default, during the build CSS is compressed and inlined as a string within the layer that injects the CSS when run. - -If the layer is included as a `