react怎么写问答_react问答 项目开发

写博客中碰到的好的资源站

用到的模块

gulp

livereload

初始化环境

npm install react --save

npm install -g gulp

npm install --save-dev gulp gulp-browserify gulp-concat

gulp-react gulp-connect loadsh reactify

bower init bootstrap

gulp-concat 是gulp用来合并js的插件

具体用法

gulp-connect(官方的插件库里没有搜到这个插件) 功能是在本地启动一个web server, 主要是运行livereload服务器

具体用法在这里

创建glupfile.js

var gulp = require('gulp'),

connect = require('gulp-connect'),

browserify = require('gulp-browserify'),

concat = require('gulp-concat'),

port =process.env.port ||5000;

gulp.task('browserify', function () {

gulp.src('./app/js/main.js')

.pipe(browserify({

transform:'reactify',

}))

.pipe(gulp.dest('./dist/js'))

})

//live reload

gulp.task('connect', function () {

connect.server({

root:'./',

port:port,

livereload:true,

})

})

//reload js

gulp.task('js', function () {

gulp.src('./dist/**/*.js')

.pipe(connect.reload())

})

//reload html

gulp.task('html', function () {

gulp.src('../app/**/*.html')

.pipe(connect.reload())

})

gulp.task('watch', function () {

gulp.watch('./dist/**/*.js',['js']);

gulp.watch('./app/**/*.html',['html']);

gulp.watch('./app/js/**/*.js',['browserify']);

})

gulp.task('default',['browserify']);

gulp.task('serve',['browserify','connect','watch'])