browserify

Browserify 可以让你使用类似于 node 的 require() 的方式来组织浏览器端的 Javascript 代码，通过预编译让前端 Javascript 可以直接使用 Node NPM 安装的一些库。弥补了gulp所遗留的问题。
具体请看
浏览器本身并不提供模块管理的机制，为了调用各个模块，有时不得不在网页中，加入一大堆script标签。这样就使得网页体积臃肿，难以维护，还产生大量的HTTP请求，拖慢显示速度，影响用户体验。

为了解决这个问题，前端的模块管理器（package management）应运而生。它可以轻松管理各种JavaScript脚本的依赖关系，自动加载各个模块，使得网页结构清晰合理。不夸张地说，将来所有的前端JavaScript项目，应该都会采用这种方式开发。
Browserify是浏览器端代码模块化的工具，服务器端NodeJS自带模块功能，可以使用require和module.exports构建项目，通过模块化可以将一个非常大的js代码分割成不同的模块，存储在不能的js文件中，大大提高项目的规范化，并且让团队合作也非常的轻松。但是在浏览器端没有这样的语法。不能在浏览器端导入多个js，browserify就是用了我们熟悉的require和module.exports，来实现模块化。
browserify的原理：部署时处理代码依赖，将模块打包到一起。开发的时候还是用nodejs的模式：require和module.exports，，但是部署的时候，首先处理代码依赖，将所用模块打包在一起，打包成一个完整的js文件，这样这个js文件中就不会有require，他需要的所有文件都导入到了一个文件中。

在传统开发模式中，我们必须将他们写在同一个js代码中，即使将他们分割开，在js代码中也要将他们用将他们全部引入。但是在browserify中，可以将他们当作模块来处理，js之间通过require来导入模块，部署到浏览器中时，我们执行browserify。执行完毕，我们发现他们呢在一个js文件中，没有了require，这样所有的依赖和依赖关系都被去掉了，

但是打包成一个文件又会出现另外的问题：
* 暂时用不到的代码也会被打包，体积大，首次加载速度慢，比如说打开一个网站的首页，需要的只是一部分的代码，但是他把所有的代码都给加载进去了，无论进入那个页面，都会去加载这个js，对于用户来说首屏的优化很重要。太慢用户不会等，
* 只要一个模块更新，整个文件缓存就会失效，当稍微有一点改变，用户就会重新加载这个非常庞大的js代码。
browserify也提供了上面问题的对应方法，那就是entrypoint入口点技术，每个入口点打包一个文件，两个入口点的相同依赖模块，单独打包成一个common.js，a页面，打包成一个a.js b页面打包成一个b.js，a
页面不需要包括b页面的js代码，b页面也不需要包含a页面的js代码，如果a页面和b页面用到了相同的js代码，那么久将他们打包成一个common.js在a页面引用a.js和common.js,在b页面引入b.js和common.js但是这样又会有弊端，可以解决单个文件问题，代价就是增加依赖维护成本。因为browserify不能帮助你判断入口点，你需要自己去指定入口点来打包，如果网站非常庞大，页面非常复杂，你去指定入口点的时候非常繁琐，但是对于一般的网站browserify就已经够用了，

实例

npm install browserify --save

–save的作用就是将他保存在package.json中

npm install reactify --save

其实他和gulp中的react 的作用是一样的，但是他不react不能和browserify很好的结合

npm install vinyl-source-stream --save

vinyl-source-stream的作用就是把browserify生成的代码，打包成gulp可以理解的代码 ，因为browserify不是为了gulp开发的，所以他的输出结果不能直接用在gulp中，browserify的输出不能直接作为gulp的输入，用vinyl-source-stream进行转化，然后用pipe()进行连接起来。
下边的代码是对上一节的代码进行优化。加入了browserify

var gulp = require('gulp');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var reactify = require('reactify');
gulp.task('jsx', function(){
 broeserify({
 entries:['./app.jsx'],//entriespoint技术，既然是数组，就可以些好几个。这里可以理解为处理依赖。
 transform:[reactify]//把打包好的代码进行过滤或者转换，这里就是转换，就是将jsx转换成js
 })//从这个角度来看，gulp和browserify在功能上是有一些重叠的。这两步完成后，就转换成了js代码。
 .bundle()//打包，将多个文件打包成一个文件，打包完成就会生成一个js
 .pipe(source())//将browserify处理过的代码，转化成gulp可以处理的代码。
 .pipe(gulp.dest('./'));//写入到当前目录下。
});
gulp.task('default',['jsx']);

所有的代码都被打包在app.js中。