var gulp = require('gulp'); var babel = require('gulp-babel'); var browserify = require('gulp-browserify'); var uglify = require('gulp-uglify'); var rename = require('gulp-rename'); var connect = require('gulp-connect'); //this task is responsible for compiling, bundling, renaming, compressing, and generating the released JS file. gulp.task('build', function() { return gulp.src('app/jsx/*') .pipe(babel({ presets: ['react'] })) .pipe(browserify()) .pipe(rename('main.min.js')) .pipe(uglify()) .pipe(gulp.dest('app/js')) }); //this task will watch any change in app/jsx folder and then re-build it. gulp.task('watch', function() { gulp.watch([ 'app/jsx/*' ], function() { //any changed detected, call build task gulp.run('build'); }); }); //this task will run a server listening at port 8080 gulp.task('server', function() { connect.server({ root: 'app', port: 8080, livereload: true }); });
build任务负责执行一次构建任务，watch任务负责监听jsx目录变化，如有改动则立即再次执行构建任务，server任务负责启动一个服务，在8080端口监听。
最后如果要运行里面的任务，我们需要先在全局安装命令行工具：
npm install --global gulp-cli
然后，在项目当前目录下，执行一个任务：
gulp watch
开启一个新的命令行，启动Web服务：
gulp server
之后在浏览器中输入localhost:8080就可以看到我们的index.html内容了。
上面的项目已放到Github上，感兴趣的同学可以去看一下，也可以克隆到本地亲自试一试。
源码下载
github地址：https://github.com/scottliu2011/react-dev
本地下载地址：(jb51.net).rar
使用gulp构建前端工程大大简化了开发流程，大家也可以在这个简易项目基础上针对实际项目做一些扩展，当然如果学习React过程中有了新的构建需求，我也会及时更新到Github上的。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章: