react问答 项目开发

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

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

1. gulp详细入门教程
2. 当 React 遇见 Gulp 和 Browserify
3. webpack 入门

用到的模块

1. gulp
2. 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

• bowerify是利用nodejs 来实现js模块化加载
  这里是相关的简介
  这里是gulp-browserify的用法

• gulp-concat 是gulp用来合并js的插件
  具体用法

• gulp-react gulp 对jsx的预编译

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

• js工具库 loadsh

• reactify ->Bowserify transform for JSX

---

创建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'])

---