之前从网上看到用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值得新文件名替换掉。