html-bundler
### 面临的业务困境
Last updated a year ago by xieyu33333 .
ISC · Original npm · Tarball · package.json
$ cnpm install html-bundler 
SYNC missed versions from official npm registry.

html-bundler

面临的业务困境

Why html-bundler

目前最流行的打包工具是webpack和gulp,都有着良好的生态和海量的用户,但是在我们使用的过程中发现了以下一些问题:

  • webpack的上手难度较高,配置和学习成本都很高
  • 所有资源都用webpack打包的情况下性能较差,比如改行样式等10秒这种非常常见
  • gulp虽然上手简单,但是插件众多,如何进行选择和最佳实践是一个大问题
  • 每做一个项目都需要修改构建程序.

html-bundler的特点:

  • html-bundler以html为入口文件,自动寻找引入的资源文件进行构建处理,这对绝大多数项目是通用的.
  • 通过一个简单易理解的配置文件使得构建流程可配置。
  • 一些简单的项目可以直接只做简单的less => css转换,production模式进行压缩合并以及版本号处理即可
  • 复杂的项目则引入webpack对js进行模块化的处理,并暴露接口让用户自己修改webpack配置文件
  • 集成了一些优化和日志工具,提升构建的性能和可维护性

Globle Mod

适用于一些只需要简单压缩合并的活动项目,或者一些demo页

npm install html-bundler -g
hb create project
hb create project -w //add webpack.config.js local
cd project && npm install
hb dev -p 8080
hb dest

Local Mod

适用于正式项目

cd your-project
npm install html-bundler --save-dev

自动生成html-bundler.config.js

npm install html-bundler -g
hb init
hb init -w  //自动生成webpack.config.js

create a js file (e.g: bundle.js)and write:

require('html-bundler')

node bundle.js dev -p 8080
node bundle.js dest

配置文件解析

/* eslint-disable */
module.exports = {
    src: './src',                               //源代码所在路径

    entries: ['./src/html/**', './src/*.html'], //html入口文件

    ignore: ['./src/js/lib', './src/css/lib'],  //不进行任何处理的路径

    imgFolder: './src/imgs',                    //图片目录

    moveList: ['./src/fonts', './src/a.js'],    //需要平移的目录和文件

    devMod: {                                   //开发模式
        output: './dev',                        //开发模式下打包后的输出位置
        minify: false,                          //是否最小化,如果开启,则js、css都会进行压缩
        minifyHTML: false,                      //是否压缩html,如果开启,则会对html文件进行压缩
        bundle: true,                           //是否使用webpack进行打包
        concat: false,                          //是否合并文件
        sourcemap: true,                        //是否进行sourcemap
        less: true,                             //是否进行less预处理
        inline: false,                          //是否把所有资源打成inline(目前不能和bundle配合使用)
        watchFolder: {                          //文件分类进行监听,这样修改js不会编译css,提高性能
            css: ['./src/css'],
            js: ['./src/js'],
            imgs: ['./src/imgs'],
            html: ['./src/html']
        },
        custom: {                               //自定义任务, 格式样例[{func: sass, opts: {logger: true}}, {func: task, opts: null }]
            js: [],
            css: [],
            imgs: [],
            html: []
        },
        server: true,                           //是否开启server,默认集成gulp-connect,如果配置为'bird',则使用bird。
        buildTarget: 'default'                  //buildTarget用于设置dist后的目录结构,如果选择default,则默认为css, js, html,如果是一个对象,则表示自定义,不过目前只支持按照文件类型进行分类。
    },

    destMod: {                                  //生产模式,配置项和开发模式完全相同
        output: './dist',
        minify: true,
        minifyHTML: true,
        bundle: true,
        concat: true,
        less: true,
        inline: false,
        sourcemap: false,
        watchFolder: null,
        custom: {
            js: [],
            css: [],
            imgs: [],
            html: []
        },
        server: false,
        buildTarget: {
            js: './js/',
            css: './css/',
            imgs: './images/',
            html: './html/'
        },
    },

    rdMod: {
        //rd环境配置项,内容同上
    },

    qaMod: {
        //qa环境配置项,内容同上
    },

    birdConfig: {                               //bird 配置项
        basePath: "./dev",
        targetServer: {
            port: "8276",
            host: "your server host",
            headers: {
                cookie: ""
            }
        },
        ajaxOnly: false
    },

    serverConfig: {                             //gulp connect 配置项
        root: './dev'
    }
}

DLL优化

如果你使用webpack模块化开发模式,一些基础依赖库如果也每次构建,会大大拖慢构建的速度,因此我们引入了webpack的dll插件。

step1

修改webpack.dll.js文件中的vendors数组,将依赖放进数组

const vendors = [];
step2

执行

npm run dll

生成manifest.json文件和src/lib/vendors.js文件

step3

在html文件中引入../lib/vendors.js文件,放在其他js文件之前

Current Tags

  • 0.7.0                                ...           latest (a year ago)

68 Versions

  • 0.7.0                                ...           a year ago
  • 0.6.9                                ...           a year ago
  • 0.6.8                                ...           a year ago
  • 0.6.7                                ...           2 years ago
  • 0.6.6                                ...           2 years ago
  • 0.6.5                                ...           2 years ago
  • 0.6.4                                ...           2 years ago
  • 0.6.2                                ...           2 years ago
  • 0.6.1                                ...           2 years ago
  • 0.6.0                                ...           2 years ago
  • 0.5.9                                ...           2 years ago
  • 0.5.8                                ...           2 years ago
  • 0.5.7                                ...           2 years ago
  • 0.5.6                                ...           2 years ago
  • 0.5.5                                ...           2 years ago
  • 0.5.4                                ...           2 years ago
  • 0.5.3                                ...           2 years ago
  • 0.5.2                                ...           2 years ago
  • 0.5.1                                ...           2 years ago
  • 0.5.0                                ...           2 years ago
  • 0.4.9                                ...           2 years ago
  • 0.4.8                                ...           2 years ago
  • 0.4.7                                ...           2 years ago
  • 0.4.6                                ...           2 years ago
  • 0.4.5                                ...           2 years ago
  • 0.4.4                                ...           2 years ago
  • 0.4.3                                ...           2 years ago
  • 0.4.1                                ...           2 years ago
  • 0.4.0                                ...           2 years ago
  • 0.3.9                                ...           2 years ago
  • 0.3.8                                ...           2 years ago
  • 0.3.7                                ...           2 years ago
  • 0.3.6                                ...           2 years ago
  • 0.3.5                                ...           2 years ago
  • 0.3.4                                ...           2 years ago
  • 0.3.3                                ...           2 years ago
  • 0.3.2                                ...           3 years ago
  • 0.3.1                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.9                                ...           3 years ago
  • 0.2.8                                ...           3 years ago
  • 0.2.7                                ...           3 years ago
  • 0.2.6                                ...           3 years ago
  • 0.2.5                                ...           3 years ago
  • 0.2.4                                ...           3 years ago
  • 0.2.3                                ...           3 years ago
  • 0.2.2                                ...           3 years ago
  • 0.2.1                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.9                                ...           3 years ago
  • 0.1.8                                ...           3 years ago
  • 0.1.7                                ...           3 years ago
  • 0.1.6                                ...           3 years ago
  • 0.1.5                                ...           3 years ago
  • 0.1.4                                ...           3 years ago
  • 0.1.3                                ...           3 years ago
  • 0.1.2                                ...           3 years ago
  • 0.1.1                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
  • 0.0.9                                ...           3 years ago
  • 0.0.8                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 1
This Week 9
This Month 13
Last Day 2
Last Week 2
Last Month 11
Dependencies (36)
Dev Dependencies (0)
None
Dependents (1)

Copyright 2014 - 2016 © taobao.org |