写在前面：
本配置支持es6、less、react
1.首先
给出初始的目录结构
给出执行gulp后的目录结构
给出执行gulp --p后的目录结构
2.package.json里是一个写入。文件描述了npm包的相关配置信息（作者、简介、包依赖等）和所需模块。
{"name": "gruntTest", "version": "1.0.0","description": "","main": "Gulpfile.js"}
3.Gulpfile.js添加要执行的任务
var gulp = require('gulp');var uglify = require('gulp-uglify'); //js压缩var concat = require('gulp-concat'); //合并文件var minifyCSS = require('gulp-minify-css'); //css压缩var less = require('gulp-less'); //lessvar changedInPlace = require('gulp-changed-in-place');//不管修改哪个文件，gulp会简化DEST里的html文件var minifyHTML = require('gulp-htmlmin'); //简化htmlvar browserSync = require('browser-sync').create(); //自动刷新var babel = require('gulp-babel'); //支持es6var argv = require('yargs').argv; //支持不同环境var sequence = require('gulp-sequence'); //按照顺序执行var watch = require('watch'); //监听var clean = require('gulp-clean'); //监听//npm install --save-dev gulp-babel babel-preset-esvar DEST = 'dest/';var HTML_PATH = './src/*.html';gulp.task('minify-js', function(){if(argv.p){gulp.src('src/source/*.js').pipe(babel({presets: ['es','react']})).pipe(uglify()).pipe(concat('gruntTest.min.js')).pipe(gulp.dest(DEST+'js'))}else{gulp.src('src/source/*.js').pipe(babel({presets: ['es','react']})).pipe(uglify()).pipe(concat('gruntTest.min.js')).pipe(gulp.dest('src/js'))}});gulp.task('minify-css', function(){if(argv.p){gulp.src('src/less/*.less') //或者用['src/less/p1.less','src/less/p2.less'].pipe(less()).pipe(minifyCSS()).pipe(concat('style.min.css')).pipe(gulp.dest(DEST+'css')).pipe(browserSync.stream());}else{gulp.src('src/less/*.less') //或者用['src/less/p1.less','src/less/p2.less'].pipe(less()).pipe(minifyCSS()).pipe(concat('style.min.css')).pipe(gulp.dest('src/css')).pipe(browserSync.stream());}});gulp.task('minify-html', function(){gulp.src(HTML_PATH).pipe(changedInPlace({firstPass: true})).pipe(minifyHTML({collapseWhitespace: true})).pipe(gulp.dest(DEST)).pipe(browserSync.stream());});gulp.task('clean', function () {gulp.src(['./src/css/*.css','./src/js/*.js'], {read: false}).pipe(clean());});var files = ['./src/css/*.css','./src/js/*.js'];gulp.task('browser-sync', function(){browserSync.init(files,{server: {baseDir: './'},port: 9999});});gulp.task('watch', function() {gulp.watch('./src/source/*.js',['minify-js']);gulp.watch('./src/less/*.less',['minify-css']);});if(argv.p){//productgulp.task('default', sequence('minify-js','minify-css','minify-html','browser-sync'));}else{//developgulp.task('default', sequence('clean','minify-js','minify-css','watch','browser-sync'));}
4.扩展
（1）上面一堆require看着好烦人，也很庞大。此处可以引入“gulp-load-plugins”插件
var gulpLoadPlugins = require('gulp-load-plugins'),plugins = gulpLoadPlugins();plugins.uglify();即可执行相应任务
（2）若某个文件夹下好多文件，那么watch监听时需要一一列举，可以目录写成json格式（例如src.source.*.js）。通过引入“fs”插件，用fs.freaddirSync()方法去读路径。循环即可，此处的实现纯属写js代码。
