課程地址:http://zexeo.com/course/56753a22b2b8de861c0d281a

寫博客中碰到的好的資源站

gulp詳細入門教程

當 React 遇見 Gulp 和 Browserify

webpack 入門

用到的模塊

gulp

livereload

### 初始化環(huán)境

npm install react --save npm install -g gulpnpm install --save-dev gulp gulp-browserify gulp-concat gulp-react gulp-connect loadsh reactifybower init bootstrap

• bowerify是利用nodejs 來實現(xiàn)js模塊化加載
  這里是相關(guān)的簡介
  這里是gulp-browserify的用法

• gulp-concat 是gulp用來合并js的插件
  具體用法

• gulp-react gulp 對jsx的預編譯

• gulp-connect(官方的插件庫里沒有搜到這個插件) 功能是在本地啟動一個web server, 主要是運行l(wèi)ivereload服務器
  具體用法在這里

• js工具庫 loadsh

• reactify ->Bowserify transform for JSX

---

創(chuàng)建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 reloadgulp.task('connect', function () {connect.server({root:'./',port:port,livereload:true,})})//reload jsgulp.task('js', function () {gulp.src('./dist/**/*.js').pipe(connect.reload())})//reload htmlgulp.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'])

---

轉(zhuǎn)載于:https://www.cnblogs.com/zhaozhanjun/p/5072433.html

總結(jié)

以上是生活随笔為你收集整理的react问答 项目开发的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。