使用说明
使用本工具需要全局安装npm install gt-workflow -g。
工具有三个命令：
-
workflow create：用来快速创建预定义的项目模板 -
workflow run：运行gulp任务，内置dev和build两个任务 -
workflow config：操作工具的配置
create
使用例子：workflow create vue-demo vue
首先查找basedir下的generators目录和node_modules目录下是否有slush-workflow-vue的node包，找到之后启动slush，如果没有找到则自动安装到node_modules下然后再启动slush。
run
使用例子：workflow run dev
从当前目录逐层往上寻找workflow.json或者workflow.js配置文件，找到之后将进程目录切换为该目录，然后按顺序加载配置中use声明的插件列表，最后启动gulp执行指定任务。
内置任务：
-
dev启动开发服务 -
build打包文件
config
使用例子：workflow config pm yarn
设置工具的一些可选配置，目前的设置项有：
-
basedir基础模块的存放目录 -
pm模块包管理工具（npm|cnpm|yarn）
项目的配置文件说明
{
"use": [ // 插件
"vue",
["proxy", { // 传入插件参数
"^/api": "//api.xxx.com"
}],
"@/plugins/zip", // 公共目录里的plugins/common插件
"./plugins/oss" // 本地目录的插件
],
"entry": "./src/index.js", // 和webpack的entry一样
"output": { // 和webpack的output类似
"path": "./dist",
"filename": "js/[name].js"
},
"hash": true, // 默认true，打包时是否hash
"minimize": true, // 默认true，打包时是否压缩代码
"template": false, // 默认false，是否启用htmlWebpackPlugin
"commonChunk": true, // 默认false，打包时是否抽出公共模块
"extractCSS": true, // 默认true，打包时是否抽出css
"server": { // 默认true，开发环境的服务器配置
"port": 8080,
"open": false,
"publicPath": "/" // 开发服务器的资源路径
},
"babel": {} // 合并到默认的babel-loader的options,
"transpileDependencies": [], // Array<String|RegExp> 需要被babel处理的依赖
"minifyImages": { // false关闭，true开启，以下是默认配置：
"jpgProgressive": true,
"quality": 70,
"pngQuality": [0.65, 0.90],
"pngSpeed": 4,
"optipngEnabled": false,
"gifInterlaced": false,
"exclude": [/raw\//],
"loaderRawOptions": null // 如果要原生配置，请参考https://github.com/tcoopman/image-webpack-loader
}
}额外说明：
- output
值可以是字符串，比如：output: './dist'效果和下面一样：
{
path: './dist',
filename: 'js/[name].js'
}- template
值为true相当于：
{
filename: 'index.html',
template: './src/index.html'
}值为字符串相当于指定了filename和template中的文件名，如果是对象格式，配置项和html-webpack-plugin一样。
另外，支持生成多个模板，传入一个数组即可，当传入数组时每一项元素必须是对象。
-
commonChunk
如果设置为true，默认会配置三个公共模块：common（引用两次以上的）、vendor（node_modules里的模块）、manifest（webpack运行时）。
当值是数组时，每一项元素必须是对象，对象将被当做webpack.optimize.CommonsChunkPlugin的参数。 -
extractCSS
值可是字符串，用来作为抽出的样式文件的文件名。 -
server 值可以是true，和下面的配置效果一样：
{
port: 8080,
open: false, // 是否自动打开浏览器
historyFallback: true // 开启后404返回index.html
}插件扩展
每个插件模块需要导出一个函数或者一个拥有install方法的对象。
module.exports = function (workflow, options) {
const gulp = workflow.gulp
gulp.task('task-name', function () {
// do something
})
console.log(workflow.env)
console.log(workflow.task)
console.log(workflow.cwd)
// ...
// 添加webpack配置
workflow.setCompilerOptions({
module: {
rules: [
// ...
]
}
})
// webpack compiler初始化完成
workflow.on('compilerReady', compiler => {
// do something
})
// 添加中间件
if (workflow.server) {
workflow.server.use(middleware)
}
}generator
参考slush文档