eb

easy-builder

基于 webpack 开发的一套使用简单并且强大的web项目构建程序

Showing:

Popularity

Downloads/wk

0

Maintenance

No Maintenance Data Available

Package

Dependencies

35

Size (min+gzip)

799.1KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

easy-builder

安装:

1.全局安装 gulp

npm install gulp -g

2.项目目录安装 easy-builder

npm install easy-builder --save

使用:

在项目目录创建 gulpfile.js文件,下面是示例程序。对于不了解gulpfile.js是干啥用的同学,自己百度gulp吧。

const gulp = require("gulp");
const path = require('path');
const easybuilder = require('easy-builder');

//gulp标准任务写法
gulp.task('default', function (){

    //使用 webpack 构建
    easybuilder.webpackTask({
        root: __dirname,
        entry: {
            page1: './apps/admin/resource/scripts/page1.js',
            page2: './apps/admin/resource/scripts/page2.js',
            page3: './apps/admin/resource/scripts/page3.js',
        },
        dist: path.join(__dirname, './apps/admin/resource/public'),
        publicPath: './',
        allInOne: false,
        hasCommon: false,
        onBuildSuccess: function(){}
    });

    //html构建
    easybuilder.htmlTask({
        watchFiles: path.join(__dirname,'./apps/demo/*'),
        htmlFiles: path.join(__dirname,'./apps/demo/*.html'),
        cleanFiles: path.join(__dirname,'./*.html'),
        dist: path.join(__dirname,'./'),
        compress: true,
        onBuildSuccess: function(){}
    });

});

方法

  • webpackTask(options);

    • 对webpack进行了二次封装,集成了大多数的常用插件,并简化调用
    • 支持 es6、less、sass、vue
    • 支持小图片文件自动base64嵌入到css文件中
    • 支持入口公共文件输出
    • 支持压缩构建输出
    • 支持单文件输出,css也打包到js中
options = {

    //webpack的入口文件,啥是入口文件,百度webpack
    entry : {
        page1: './apps/admin/resource/scripts/page1.js',
        page2: './apps/admin/resource/scripts/page2.js',
        page3: './apps/admin/resource/scripts/page3.js',
    },

    //项目根目录,一般调用的时候赋值 __dirname
    root : '',

    //输出文件目录
    dist : path.join(__dirname,'./apps/admin/resource/public'),

    //css资源文件替换的地址目录
    publicPath: './',

    //打包成一个文件(css也打包到js文件中)
    allInOne : false,

    //生成公共文件。根据入口文件列表,自动生成公共的 common.js、common.css。
    //如果 allInOne = true, 只生成common.js
    hasCommon : false,

    //是否是监听模式,默认启用。当命令行使用 -o 参数,并且没有配置过此参数,不使用监听模式,如gulp -o
    watch : true,

    //代码压缩,默认不启用。当命令行使用 -p 参数,并且没有配置过此参数,启用代码压缩,如 gulp -p
    compress: false,

    //hash文件名输出,默认不启用。当命令行使用 -h 参数,并且没有配置过此参数,启用hash输出,如 gulp -h
    //启用后,输出文件名会自动加上此文件的hash值,如 core.5f53e16e.js
    //并且会在项目目录生成一个配置文件,默认 assets.json
    hashfile: false,

    //hash文件输出配置文件,默认assets.json,hashfile:true 才有效
    hashfileMap: 'assets.json',

    //构建完毕后执行此方法
    onBuildSuccess: function(){}
};
  • htmlTask(options);

    • 对html文件中的 css,js 文件名加上hash值参数,解决缓存问题
    • 对html文件使用压缩

html文件中要使用 下面的注释,把js、css文件包起来。并且css跟js不能在一个注释块里,必须分开,如下

<!-- rev-hash -->
<link href="apps/demo/a.css" rel="stylesheet">
<!-- end -->

<!-- rev-hash -->
<script src="apps/demo/a.js"></script>
<script src="apps/demo/b.js"></script>
<!-- end -->
options = {

    //是否是监听模式,默认启用。当命令行使用 -o 参数,并且没有配置过此参数,不使用监听模式,如gulp -o
    watch:true,

    //监视文件列表,一旦里面的文件发生改变,就会对htmlFiles的文件进行构建
    //可以是字符串或者数组
    watchFiles:[],

    //执行清理操作时,要清理的文件列表
    //可以是字符串或者数组,注意,不要跟htmlFiles内容一样,否则会把源文件删除了
    cleanFiles:[],

    //静态文件列表
    //可以是字符串或者数组
    htmlFiles:[],

    //代码压缩,默认不启用。当命令行使用 -p 参数,启用代码压缩,如 gulp -p
    compress: false,

    //输出目录
    dist:'',

    //构建完毕后执行此方法
    onBuildSuccess: function(){}
}

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100