Gulp纵享丝滑 | Writing React with Gulp

Node.js

首先是确定要有node滴（这不是废话吗Orz...），若是尚未安装的话请自行询问你最喜欢的搜索引擎，相信她必定会很优雅的告诉你如何在或Windows或Mac或Linux上安装Node哒。

Initialize Your Project

进入项目的目录，而后↓

cnpm init

根据命令行的提示建立项目的package.json文件，固然了，你也能够本身手动建立这个文件（讲道理应该不多人会这么作吧...）。我用的是npm cnpm，它在国内能够完美的代替npm，而且得到更快的包安装速度，详情请访问淘宝镜像官网。

Install Gulp

接下来就要安装gulp了，我首先进行全局安装 ↓

cnpm install -g gulp

全局安装的目的是为了经过它来执行gulp任务。
Next，本地安装 ↓

cnpm install --save-dev gulp

安装完成以后打开package.json文件，就会发现gulp被写在了devDependencies字段里，成为项目的开发阶段依赖。本地安装gulp的目的是为了成功的调用gulp插件。

Install Gulp Plugins

Gulp是一款用来实现自动化的构建工具，诸如压缩代码、合并脚本、自动刷新等任务，都是经过gulp在项目中调用各类各样的插件来实现的。正所谓工欲善其事必先利其器，工欲利其器必先get其器，先来安装这些插件吧 ↓

cnpm install --save-dev browserify vinyl-source-stream babelify babel-preset-es2015 babel-preset-react gulp-streamify gulp-uglifyjs gulp-connect

一口气装了这么多插件，他们都是干什么的呢？

1. browserify: 实现浏览器端的模块和依赖管理——约定用require()来引用模块，用module.exports来导出模块。

2. vinyl-source-stream: 这个插件的做用是转换流模式，若是咱们须要将gulp及gulp插件和常规的可读流一块儿使用，就须要先把可读流转换为vinyl。

3. babelify, babel-preset-es2015, babel-preset-react: 用来编译es6以及react的jsx为浏览器能够识别的js。

4. gulp-streamify: 将当前插件的输出转化为可读流，使得其后的只能操做可读流的插件正常工做。

5. gulp-connect: 起服务器+自动刷新的一条龙服务。

6. gulp-uglifyjs: 看名字就知道了，丑化js。

Edit your Gulpfile.js

gulp会根据gulpfile.js这个文件去执行用户自定义的gulp任务，因此这是整个gulp构建中最重要的一步。
Talk is cheap, show u the code ↓

//gulpfile.js
var gulp = require('gulp');
var connect = require('gulp-connect');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
var uglify = require('gulp-uglifyjs');
var streamify = require('gulp-streamify');

gulp.task('connect', function(){//起服务器
        connect.server({
                root: './',
                port: '3000',
                livereload: true,
                host: 'localhost'
        });
});

gulp.task('bundle', function(){//打包
        return browserify({entries: './src/main.js', extensions: ['jsx'], debug: true})
                .transform(babelify,{
                        presets: ['es2015','react']
                })
                //.transform(require('browserify-shim'))
                .bundle()
                .pipe(source('bundle.js'))
                .pipe(streamify(uglify()))
                .pipe(gulp.dest('./dist'))
                .pipe(connect.reload());//重启（刷新）
});

gulp.task('watch', function(){//监听须要改动的文件，指定发生变更时执行的任务，并在命令行输出被改动的文件路径和变更类型
        var watcher = gulp.watch(['./src/*.js','./src/*/*.js'],['bundle']);
        watcher.on('change', function(event){
                console.log(event.path + ' was ' + event.type + ', bundle again...');
        });
});

gulp.task('default',['bundle','connect','watch']);

就是这样一个gulpfile.js文件，帮咱们实现了先将es6和jsx编译成es5（反正是浏览器能够读懂的js）；再将代码打包成dist目录下的bundle.js并丑化之（固然，若是在开发过程当中没有丑化代码的需求的话也能够不要这一步），因此在html文件中就只须要引用bundle这个js文件就能够了:)；最后实现了对代码的监听，若发生变更则自动从新打包再刷新浏览器，对手动刷新say goodbye，纵享丝滑。
这里注意到在bundle任务中有一行任务被注释掉了，解释一下：由于项目依赖了React（react + react-dom），因此当执行完一次bundle任务后，在不压缩的状况下，打包成的bundle.js有1M左右，压缩后也有200k。这行被注释掉的代码，其做用就是在打包的时候忽略依赖的库或框架，这样就能大大缩小打包结果文件的体积，可是若是要这么作，你须要：

1. 在html文件中用script标签引入被忽略模块

2. 为package.json文件增长配置，说明须要忽略的模块：

{
  "browserify-shim": {
    "react": "global:React",
    "react-dom": "global:ReactDOM"
  }
}

将全部的任务写在一个名为default的gulp任务内，保证在命令行只须要敲一个gulp就能够执行全部的任务。

Gulp！

如今已经完成了全部的工做了，接下来的事情就交给gulp去作吧。
进入项目目录，输入命令：

gulp

如今你就能够专心于coding啦。

What U Always Need to Do ↓

1. Make sure u have installed Nodejs

2. Use npm init cnpm init to initialize ur project

3. Install gulp

4. Install the gulp plugins u need

5. Edit ur gulpfile.js

6. Run gulp

Recommand