Easy-builder NPM

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(){}
}

build webpack gulp vue