## 使用说明

使用本工具需要全局安装`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）

## 项目的配置文件说明
``` javascript
{
  "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'`效果和下面一样：
``` javascript
{
  path: './dist',
  filename: 'js/[name].js'
}
```
- template   
值为true相当于：
``` javascript
{
    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，和下面的配置效果一样：
``` javascript
{
  port: 8080,
  open: false, // 是否自动打开浏览器
  historyFallback: true // 开启后404返回index.html
}
```

## 插件扩展
每个插件模块需要导出一个函数或者一个拥有`install`方法的对象。
``` javascript
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文档](https://github.com/slushjs/slush)