纵享丝滑 | React with Gulp

纵享丝滑 | 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

图片发自App