首先，npm install --save-dev等命令就不用说了。

先安装了以下东东：

安装插件：npm install --save-dev gulp  //打包工具//css相关npm install --save-dev gulp-less  //编译less文件 https://www.npmjs.com/package/gulp-autoprefixernpm install --save-dev gulp-clean-css //压缩css代码 https://github.com/scniro/gulp-clean-cssnpm install --save-dev gulp-autoprefixer //自动补全各浏览器的css前辍autoprefixer https://github.com/postcss/autoprefixer//jsnpm install babel-core gulp-babel babel-preset-es2015 babel-preset-stage-3 --save-dev //babel相关 //babel-plugin-transform-runtime babel的实时插件//maps生成npm install --save-dev gulp-sourcemaps //生成sourcemaps文件npm install --save-dev cross-env //scripts中在环境变量中加值npm install --save-dev concat //合并多文件npm install --save-dev uglify //合并js

package.json 生成的情况如下：

{  "name": "gulpTest",  "version": "1.0.0",  "description": "This is for study gulp project !",  "homepage": "",  "repository": {    "type": "git",    "url": "https://git.oschina.net/huhu/gulpTest"  },  "author": {    "name": "yfx",    "email": "3811970@qq.com"  },  "license": "ISC",  "scripts": {    "test": "cross-env NODE_ENV=production gulp"  },  "devDependencies": {    "babel-core": "^6.9.0",    "babel-preset-es2015": "^6.9.0",    "babel-preset-stage-3": "^6.5.0",    "cross-env": "^1.0.7",    "gulp": "^3.9.1",    "gulp-autoprefixer": "^3.1.0",    "gulp-babel": "^6.1.2",    "gulp-clean-css": "^2.0.7",    "gulp-concat": "^2.6.0",    "gulp-less": "^3.1.0",    "gulp-sourcemaps": "^1.6.0",    "gulp-uglify": "^1.5.3"  }}

gulpfile.js是gulp的执行配置脚本，可以通过  ./gulp运行这个脚本也可以scripts中加入命令（我加了个test）然后使用npm run test就可以了。

cross-env是加入环境变量的意思，直接引用到devDependencies中并在scripts中加入相应参数就可以使用process.env.XXXX得到配置的变量了(webpack的文档中老看到在用，用起来感觉不错)。

gulpfile.js内容：

var gulp=require('gulp');//cssvar less=require('gulp-less');var cleanCSS = require('gulp-clean-css');//css 代码压缩var autoprefixer = require('gulp-autoprefixer'); //css代码自动补全//jsvar babel = require('gulp-babel'); //css代码自动补全var uglify = require('gulp-uglify');//js压缩//toolvar sourcemaps = require('gulp-sourcemaps');//生成sourcemapsvar concat = require('gulp-concat'); //css代码自动补全//定义一个testLess任务（自定义任务名称）gulp.task('testLess', function () {    var gulpTest=gulp.src('src/css/*.less'); //该任务针对的文件 'src/css/xxx.less'|['src/css/xxx.less','src/css/xxx1.less']|'src/css/*.less' 都行    if(process.env.NODE_ENV!='production'){        gulpTest=gulpTest.pipe(sourcemaps.init());    }    gulpTest=gulpTest.pipe(less()) //该任务调用的模块        .pipe(autoprefixer({ browsers: [                'Android >= 4',                'Chrome >= 20',                'Firefox >= 24', // Firefox 24 is the latest ESR                'Explorer >= 9',                'iOS >= 6',                'Opera >= 12',                'Safari >= 6'            ], cascade: true , remove:false})) //自动补全        .pipe(cleanCSS())//{compatibility: 'ie8'} ie8|ie7|*(默认) 其它值为ie9+ 压缩css        .pipe(concat('app.css'));    if(process.env.NODE_ENV!='production'){        gulpTest=gulpTest.pipe(sourcemaps.write());    }    gulpTest=gulpTest.pipe(gulp.dest('dest/css')); //将会在src/css下生成index.css});gulp.task('testEs6', function () {    var gulpTest= gulp.src('src/js/*.es6');    if(process.env.NODE_ENV!='production'){        gulpTest=gulpTest.pipe(sourcemaps.init());    }    gulpTest=gulpTest.pipe(babel({presets: ['es2015','stage-3']}))        .pipe(uglify())        .pipe(concat('app.js'));    if(process.env.NODE_ENV!='production'){        gulpTest=gulpTest.pipe(sourcemaps.write());    }    gulpTest=gulpTest.pipe(gulp.dest('dest/js'));});//默认的任务gulp.task('default',['testLess','testEs6']); //定义默认任务

testLess是打包less的，能完成less的转换，兼容性（包括版本及各浏览器）自动补全，（css样式排序 ，css代码检查 没弄进去）想研究的可以在https://www.npmjs.com中查询到相应插件自行怎（gulp的当然要加gulp-，如gulp-csscomb）,压缩，文件合并，maps生成。

testEs6 是包打js的，能完成es6转es5，压缩，合并，maps生成。

加了环境变量读取。

实时查看的插件没有引入。babel，less，gulp的3个实时插件加上去就行。

遇到的坑：

不要使用nodejs6，nodejs6是支持es6，但gulp工具打包会有问题。我用的是4.4.4，github的官方回复说法是nodejs7才会修复此问题。

转载请说明来源，谢谢。