Gulp纵享丝滑 | Writing React with Gulp-演道网

本网站用的阿里云ECS,推荐大家用。自己搞个学习研究也不错

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

转载自演道,想查看更及时的互联网产品技术热点文章请点击http://go2live.cn

未经允许不得转载:演道网 » Gulp纵享丝滑 | Writing React with Gulp-演道网

赞 (0)
分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册