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

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

gulp詳細(xì)入門教程

當(dāng) React 遇見(jiàn) 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 來(lái)實(shí)現(xiàn)js模塊化加載
  這里是相關(guān)的簡(jiǎn)介
  這里是gulp-browserify的用法

• gulp-concat 是gulp用來(lái)合并js的插件
  具體用法

• gulp-react gulp 對(duì)jsx的預(yù)編譯

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

• js工具庫(kù) 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问答 项目开发的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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