在推上看见阮一峰大神推荐了一个小工具挺不错的，网址： http://www.overreact.io/

如果像快速发开一个展示页面，效率肯定特别高，即使是就只生成组件，也比手动拆分方便很多，比较值的收藏，另外刚刚使用gulp还没怎么熟悉怎么写好gulpfile.js

正好遇到个，真是及时雨，生成个demo看看gulpfile.js

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var notify = require('gulp-notify');
var nodemon = require('gulp-nodemon');

function handleErrors() {
  var args = Array.prototype.slice.call(arguments);
  notify.onError({
    title : 'Compile Error',
    message : '<%= error.message %>'
  }).apply(this, args);
  //console.log('Compile error: ', args);
  this.emit('end'); //keeps gulp from hanging on this task
}

function buildScript(file, watch) {
  var props = {
    entries : ['./components/' + file],
    debug : true,
    transform : babelify.configure({
                presets: ["react", "es2015", "stage-0"]
                })
  };

  //watchify if watch set to true. otherwise browserify once
  var bundler = watch ? watchify(browserify(props)) : browserify(props);

  function rebundle(){
    var stream = bundler.bundle();
    return stream
      .on('error', handleErrors)
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('./build/'));
  }

  bundler.on('update', function() {
    var updateStart = Date.now();
    rebundle();
    console.log('Updated!', (Date.now() - updateStart) + 'ms');
  })

  // run it once the first time buildScript is called
  return rebundle();
}

// run once
gulp.task('scripts', function() {
  return buildScript('App.js', false);
});

//run nodemon
gulp.task('start', function() {
  nodemon({
    script: 'server/server.js',
    ext: 'js html',
    env: {'NODE_ENV': 'development'}
  })
});

// run 'scripts' task first, then watch for future changes
gulp.task('default', ['scripts', 'start'], function() {
  return buildScript('App.js', true);
});

还有就是package.json倒是也可以参考一下，最近接触了太多的包，有些模棱两可的不知道放在dependencies还是devDependencies，倒是帮我理清了思路，除了监控文件变动自动更新的依赖，其它都放在dependencies就好。

早就知道--save添加到dependencies下，--save-dev添加到devDependencies下，用的时候npm --install 就可以了，却一直没注意这有什么区别，搜索了一下，在生产环境，npm install –production就可以只安装dependencies下的必要依赖就可以了。

{
  "name": "overreactwithES6",
  "version": "1.0.0",
  "description": "Your awesome project!",
  "main": "bundle.js",
  "scripts": {
    "prestart": "npm run task",
    "start": "node server/server.js",
    "start-dev": "npm run task",
    "task": "gulp"
  },
  "author": "",
  "license": "ISC",

  "devDependencies": {
    "watchify": "^3.2.2",
    "gulp-nodemon": "^2.0.6"
  },
  "dependencies": {
    "path": "^0.12.7",
    "react": "^0.14",
    "react-dom": "^0.14.0",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.3.13",
    "babelify": "^7.2.0",
    "express" : "^4.13.3",
    "gulp": "^3.9.0",
    "gulp-notify": "^2.2.0",
    "vinyl-source-stream": "^1.1.0",
    "browserify": "^10.2.4"
    }
}

单纯的使用component也是非常不错的，省去很多麻烦的重复工作，整体而言，值的收藏