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() )
})

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']);


需要熟记的5个函数；

gulp只有五个方法： ​​task​​ ， ​​run​​ ， ​​watch​​ ， ​​src​​ ，和 ​​dest​​ ，在项目根目录新建一个js文件并命名为 gulpfile.js 


// 引入 gulp
var gulp = require('gulp'); 

// 引入组件
//var jshint = require('gulp-jshint');
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 检查脚本
/*gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});*/

// 编译Sass
gulp.task('sass', function() {
    gulp.src('./sass/*.sass')
        .pipe(sass())
        .pipe(gulp.dest('./css'))
        .pipe(rename('all.min.css'))
         .pipe(gulp.dest('./css'));
});

// 合并，压缩文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

// 默认任务
gulp.task('default', function(){
    gulp.run('sass', 'scripts');

    // 监听文件变化
    gulp.watch('./js/*.js', function(){
        gulp.run('sass', 'scripts');
    });
});