之前从网上看到用gulp构建的人还是挺多的，今天试着学习了一下，基本都是从其他网站摘录的，以下是总结：
还是先贴一下项目结构吧：
我把原始的代码都放到了assets文件里边，dist是gulp生成的images，scripts，styles，所有的*.html都发布到了根目录
一、全局安装gulp：
$ npm install --global gulp
二、创建package.json
进入项目根目录，利用npm init根据提示，首先创建package.json文件，然后根据自己的需要，导入所依赖模块，具体的包详见下文gulpfile.js
下载地址：https://www.npmjs.com
比如下载gulp-minify-css，直接执行npm install --save-dev gulp-minify-css
--save-dev部分最好都写上，这样能自动把模块和版本号添加到package.json里的devdependencies部分
依次导入所有依赖的模块。
三、在根目录创建gulpfile.js文件
以下是gulpfile.js的详细内容：
1 // 载入外挂 2 var gulp = require('gulp'), 3 autoprefixer = require('gulp-autoprefixer'), //处理浏览器前缀 4 minifycss = require('gulp-minify-css'), //压缩css 5 jshint = require('gulp-jshint'), //检测js 6 uglify = require('gulp-uglify'), //压缩js 7 imagemin = require('gulp-imagemin'), //压缩image 8 rename = require('gulp-rename'), //重命名 9 clean = require('gulp-clean'), //清理 10 concat = require('gulp-concat'), //合并 11 notify = require('gulp-notify'), //提示 12 cache = require('gulp-cache'), 13 livereload = require('gulp-livereload'), //自动刷新 14 rev = require('gulp-rev'), //添加md5 15 minifyhtml = require('gulp-minify-html'), //压缩html 16 revCollector = require('gulp-rev-collector'); //路径替换 17 18 // 样式 19 gulp.task('styles', function() { 20 return gulp.src('assets/css/main.css') 21 .pipe(autoprefixer({ 22 browsers: ['last 2 versions'], 23 cascade: true, //是否美化属性值 默认：true 像这样： 24 //-webkit-transform: rotate(45deg); 25 // transform: rotate(45deg); 26 remove:true //是否去掉不必要的前缀 默认：true 27 })) 28 .pipe(gulp.dest('dist/styles')) 29 .pipe(rename({ suffix: '.min' })) 30 .pipe(minifycss()) 31 .pipe(rev()) 32 .pipe(gulp.dest('dist/styles')) 33 .pipe(rev.manifest())//- 生成一个rev-manifest.json 34 .pipe(gulp.dest('./rev/css')) 35 .pipe(notify({ message: 'Styles task complete' })); 36 }); 37 38 // 脚本 39 gulp.task('scripts', function() { 40 return gulp.src(['assets/js/vendor/*.js','assets/js/*.js']) 41 .pipe(jshint('.jshintrc')) 42 .pipe(jshint.reporter('default')) 43 .pipe(concat('main.js')) 44 .pipe(gulp.dest('dist/scripts')) 45 .pipe(rename({ suffix: '.min' })) 46 .pipe(uglify()) 47 .pipe(rev()) 48 .pipe(gulp.dest('dist/scripts')) 49 .pipe(rev.manifest())//- 生成一个rev-manifest.json 50 .pipe(gulp.dest('./rev/js')) 51 .pipe(notify({ message: 'Scripts task complete' })); 52 }); 53 54 // 图片 55 gulp.task('images', function() { 56 return gulp.src('assets/img/*') 57 .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) 58 .pipe(gulp.dest('dist/images')) 59 .pipe(notify({ message: 'Images task complete' })); 60 }); 61 62 //压缩Html/更新引入文件版本 63 gulp.task('minify-html', function() { 64 return gulp.src(['rev/*/*.json','assets/*.html']) 65 .pipe( revCollector()) 66 .pipe(minifyhtml({ 67 conditionals: true, 68 spare:true 69 })) 70 .pipe(gulp.dest('./')) 71 .pipe(notify({ message: 'Htmls task complete' })); 72 }); 73 74 // 清理 75 gulp.task('clean', function() { 76 return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false}) 77 .pipe(clean()); 78 }); 79 80 // 预设任务 81 gulp.task('default', ['clean'], function() { 82 gulp.start('styles', 'scripts', 'images'); 83 }); 84 85 // 看守 86 gulp.task('watch', function() { 87 88 // 看守所有.css档 89 gulp.watch('assets/css/*.css', ['styles']); 90 91 // 看守所有.js档 92 gulp.watch('assets/js/**/*.js', ['scripts']); 93 94 // 看守所有图片档 95 gulp.watch('assets/img/**/*', ['images']); 96 97 //看守所有.html档 98 gulp.watch('assets/*.html', ['html']); 99 100 // 建立即时重整伺服器101 var server = livereload();102 103 // 看守所有位在 dist/ 目录下的档案，一旦有更动，便进行重整104 gulp.watch(['dist/**']).on('change', function(file) {105 server.changed(file.path);106 });107 108 }); 四、执行gulp可执行gulpfile.js里所有的task，也可单独执行某一个任务，如gulp scripts
五、遇到的几个问题：
1、有个png图片深度压缩的依赖模块没有安装成功，npm install imagemin-pngquant --save-dev （未安装成功），因为我这个项目所有图片已经手动压缩过了，也就暂时没去管这个问题，有时间了再好好查一下吧。
2、检测js语法模块gulp-jshint执行的时候会报错，提示缺少.jshintrc文件，于是搜了一下需要再根目录配置一下.jshintrc
{ "bitwise" : true, "browser" : true, "curly" : true, "eqeqeq" : true, "eqnull" : true, "esnext" : true, "immed" : true, "jquery" : true, "latedef" : true, "newcap" : true, "noarg" : true, "node" : true, "strict" : false, "trailing" : true} 这里具体怎么配置没有详细查。。。
3、在定义模块名称的时候，有一个用了大写，直接执行gulp没有生效，单独执行这一个任务，报错，总是报未定义，后来改成了小写，就好了，这里不清楚是为什么
minifyHtml = require('gulp-minify-html') , 单独执行gulp minify-html任务，这一行.pipe(minifyHtml(...))总是会报minifyHtml未定义，改成小写之后没问题了。
4、在执行压缩的时候，基本没遇到什么问题，gulp-rev和gulp-rev-collector配合使用的时候遇到一点儿问题，执行.pipe(rev.manifest())//- 生成一个rev-manifest.json
把生成的json文件，分别放到了rev的css和rev的js里，这样每次执行revCollector就会查找*.html里所有的main.min.css和main.min.js文件，并且用添加md5值得新文件名替换掉。