React入门教程第三课

Stella981
• 阅读 625

上节课中我提到了,在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 管道中。

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

[javascript] view plain copy

  1. 'use strict';

  2. var watchify = require('watchify');

  3. var browserify = require('browserify');

  4. var gulp = require('gulp');

  5. var source = require('vinyl-source-stream');

  6. var buffer = require('vinyl-buffer');

  7. var gutil = require('gulp-util');

  8. var sourcemaps = require('gulp-sourcemaps');

  9. 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}

  10. //项目中使用object-assign代替,用习惯了而已,没有为什么要换

  11. // 在这里添加自定义 browserify 选项

  12. var customOpts = {

  13. entries: ['./src/index.js'],//browserify 主入口

  14. debug: true

  15. };

  16. var opts = assign({}, watchify.args, customOpts);//把watchify的属性和browserify的属性连接起来 assign的用法看上面注释

  17. var b = watchify(browserify(opts));定义一个使用watchify监听的browserify事件(<span style="font-family: Arial, Helvetica, sans-serif;">或者说对象<span style="font-family: Arial, Helvetica, sans-serif;">)。

  18. // 在这里加入变换操作

  19. // 比如: b.transform(coffeeify);

  20. gulp.task('js', bundle); // 这样你就可以运行 `gulp js` 来编译文件了

  21. b.on('update', bundle); // 当任何依赖发生改变的时候,运行打包工具

  22. b.on('log', gutil.log); // 输出编译日志到终端

  23. function bundle() {

  24. return b.bundle()

  25. // 如果有错误发生,记录这些错误

  26. .on('error', gutil.log.bind(gutil, 'Browserify Error'))

  27. .pipe(source('bundle.js'))

  28. // 可选项,如果你不需要缓存文件内容,就删除

  29. .pipe(buffer())

  30. // 可选项,如果你不需要 sourcemaps,就删除

  31. .pipe(sourcemaps.init({loadMaps: true})) // 从 browserify 文件载入 map

  32. // 在这里将变换操作加入管道

  33. .pipe(sourcemaps.write('./')) // 写入 .map 文件

  34. .pipe(gulp.dest('./dist'));

  35. }

以上代码均来自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秒。当项目比较大时这个优化效果是很明显的。

React入门教程第三课

修改后的gulpfile如下:

[javascript] view plain copy

  1. var gulp = require('gulp');

  2. var browserify = require('browserify');

  3. var babelify = require('babelify');

  4. var source = require('vinyl-source-stream');

  5. var sass = require('gulp-sass');

  6. var plumber = require('gulp-plumber');//事件

  7. var notify = require('gulp-notify');//错误

  8. var uglify = require('gulp-uglify');//压缩

  9. var streamify = require('gulp-streamify');

  10. var webserver = require('gulp-webserver');//服务

  11. var watchify = require('watchify');

  12. var gutil = require('gulp-util');

  13. var assign = require('object-assign');

  14. // 在这里添加自定义 browserify 选项

  15. var customOpts = {

  16. entries: ['./source/app.js'],

  17. debug: true

  18. };

  19. var opts = assign({}, watchify.args, customOpts);

  20. var b = watchify(browserify(opts));

  21. // 在这里加入变换操作

  22. // 比如: b.transform(coffeeify);

  23. b.transform(babelify);

  24. gulp.task('watchSource', bundle); // 这样你就可以运行 `gulp watchSource` 来编译文件了

  25. b.on('update', bundle); // 当任何依赖发生改变的时候,运行打包工具

  26. b.on('log', gutil.log); // 输出编译日志到终端

  27. function bundle() {

  28. return b.bundle()

  29. // 如果有错误发生,记录这些错误,按照教程写的bind并不能用

  30. .on('error', gutil.log)

  31. // 删掉了没有用到的buffer和sourcemaps等内容

  32. // 增加压缩代码uglify,在下方的pipe,当需要压缩代码是取消下方的注释

  33. .pipe(source('oni.js'))

  34. //需要压缩就打开

  35. //.pipe(streamify(uglify()))

  36. .pipe(gulp.dest('./build'));

  37. }

  38. gulp.task('buildCSS', function () {

  39. gulp.src('./style/app.scss')

  40. .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))

  41. .pipe(sass())

  42. .pipe(gulp.dest('./build'))

  43. });

  44. gulp.task('watchStyle', function () {

  45. gulp.watch('./style/**/*',['buildCSS'])

  46. })

  47. gulp.task('webserver', function () {

  48. gulp.src('build').pipe(webserver({

  49. port:8897,

  50. fallback: 'index.html',

  51. open:true

  52. //host:'172.16.9.68' 可设置成本机ip供联网调试

  53. }))

  54. });

  55. gulp.task('default',['watchSource','watchStyle','webserver']);

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

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

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

React入门教程第三课

到此本节课的内容全部讲解完毕,关于以上内容有不了解的地方,可以通过评论的方式,留言,我会给出参考文献链接。项目地址:https://Git.oschina.NET/xiaohuOni/OniReact-DemoSVN地址:svn://Git.oschina.NET/xiaohuOni/OniReact-Demo之前的demo都用百度云盘,后来全部过期了。

题外话:

无,今天不想说话。。。

大家点一下查看原文,都在微信上看,csdn的浏览数好少。

本文分享自微信公众号 - alitajs(alitajsdev)。
如有侵权,请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Wesley13 Wesley13
3年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这