11月08, 2016

gulp整合webpack

之前我提及过,用FIS打包类库,是一件超级蛋疼的事。特别是要生成.css,.min.css,.js,.min.js类似这样的。所以gulp也许是一个好一点的方案。但是gulp在js模块化打包方面,远不如webpack。因此我们需要将webpack整合到gulp中。

整合的代码如下:

var webpack = require("webpack"),
     webpackConfig = require("./webpack.config.js");
var myDevConfig = Object.create(webpackConfig);

var devCompiler = webpack(myDevConfig);

//引用webpack对js进行操作
gulp.task("build-js", function(callback) {
    devCompiler.run(function(err, stats) {
        if(err) throw new gutil.PluginError("webpack:build-js", err);
        gutil.log("[webpack:build-js]", stats.toString({
            colors: true
        }));
        //这里额外做一些操作
        gulp.src("./dist/js/dui.js")
            .pipe(rename({suffix: ".min"}))   //rename压缩后的文件名
            .pipe(uglify())    //压缩
            .pipe(gulp.dest("./dist/js"))
            .pipe(gzip())
            .pipe(gulp.dest("./dist/js"));
        callback();
    });
});

webpack的配置文件简单如下:

module.exports = {
    entry: "./src/js/dui.js",
    output: {
        path: "./dist/js", // 输出文件的保存路径
        filename: "dui.js" // 输出文件的名称
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ["babel?presets[]=es2015"],
            exclude: /node_modules/
        }]
    }
}

Dui是我正在写的一套针对小企业部门的UI类库,地址是:DUi,欢迎大家试用,也欢迎给我提pr,或者提issue。

这个代码主要是ES6来书写,利用了lodash这个函数库的一些方法,来实现具体的功能。

本文链接:www.my-fe.pub/post/gulp-use-webpack.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。