教你使用gulp搭建一个react本地服务器环境

http://blog.sina.com.cn/s/blog_65042a230102wnvb.html

这几天着手学习react开发，在第一步的搭建环境稍微遇到了一些难题，不过幸好花了一天半总算是解决了这一个难题，这里分享一下。
注意：这个教程需要使用Nodejs,http://blog.sina.com.cn/s/blog_65042a230102wnvb.html没有安装的同学请先自行安装。

首先确定一下我们的环境需要哪些功能？
第一：可以完美运行react代码（废话）
第二：在修改代码的同时，代码自动更新，浏览器自动刷新（需要安装RemoteLiveReload这个浏览器插件）
第三：利用browserify合并js文件，并且转换代码使react能够被浏览器解析。
首先，我们需要先创建一个NODEJS的环境，首先找个合适的位置创建一个文件夹，打开命令提示符（建议使用管理员身份打开），cd 你的路径，输入npm init，填写相关信息。
接下来，我们需要安装本次的主角，如下
npm install -g gulp（搭建环境必须的东西）
npm install  glup --save-dev
npm install -g browserify（用于requireJS，达成模块化）
（-g代表全局安装gulp）
接下来，安装一些第三方包（详细方法稍后介绍）
npm install --save -dev gulp-connect (用于启动Web服务器)
npm install --save -dev babelify（用于解析ES2015，React语法）
npm install --save -dev vinyl-source-stream （用于将browserify输出的数据转换为符合gulp标准的数据）
然后安装babelify需要的预设
npm install --save -dev babel-preset-es2015
npm install --save -dev babel-preset-react

这里使用的gulp方法主要有:task watch dest,不熟悉的朋也可以花十五分钟去gulp的中文官网查看API。

安装完这些需要的东西后，我们开始创建 gulpfile.js 文件，这是一个执行gulp命令自动执行的文件，文件名必须是这个（大概）。
引用我们刚刚安装的包、设置端口并赋值给变量
var gulp=require("gulp"),
      browserify=require("browserify"),
      connect=require("gulp-connect"),
      babelify=require("babelify"),
      source=require("vinyl-source-stream"),
      port=process.env.port || 5000;

接下来，我们来创建一个监听的任务，利用watch检测改动的文件。(watch的第二个参数是我们后面创建的task，暂时不需要管)
gulp.task("watch",function(){
gulp.watch(["你的html路径"],["html"]);
gulp.watch(["你的js文件路径"],["js"]);//(比如这样：["./app/*.js"])
gulp.watch(["你的css文件路径"],["css"]);
gulp.watch([""你的js文件路径],["browserify"]);
})
这段代码表示，监听你所设定的文件，然后执行后面的任务，很好理解吧。

接下来我们写connect的任务，这个功能自然是创建web服务器啦。

gulp.task("connect",function(){
connect.server({
root:'./',
port:port,//开头我们设置的port
livereload:true;//使用自动刷新
});
});
很短吧，就是这样。我们接下来写html,js,css这三个任务。
gulp.task("html",function(){
gulp.src("你的html路径").pipe(connect.reload());
});
//要注意的是，这个js文件是通过browserify合并的js文件的路径！当然browserify的任务我们后面才会写

gulp.task("js",function(){
gulp.src("你合并后的js路径").pipe(connect.reload());
});

gulp.task("css",function(){
gulp.src("你的css路径").pipe(connect.reload());
});

connect.reload()的作用就是重新加载这个文件啦.

接下来就是最重要的部分，解析合并生成！

gulp.task("browserify",function(){
browserify("你合并前的JS文件的路径").transform(babelify,{
presets:['es2015','react']
}).bundle().pipe(source("bundle.js")).pipe(gulp.dest("你合并后的js的文件所存放的路径"))
});

使用browserify方法处理你所要处理的js，然后使用transform方法解析。

第一个参数为之前设定的babelify，第二个参数为之前安装的两个预设包。
使用browserify的bundle()方法对文件进行打包，然后使用Nodejs的pipe方法将文件转到source方法，让它将这个js文件转为适合gulp的文件。

再使用pipe方法将文件转到gulp.dest方法，输出这个合并好的js文件。

好长，慢慢理解吧ww。

最后就是一些收尾的代码了。

设定默认的任务指令
gulp.task("default",["browserify"]);
设定你启动上述任务的代码（平常我们就使用这个）
gulp.task("server(按你喜好取名字就好)",["browserify","conncet","watch"]);

最后你可以试试在命令指令行输入 gulp server，这样服务器就启动成功了！当然要看到效果，首先你要写一些react代码啦，这里就不多说了，赶紧动手试吧。