最近使用gulp工具，将公司现有项目重新构建了下，有许多大改动，绕了许多坑，我不擅长表达，只能把我现在总结出的对的和比较深刻的应该注意的几点记录下来，免得以后自己都忘记了。
一，基本环境的搭建，安装nodejs、npm。（给新手看得，会的直接跳过）
先下载安装程序：http://nodejs.cn/download/
1、Windows 安装包(.msi)；
2、安装msi，这里最好使用管理员命令行来进行安装
3、安装完后配置环境变量（注意新版的node会帮忙修改好环境变量）
新建一个用户变量：
变量名：NODE_PATH
值：C:\Program Files\nodejs\node_modules
系统变量修改（node安装时会给改好）
变量名：path
值：添加 C:\Program Files\nodejs
3、检测PATH环境变量是否配置了Node.js，点击开始=》运行=》输入"cmd" => 输入命令"path"
4、在命令提示符窗口输入 node -v 和 npm -v 检查安装的版本号
二、使用npm安装gulp已经各种需要的gulp包
1.先生成package.json ，命令： npm init
2.安装gulp，全局安装 命令： npm install gulp -g
3.安装所需要的gulp包：
npm install gulp gulp-clean gulp-htmlmin gulp-imagemin gulp-less gulp-minify-css gulp-rename gulp-rev gulp-rev-collector gulp-seajs-concat gulp-seajs-transport gulp-sourcemaps gulp-uglify merge-stream yargs --save-dev
4.安装完成后，package.json的文件内容，其中devDependencies 如下图
三、目录结构，这个东西，根据自己的来的，在配置gulpfile文件的时候对应好就行
四、编写配置文件gulpfile，我直接上代码吧，然后再解释
var gulp = require('gulp'),
yargs = require('yargs').argv,//获取运行gulp命令时附加的命令行参数
imagemin = require('gulp-imagemin'), //图片压缩
less = require('gulp-less'),
minifyCss = require('gulp-minify-css'),
sourcemaps = require('gulp-sourcemaps'),
jshint = require('gulp-jshint'), //js检查
transport = require('gulp-seajs-transport'), //合并seajs用
concat = require('gulp-seajs-concat'), //合并seajs用
uglify = require('gulp-uglify'), //js压缩
merge = require('merge-stream'), //合并多个流
replace = require('gulp-replace-task'),//对文件中的字符串进行替换
htmlmin = require('gulp-htmlmin'),
rename = require('gulp-rename'),
clean = require('gulp-clean');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
gulp.task('allLess', function(){
return gulp.src(['./assets/less/*.less','!./assets/less/reset.less'])
.pipe(sourcemaps.init())
.pipe(less())
.pipe(gulp.dest('./assets/css'))
.pipe(minifyCss())
.pipe(rev())
.pipe(sourcemaps.write())
.pipe(gulp.dest('./dist/css/'))
.pipe(rev.manifest())
.pipe(gulp.dest('./dist/rev/css'));
});
gulp.task('image', function(){
var imgSrc = './assets/image/**/*',
imgDst = './dist/image';
gulp.src(imgSrc)
.pipe(imagemin())
.pipe(gulp.dest(imgDst));
});
gulp.task('seajs', function(){
return merge(
gulp.src('./assets/scripts/!(lib)/**/*.js', {base: './assets/scripts'})
.pipe(transport())
.pipe(concat({
base: './assets/scripts'
}))
.pipe(gulp.dest('./dist/js_tmp'))
);
})
gulp.task('scripts_uglify', ['seajs'], function(cb){
return gulp.src([
'./dist/js_tmp/app/**/*.js'
], {base : './dist/js_tmp'})
.pipe(uglify({
mangle:{
except: ['require', 'exports', 'module', '$', 'Zepto', 'jQuery', '_hmt'] //这几个变量不压缩
}
}))
.pipe(rev())
.pipe(gulp.dest('./dist/scripts'))
.pipe(rev.manifest())
.pipe(gulp.dest('./dist/rev/js'))
});
//html 压缩
gulp.task('html', ['allLess', 'scripts_uglify'], function () {
var options = {
removeComments: true, //清除HTML注释
collapseWhitespace: true, //压缩HTML
collapseBooleanAttributes: true, //省略布尔属性的值 ==>
removeEmptyAttributes: true, //删除所有空格作属性值 ==>
removeScriptTypeAttributes: true, //删除