标签gulp下的文章

admin 发布于 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这个函数库的一些方法,来实现具体的功能。

阅读全文 »

admin 发布于 10月25, 2016

gulp的liveReload方案记录

gulp的gulp-connect这个插件似乎有点问题,反正我电脑测试无法livereload自动刷新。看了几个issue,如这个

话说github上的issue有时候回复也挺慢的。仅仅吐个嘈而已。

今天我的徒弟给我发了另外一个gulp的插件,看了一下gulp的配置,超级简单。

var gulp = require('gulp'),
    browserSync = require('browser-sync').create(),
    reload = browserSync.reload
//本地服务
gulp.task('server',function() {
    browserSync.init({
        open: false,
        port: 8889,
        server: "./"
    });
    gulp.watch('views/**/*.html').on('change',reload);
});

我为什么不用FIS呢?因为这阵子在写js类库,发现FIS并不是一个非常好的选择。用webpack吧,它对css这一块的支持并不是太好,因为它对css的处理,更多的是模块化。

因此我写完js类库之后,可能会用gulp+webpack来打包生成dist文件。

阅读全文 »