React入门教程第三课--gulp编译优化

上节课中我提到了，在gulpfile中编写task编译js和sass的task。

而后在项目中使用时发现，当项目内容越写越多时，编译速度会愈来愈久。

看了一下编译过程。上次gulpfile中的定义是当监听文件改变时就执行编译所有js文件。

查阅资料--gulp编译加速

在出来的结果中首条信息是博客园的如何在Gulp中提升Browserify的打包速度

看了下教程没怎么明白，按照连接点击去看了他的源代码，一个文档里面写了看起来很像加速的东西，可是我并不知道怎么加到本身的项目中。

而后该教程中提到了watchify，因而就查了gulpwatchify，第一条信息是gulp中文网的

使用 watchify 加速 browserify 编译

连接地址：http://www.gulpjs.com.cn/docs/recipes/fast-browserify-builds-with-watchify/

原文内容：

当一个 browserify 项目开始变大的时候，编译打包的时间也会慢慢变得长起来。虽然开始的时候可能只需花 1 秒，而后当你的项目须要创建在一些流行的大型项目的基础上时，它颇有可能就变成 30 秒了。

这就是为何 substack 写了 watchify 的缘由，一个持续监视文件的改动，而且 只从新打包必要的文件 的 browserify 打包工具。用这种方法，第一次打包的时候可能会仍是会花 30 秒，可是后续的编译打包工做将一直保持在 100 毫秒如下 —— 这是一个极大的提高。

watchify 并无一个相应的 gulp 插件，而且也不须要有：你可使用 vinyl-source-stream 来把你的用于打包的 stream 链接到 gulp 管道中。

页面提供的源代码写的很好，我在里面增长了注释说明。

'use strict';

var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');  //这个模块是用来链接对象的好比var a = {a_p:1}  var b = {b_p:2} var c = assign{{},a,b}  则对象c其实是{a_p:1,b_p:2}
//项目中使用object-assign代替，用习惯了而已，没有为何要换
// 在这里添加自定义 browserify 选项
var customOpts = {
  entries: ['./src/index.js'],//<span style="font-family: Arial, Helvetica, sans-serif;">browserify </span><span style="font-family: Arial, Helvetica, sans-serif;">主入口</span>
  debug: true
};
var opts = assign({}, watchify.args, customOpts);//把watchify的属性和browserify的属性链接起来 assign的用法看上面注释
var b = watchify(browserify(opts));定义一个使用watchify监听的browserify事件（<span style="font-family: Arial, Helvetica, sans-serif;">或者说对象</span><span style="font-family: Arial, Helvetica, sans-serif;">）。</span>

// 在这里加入变换操做
// 好比： b.transform(coffeeify);

gulp.task('js', bundle); // 这样你就能够运行 `gulp js` 来编译文件了
b.on('update', bundle); // 当任何依赖发生改变的时候，运行打包工具
b.on('log', gutil.log); // 输出编译日志到终端

function bundle() {
  return b.bundle()
    // 若是有错误发生，记录这些错误
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('bundle.js'))
    // 可选项，若是你不须要缓存文件内容，就删除
    .pipe(buffer())
    // 可选项，若是你不须要 sourcemaps，就删除
    .pipe(sourcemaps.init({loadMaps: true})) // 从 browserify 文件载入 map
       // 在这里将变换操做加入管道
    .pipe(sourcemaps.write('./')) // 写入 .map 文件
    .pipe(gulp.dest('./dist'));
}

以上代码均来自gulp中文网。

如今我来谈谈怎么在项目中使用它。

添加三个模块

var watchify = require('watchify');
var gutil = require('gulp-util');
var assign = require('object-assign');

咱们修改几个跟咱们项目先关的内容。

一、修改task名字

gulp.task('watchSource', bundle);

二、修改browserify配置

// 在这里添加自定义 browserify 选项 var customOpts = {
    entries: ['./source/app.js'],
    debug: true };

三、加入变换操做，react项目中须要加入presets，如今的项目加了会报错。本次demo中没加，后续用到的时候，再添加进去。

b.transform(babelify,{presets:["react"]});

四、修改build函数

function bundle() {
    return b.bundle()
        // 若是有错误发生，记录这些错误，按照教程写的bind并不能用  .on('error', gutil.log)

 // 删掉了没有用到的buffer和sourcemaps等内容
 // 增长压缩代码uglify，在下方的pipe，当须要压缩代码是取消下方的注释

        .pipe(source('oni.js'))
        //须要压缩就打开  //.pipe(streamify(uglify()))  .pipe(gulp.dest('./build'));
}

执行

$ cd OniReact

$ gulp

能够看到当前编译须要1.6秒左右,修改以后再编译须要0.26秒。当项目比较大时这个优化效果是很明显的。

修改后的gulpfile以下：

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');//事件
var notify = require('gulp-notify');//错误
var uglify = require('gulp-uglify');//压缩
var streamify = require('gulp-streamify');
var webserver = require('gulp-webserver');//服务
var watchify = require('watchify');
var gutil = require('gulp-util');
var assign = require('object-assign');
// 在这里添加自定义 browserify 选项
var customOpts = {
    entries: ['./source/app.js'],
    debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));
// 在这里加入变换操做
// 好比： b.transform(coffeeify);
b.transform(babelify);
gulp.task('watchSource', bundle); // 这样你就能够运行 `gulp watchSource` 来编译文件了
b.on('update', bundle); // 当任何依赖发生改变的时候，运行打包工具
b.on('log', gutil.log); // 输出编译日志到终端
function bundle() {
    return b.bundle()
        // 若是有错误发生，记录这些错误，按照教程写的bind并不能用
        .on('error', gutil.log)
        // 删掉了没有用到的buffer和sourcemaps等内容
        // 增长压缩代码uglify，在下方的pipe，当须要压缩代码是取消下方的注释
        .pipe(source('oni.js'))
        //须要压缩就打开
        //.pipe(streamify(uglify()))
        .pipe(gulp.dest('./build'));
}
gulp.task('buildCSS', function () {
    gulp.src('./style/app.scss')
        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
        .pipe(sass())
        .pipe(gulp.dest('./build'))
});
gulp.task('watchStyle', function () {
    gulp.watch('./style/**/*',['buildCSS'])
})
gulp.task('webserver', function () {
    gulp.src('build').pipe(webserver({
        port:8897,
        fallback: 'index.html',
        open:true
        //host:'172.16.9.68' 可设置成本机ip供联网调试
    }))
});
gulp.task('default',['watchSource','watchStyle','webserver']);

如今这样的gulp配置还蛮好用的，编译快速，监听错误，起一个web服务器。

可是还存在一个问题，当代码出现语法错误时，打印的日志内容有点详细，包含代码的位置及其余的一些详细内容。

我只截取了一部分，红色框内的内容是我想保留下来的。查了些资料，没有找到方案，但愿知道怎么弄得朋友能够指导一下。

到此本节课的内容所有讲解完毕，关于以上内容有不了解的地方，能够经过评论的方式，留言，我会给出参考文献连接。
项目地址：https://Git.oschina.NET/xiaohuOni/OniReact-Demo
SVN地址：svn://Git.oschina.NET/xiaohuOni/OniReact-Demo
以前的demo都用百度云盘，后来所有过时了。

题外话：

无，今天不想说话。。。

请你们关注公众号:ionic__