npm package: @lianjia-fe/bucky-mix
Description: bucky 前端构建工具
Author: lianjia-fe@lianjia.com
Latest version: 1.1.7

# bucky-mix

制作这个工具的主要目的是为了解决webpack在解决图片等静态资源的时候遇到的问题。
如使用 file-loader 的时候，在生成的css文件中，background的文件名与实际
图片的路径不符。导致的404错误。

## bucky-mix 的主要想法是：

在使用file-loader来修改css文件的文件名，然后使用自制插件来复制图片等静态资源
保持源码的目录结构与打包后的目录结构一致。

如:

````shell
static
|----src
|    |----index
|         |----index.js
|         |----index.css
|         |----imported_by_index_js.js
|
|----dist
|    |----index
|         |----index.js
|         |----index.css
````

## 使用方法
使用 cnpm 全局安装，或者在项目中使用 cnpm 安装。

```shell
npm install --registry=http://registry.npmjs.lianjia.com:7001/ @lianjia/bucky-mix
```

然后在`src`目录下配置 `bucky-mix.js`作为入口文件。

````javascript
module.exports = (mix, args) => {
    // 执行 mix对象的js css copy方法
    mix
        .alias()
        .publicPath()
        .js(relativePathToJSFile)
        .css(relativePathTOCSSFile)
        .copy(relativePathToIMGFileOrDirectory)
        .dest(relativePathToDestinationDirectory)
}
````

## `mix`对象方法解析
`bucky-mix.js` 文件 `export` 一个函数，该函数接收两个参数，第一个为`mix`本身的一个引用？，该对象提供了以下方法：

**以下方法都接收一个相对路径的字符串作为参数**

**除了 dest 方法只能被调用一次之外，其余方法都可多次调用，甚至链式调用**

### `mix.js`方法
该方法用来编译js文件

该方法接受相对于当前路径（bucky-mix所在目录）的一个js文件的**相对路径**。
如`bucky-mix.js`文件在 `/data0/www/htdocs/blog/static/bucky-mix.js`，
而其中一个要打包的js文件在 `/data0/www/htdocs/blog/static/src/pages/index/index.js`，
则应该给js方法传输的参数为`./src/pages/index/index.js`
(即`require("path").relative("/data0/www/htdocs/blog/static/", "/data0/www/htdocs/blog/static/src/pages/index/index.js")`)
PS: 如果入口文件本身有 `module.exports = {}` 
或者 `exports.${moduleName} = xxx` 
或者 `export moduleNmae = {}` 就会在(必须是一个对象)，这样在打包完成之后 `window`对象将会挂载一个moduleName的内容


### `mix.css`方法
该方法用来编译less, css, stylu文件

该方法接受相对于当前路径（bucky-mix所在目录）的一个css文件的**相对路径**。
如`bucky-mix.js`文件在 `/data0/www/htdocs/blog/static/bucky-mix.js`，
而其中一个要打包的css文件在 `/data0/www/htdocs/blog/static/src/pages/index/index.less`，
则应该给js方法传输的参数为`./src/pages/index/index.less`
(即`require("path").relative("/data0/www/htdocs/blog/static/", "/data0/www/htdocs/blog/static/src/pages/index/index.less")`)

### `mix.copy`方法
该方法用来指定哪些需要复制的文件或目录

该方法接受相对于当前路径（bucky-mix所在目录）的一个文件或路径的**相对路径**。
如`bucky-mix.js`文件在 `/data0/www/htdocs/blog/static/bucky-mix.js`，
而其中一个要打包的img文件在 `/data0/www/htdocs/blog/static/src/pages/index/logo.png`，
则应该给js方法传输的参数为`./src/pages/index/logo.png`
(即`require("path").relative("/data0/www/htdocs/blog/static/", "/data0/www/htdocs/blog/static/src/pages/index/logo.png")`)

### `mix.dest`方法
该方法用来指定所有的文件打包之后输出的目录。该方法可以缺省。
假如没有提供该方法，默认路径在当前路径（bucky-mix.js所在目录）下的`.mix`目录中。

该方法接受相对于当前路径（bucky-mix所在目录）的一个文件或路径的**相对路径**。
如`bucky-mix.js`文件在 `/data0/www/htdocs/blog/static/bucky-mix.js`，
而要输出的目录在，`/data0/www/htdocs/blog/static/dist/`,则该参数为`./dist`。
编译成功之后，`/data0/www/htdocs/blog/static/src`会对应生成到`/data0/www/htdocs/blog/static/dist/`。

### `mix.watchIgnore`方法
该方法接受一个"只编译一次的文件"，如第三方依赖项。
如`react`模块，则该模块在第一次被编译之后不会再被编译。这样可以缩短编译时间。



除了静态写由哪些文件需要处理，也可以使用动态去遍历文件生成入口：

````javascript
const fs = require("fs")
const path = require("path")
module.exports = (mix, args) => {
    // 循环执行 mix 对象 的 js css copy 方法
    fs.readdirSync("srcPath").forEach( (v, i) => {
        mix
            .js("the JS file in the v path")
            .css("the CSS file in the v path")
            .copy("the file or dir want to copy in the v path")
    })
}
````

当前可能存在的bug：js css文件的path 前面的 `./`会被`path.join`方法去掉。所以在必须的时候需要手动添加"./"


## 使用额外的模块（如`babel-polyfill`等）
`npm install babel-plyfill`
然后在输出的时候加上
`mix.js("babel-polyfill")`