React入门教程第三课--gulp编译优化
2016-10-17 09:27
399 查看
上节课中我提到了,在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');我们修改几个跟我们项目先关的内容。1、修改task名字
gulp.task('watchSource', bundle);2、修改browserify配置
// 在这里添加自定义 browserify 选项 var customOpts = { entries: ['./source/app.js'], debug: true };3、加入变换操作,react项目中需要加入presets,现在的项目加了会报错。本次demo中没加,后续用到的时候,再添加进去。
b.transform(babelify,{presets:["react"]});4、修改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-DemoSVN地址:svn://Git.oschina.NET/xiaohuOni/OniReact-Demo之前的demo都用百度云盘,后来全部过期了。
题外话:
无,今天不想说话。。。
请大家关注公众号:ionic__
相关文章推荐
- React+Flux 新手入门开发套件、模组、实例 ( gulp 自动检查,编译 )
- Angular 4入门教程系列:18:编译优化与nginx压缩
- 简明x86汇编语言教程(7)-编译优化
- [置顶] 高效前端优化工具--Fiddler入门教程
- 《军哥谈CI框架》之入门教程之第三讲
- CodeIgniter框架入门教程——第三课 URL及ajax
- CodeIgniter框架入门教程——第三课 URL及ajax
- Lex和Yacc入门教程(八).使用堆栈编译语法
- 【OpenCV入门教程之七】 玩转OpenCV源代码:生成OpenCV工程解决方案与OpenCV源码编译
- 编译原理学习周入门教程--(9)编译程序第一个工作阶段-词法分析(NFA和DFA转换) .
- 编译原理学习周入门教程--(8)编译程序第一个工作阶段-词法分析(有穷自动机)
- 【OpenCV入门教程之七】 玩转OpenCV源代码:生成OpenCV工程解决方案与OpenCV源码编译
- 高效前端优化工具--Fiddler入门教程
- 编译原理学习周入门教程--(2)编译程序的六个工作流程
- eLua学习第三课:Lua脚本语言的基础入门教程
- Mangos完全源码编译架设教程,新手入门版
- 高效前端优化工具--Fiddler入门教程
- Mangos完全源码编译架设教程,新手入门版
- 编译原理学习周入门教程--(1)什么是编译程序?
- 易语言零基础新手入门系列教程第三课 - 变量