const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const cssnano = require('gulp-cssnano');
const concat = require('gulp-concat');
const browserify = require('browserify');
const babelify=require('babelify');
const source = require('vinyl-source-stream');
// 编译并压缩js
gulp.task('convertJS', function(){return gulp.src('app/js/*.js').pipe(babel({presets: ['es2015','react']})).pipe(uglify()).pipe(gulp.dest('dist/js'))
})
// 合并并压缩css
gulp.task('convertCSS', function(){return gulp.src('app/style/*.scss').pipe(sass()).pipe(concat('app.css')).pipe(cssnano()).pipe(rename(function(path){path.basename += '.min';})).pipe(gulp.dest('dist/style'));
})
// 监视文件变化，自动执行任务
gulp.task('watch', function(){gulp.watch('app/style/*.scss', ['convertCSS']);gulp.watch('app/js/*.js', ['convertJS', 'browserify']);
})
// browserify
gulp.task("browserify", function () {var b = browserify({entries: "dist/js/app.js"});return b.transform(babelify).bundle().pipe(source("bundle.js")).pipe(gulp.dest("dist/js"));
});
gulp.task('start', ['convertJS', 'convertCSS', 'browserify', 'watch']);

import React from 'react';
import ReactDOM from 'react-dom';
import { hashHistory, Route, Router } from 'react-router';
import { render } from 'react-dom'import List from './list';class Photo extends React.Component {render() {return <p>hello, winty!</p>}
}render((<Router history={hashHistory}><Route path="/" component={Photo}/>{/* add the routes here */}<Route path="/list" component={List}/></Router>
), document.getElementById('app'));

import React from 'react'class List extends React.Component {render() {return <div>hello,List</div>
    }
}