bifypack

基于gulp和browserify的项目构建工具。

安装使用

全局安装：

npm install -g bifypack

然后在项目根目录下创建一个bifypackfile的js文件，如同gulp的初始化gulpfile.js一样，该文件就是构建配置文件。

有了配置文件，然后就是执行了，bifypack是依赖于gulp的，也是基于任务式的，但是非编程。目前执行很简单：

bifypack <task>

本地安装

npm install bifypack --save-dev

然后在package.json中增加如下script：

"scripts": {
  "dev": "bifypack reload",
  "build": "bifypack rev"
}

一般场景都适用，开发执行npm run dev，上线执行npm run build即可。

下面就看默认提供的task。

task

基础task：

• eslint: 利用eslint做语法检查，规则文件就是项目根目录下的.eslintrc文件，参考http://eslint.org/docs/user-guide/configuring#using-configuration-files

• browserify: browserify task，主要根据配置文件中指定入口文件转为可以在浏览器中执行的代码，如果配置了bundle，还会根据规则利用factor-bundle插件生成公共代码。

• watchify: 利用watchify提升browserify编译效率。

• clean: 清空配置文件中指定的product目录内容。

• cleanDev: 清空配置文件中指定的dev目录内容。

• html: 主要把配置的html文件复制到配置的dev目录下；同时这个过程还会将placeholder中的规则做替换生成标签插入到html中，还会把利用factor-bundle插件生成公共代码插入到html中。

• img: 主要是将配置的img资源复制到配置的dev目录下（注：1.x的版本会利用gulp-imagemin来压缩图片，2.x的则不会）。

• style: 将指定的入口css文件利用gulp-minify-css压缩（注：2.x的版本如果自己设置了plugins，那么则不会进行压缩），然后复制到配置的dev目录下，同时会增加.map文件，便于开发调试。一般会配合用于将html文件中的占位符替换为<link rel="stylesheet">标签。

• script: 将指定的浏览器可以直接执行的代码复制（合并）到配置的dev目录下，一般会配合用于将html文件中的占位符替换为<script>标签。

• copy: 复制文件到配置的dev目录下。

集成task：

• static: 也是默认default的task，执行browserify, html, style, img, script, copy任务task。

• watch: 主要watch执行html, style, img, copy任务，以及watchify任务。

• reload: 主要利用watchtask和browser-sync实现便利开发。

• rev: 会先执行static任务，把文件编译到指定dev目录，然后将指定dev目录下的文件利用gulp-rev-all给文件名增加hash值且替换引用地址；将最终结果编译到指定的product目录。

对于一般开发而言，只需要在开发时执行bifypack reload，就可以很方便的开一个服务进行开发了。如果需要增加hash值，编译至指定product目录的话，则只需要执行bifypack rev就好了。

bifypackfile

这个是bifypack的配置文件，这里主要来看一个示例：

var path = require('path')
 
// 插件们
var less = require('gulp-less')
var LessPluginCleanCSS = require('less-plugin-clean-css')
var htmlmin = require('gulp-htmlmin')
var imagemin = require('gulp-imagemin')
var cleanCSSPlugin = new LessPluginCleanCSS({
    advanced: true,
    compatibility: 'ie8'
})
 
var src = 'src/'
var dev = 'dev/' // 加入到 .gitignore
var product = 'dist/' // 加入到 .gitignore
var bundleMapFile = 'bifypack.bundleMap.json' // 加入到 .gitignore
var externals = {
    jquery: '$'
}
var sexts = ['gif', 'png', 'jpg', 'jpeg'].join(',')
 
var config = {
    src: src, // 源目录 默认 src/
    dev: dev, // 开发目录 默认 dev/
    product: product, // 生产目录 默认 dist/
    bundleMapFile: bundleMapFile, // 默认bifypack.bundleMap.json，这个比较特殊，如果说利用factor-bundle插件生成公共代码文件的话，才会生成这个文件，主要是为了在html中增加新生成的这个公共代码文件的`<script>`标签
 
  browserSync: {
    // 可以省略不写 默认 { server: config.dev }
    // 详细的参数配置见 https://browsersync.io/docs/options
    // 当前依赖 browsersync 的版本为 2.15.0
    // 例如 普遍的场景可能会有 port proxy open 等
    port: 3555, // 端口
    open: true, // 是否默认打开浏览器
    proxy: 'localhost/path/' // 代理配置
  },
 
    rev: {
        manifest: true, // 是否在product目录生成 rev-manifest.json 文件
        // 正则 如果是字符串的话 会转成正则
        dontRenameFile: [/\/index\.html$/ig, '.map', '.jpg', '.jpeg', '.png', '.gif'], // gulp-rev-all的配置，这些文件不重命名
        prefix: { // 根据扩展名的前缀处理
            '.js': 'http://sj.domain.com/',
            '.css': 'http://sc.domain.com/',
            '.{jpg,jpeg,png,gif}': 'http://si.domain.com/',
        }
        /**
         * prefix 还可以是
        prefix: 'http://s.domain.com/'
         */
    },
    script: { // js相关
 
        eslint: ['pages/**/*.js', 'common/**/*.js', 'components/**/*.js'], // 检查
 
        browserify: { // browserify配置
 
            src: ['pages/home/*.js'], // 不考虑利用 factor-bundle 来生成公共文件的入口文件
 
            bundle: { // factor-bundle 生成公共文件 apps/xx/common.js
             	'apps/xx/common.js': 'apps/xx/*/*.js'
            },
 
            // 两个用途：
            // 1. browserify.externals（获取externals的key）
            // 2. exposify（内置的） transform的expose参数，用于将externals指定require的key替换为全局的对应的值
            //    也就是说，此时的例子，源码：`var $ = require('jquery')`转换的结果为`var $ = (typeof window !== "undefined" ? window['$'] : typeof global !== "undefined" ? global['$'] : null)`
            externals: externals,
 
            /**plugins和transforms都需要增加到自己项目的依赖中**/
            // https://www.npmjs.com/browse/keyword/browserify-plugin
            plugins: [ // 插件 内置的插件是bundle-collapser
                'xx-plugin',
                // 还可以：
                {
                    name: 'xx',
                    options: {
                        xxx: 'xxx'
                    }
                }
            ],
 
            // https://github.com/substack/node-browserify/wiki/list-of-transforms
            transforms: [ // transforms 已经内置了exposify这个transform
                {
                    name: 'node-lessify', // 这个是dolymood/node-lessify版本，主要解决插入到页面上的css中的图片路径问题，如果是绝对路径则使用默认node-lessify即可
                    options: {
                        root: path.join(process.cwd(), src), // dolymood/node-lessify的配置
                        prefix: '/' // dolymood/node-lessify的配置
                    }
                },
                'partialify' // partialify transform，注意和其他transform的冲突，例如 cssify browserify-css 等
            ]
 
        },
 
        normal: { // 正常的通过script任务执行的，主要操作是复制，合并，重命名
            'lib/jquery.js': '!node_modules/jquery/dist/jquery.j', // 注意这里用了! ，当后边跟着的是确定的一个地址的时候才可以使用，也就是说 !xx/*.js 是不可以的
            'lib/jquery-ui.js': 'lib/jquery-ui/*.js',
            '*': 'lib/avalon/*.js' // 如果key是*的话，那么就会按照原有目录、文件名输出
        }
 
    },
 
    placeholder: { // html中的占位符替换规则，替换为对应的script标签或者link标签，都为js或css的各个入口文件
        script: {
            // <!--SCRIPT_LIB_PLACEHOLDER--> 的结果就是 加入四个script标签，相对地址会做处理
            '<!--SCRIPT_LIB_PLACEHOLDER-->': [
                'lib/jquery.js',
                'lib/jquery-ui.js',
                'lib/avalon.js',
                'lib/avalon.ui.js'
            ]
        },
        style: {
            // <!--STYLE_COMMON_PLACEHOLDER--> 的结果就是 加入n个link标签，相对地址同样会做处理
            '<!--STYLE_COMMON_PLACEHOLDER-->': [
                'lib/**/*.css',
                'common/common.css'
            ]
        }
    },
  copy: ['font/*.*'],
 
  // 注：
  // 2.x 起新增插件机制
  // 关于 html style img 三个配置可以配置为如下形式 {src: ['xx'], plugins: []}
  // 还可以是传统的 1.x 的配置方式，例如：
  // html: ['**/*.html']
  // 同样的 style 和 img 也一样可以：
  // style: ['common/css/g.css']
  // img: ['components/**/*.{' + exts + '}']
  html: {
        src: ['**/*.html'], // html tasks
        plugins: [
            function (styleConfig, config, utils) {
                return htmlmin({
                    collapseWhitespace: true
                })
            }
        ]
    },
    style: {
        src: [
            'common/css/g.less',
            'app/**/*.less'
        ],
        plugins: [
            function (styleConfig, config, utils) {
                return less({
                    plugins: [cleanCSSPlugin]
                })
            }
        ]
    },
    img: {
        src: [
            'components/**/*.{' + exts + '}',
            'app/**/*.{' + exts + '}'
        ],
        plugins: [
            function (imgConfig, config, utils) {
                return imagemin()
            }
        ]
    }
}
 
module.exports = config
 

后续

目前只是支持基础的一些配置，还有额外的很多配置；目前还可以通过自建额外task的方式进行增强：

1. 如果是全局安装了bifypack的话，需要在项目根目录下执行npm link bifypack；如果是本地安装则不需要执行这一步了。

2. 在某目录下修改原有的task

// 放在tasks目录下的其中task文件
var marked = require('gulp-marked')
var bifypack = require('bifypack')
var gulp = bifypack.gulp
var utils = bifypack.utils
gulp.task('marked', ['static'], function () {
    return gulp.src(utils.getSrc(bifypack.config.marked))
        .pipe(marked())
        .pipe(gulp.dest(bifypack.config.dev))
})

如果你选择了全局安装，那么直接执行bifypack marked -e tasks即可（tasks也就是任务目录名）；

如果你选择的是本地安装，那么则需要在package.json中增加如下script：

"scripts": {
  /** 其他script **/
  "marked": "bifypack marked -e tasks"
}