我的gulp使用

gulp作为流行的前端自动化构建工具,通过管道流的思想使我们更容易把控整个前端开发流程。本文简单记录一下我自己的gulp配置文件和自己学习和使用中收集的一部分资源,主要目的是为了自己在以后的开发过程中使用到gulp时,可以方便的查找一些基本配置和第三方插件。

如果想学习gulp的相关内容可以从下面第一小节关于gulp的一些资源bolg中查看一些网上的教程,如果你对gulp和webpack有疑问,想了解他们的区别也可以看一下这篇Gulp和Webpack对比

关于gulp的一些资源bolg

  1. Gulp中文网
  2. gulp详细入门教程
  3. 深入理解gulp自动化
  4. gulp插件大全

暂时只有这么多,gulp只在一个项目中使用过,遇到问题通过这几篇bolg也差不多都能解决。

gulp配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
//引入 gulp 工具
var gulp = require('gulp');
//引入 gulp-webserver 模块
var webserver = require('gulp-webserver');
//引入 sass 模块
var sass = require('gulp-sass');
//引入 minify 模块
var minifyCSS = require('gulp-minify-css');
// 引入js 相关模块
var named = require('vinyl-named');
var webpack = require('gulp-webpack');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
//引入 fs url模块
var fs = require('fs');
var url = require('url');
//引入 rev revCollector 模块
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var revAppend = require('gulp-rev-append');
//引入 sequence 模块
var sequence = require('gulp-sequence');
//引入 css前缀 模块
var autoprefixer = require('gulp-autoprefixer');
//启动server
gulp.task('webserver',function(){
gulp.src('./')
.pipe(webserver({
host:'localhost',
port:80,
//浏览器自动刷新
livereload:true,
//显示文件目录
directoryListing:{
enable: true,
path:'./'
},
//mock数据
middleware:function(req,res,next){
var urlObj = url.parse(req.url,true);
switch (urlObj.pathname) {
case '/pro/getPro':
res.setHeader('Content-Type','application/json;charaset=utf-8');
fs.readFile('./mock/list.json',function(err,data){
//上面list.json路径使用相对路径,绝对路径前台无法获取数据
res.end(data);
});
return;
case '/web/getUser':
//....
return;
}
next();
}
}));
});
//css 预处理
var cssFiles = [
'./src/styles/usage/page/index.scss'
]
gulp.task('sass',function(){
gulp.src(cssFiles)
.pipe(sass().on('error',sass.logError))
// .pipe(minifyCSS())//压缩css
.pipe(gulp.dest('./build/prd/styles/'));
});
//js 模块化,合并压缩
var jsFiles = [
'./src/scripts/app.js'
];
gulp.task('packjs',function(){
gulp.src(jsFiles)
.pipe(named())
.pipe(webpack({
output:{//定义输出文件名
filename:'[name].js'//此处[name]通过named()获取的
},
module:{
loaders:[{
test: /\.js$/,
loader:'imports?define=>false'//不符合commandJS规范的不编译
},
{
test:/\.string$/,
loader:'string'
}
]
}
}))
// .pipe(uglify().on('error',function(err){//压缩js文件
// console.log('\x07',err.lineNumber,err.message);
// return this.end();
// }))
.pipe(gulp.dest('./build/prd/scripts/'));
});
//合并成一个js文件
gulp.task('concat',function(){
gulp.src(jsFiles)
.pipe(concat('all.js'))//合并后的文件名
.pipe(gulp.dest('./build/prd/scripts/'));
});
var cssDistFiles = [
'./build/prd/styles/app.css'
];
var jsDistFiles = [
'./build/prd/scripts/app.js'
];
//css 添加前缀
gulp.task('autoprefixer',function(){
gulp.src(cssDistFiles)
.pipe(autoprefixer({
browsers:['last 2 cersions','Android >= 4.0'],
cascade: true,//是否美化属性值 默认:true 像这样:
//-webkit-transform: rotate(45deg);
// transform: rotate(45deg);
remove:true//是否去掉不必要的前缀 默认:true
}))
.pipe(gulp.dest('.build/ver/styles'))
});
// 版本号控制
gulp.task('ver',function(){
gulp.src(cssDistFiles)
.pipe(rev())//产生MD5码
.pipe(gulp.dest('./build/prd/styles/'))
.pipe(rev.manifest())//产生版本信息的json文件
.pipe(gulp.dest('./build/ver/styles/'));
gulp.src(jsDistFiles)
.pipe(rev())
.pipe(gulp.dest('./build/prd/scripts/'))
.pipe(rev.manifest())
.pipe(gulp.dest('./build/ver/scripts/'));
})
gulp.task('html',function(){
gulp.src(['./build/ver/**/*','./build/*.html'])
.pipe(revCollector())
.pipe(gulp.dest('./build/'));
})
gulp.task('min',function(callback){
sequence(['copy-index','ver','html'])(callback);
});
// rev 版本控制
gulp.task('rev-append',function(){
gulp.src('./build/*.html')
.pipe(revAppend())
.pipe(gulp.dest('build/html'));
})
//拷贝 index.html 到 build 文件夹
gulp.task('copy-index',function(){
gulp.src('./index.html')
.pipe(gulp.dest('./build/'));
});
//拷贝 images 到 build 文件夹
//
//注意:
//*.{jpg,png} 拷贝文件下的指定后缀的文件
//*.* 拷贝文件下的所有文件
//**/* 拷贝文件下所有文件(包括文件夹)
gulp.task('copy-images',function(){
gulp.src('./images/**/*')
.pipe(gulp.dest('./build/images/'));
})
/**
* 配置 default 任务,执行任务队列
* arg1[String]
*
*/
//侦测 文件变化,执行相应的任务
gulp.task('watch',function(){
gulp.watch('./index.html',['copy-index']);
gulp.watch('./images/**/*',['copy-images']);
gulp.watch('./src/styles/**/*',['sass','min']);
gulp.watch('./src/scripts/**/*',['packjs','min']);
});
gulp.task('default',['watch','webserver'],function(){
console.log('所有任务队列执行完毕');
})

常用插件

gulp-webserver: server服务
gulp-sass: sass预编译
gulp-less: less预编译
gulp-autoprefixer: css厂商前缀
gulp-minify-css: css压缩
gulp-webpack: webpack插件
vingl-named: 文件名索引查找插件
gulp-uglify: JS压缩
gulp-rev: MD5码
gulp-rev-collector: 版本控制
gulp-sequence: 序列执行gulptask(v3.9使用,v4.0则不需要了)
gulp-connect/gulp-connect-proxy: server代理

这里有一个gulp插件常用大汇总

小结

gulp用的不多,持续更新中相关资源和配置信息。

测试功能而已,你非要赏点我就没办法了...