Gulp 配置

Gulp 安装

前提条件:电脑已经配置好 Node.js 的环境。

1
$ npm install -g gulp-cli

进入工程目录,运行以下命令:

1
$ npm install --save-dev gulp

除了安装 Gulp 以外,不同的项目还需要安装不同的 Gulp 插件模块。常用模块:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ npm install --save-dev gulp-load-plugins
$ npm install --save-dev gulp-jshint
$ npm install --save-dev gulp-csslint
$ npm install --save-dev gulp-htmlhint
$ npm install --save-dev gulp-watch
$ npm install --save-dev gulp-shell
$ npm install --save-dev gulp-concat
$ npm install --save-dev gulp-clean
$ npm install --save-dev gulp-less
$ npm install --save-dev gulp-autoprefixer
$ npm install --save-dev gulp-uglify
$ npm install --save-dev gulp-cssmin
$ npm install --save-dev gulp-imagemin
$ npm install --save-dev gulp-htmlmin

或一行命令解决:

1
$ npm install --save-dev gulp-load-plugins gulp-jshint gulp-csslint gulp-htmlhint gulp-watch gulp-shell gulp-concat gulp-clean gulp-less gulp-autoprefixer gulp-uglify gulp-cssmin gulp-imagemin gulp-htmlmin

模板文件

每次都要输入这么多命令,有时候会记不住。其实我们只需要一个 package.json 文件就可以搞定:

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
{
"name": "gulp-demo",
"version": "1.0.0",
"description": "just for learn gulp.",
"devDependencies": {
"gulp": "^3.9.0",
"gulp-autoprefixer": "^2.3.1",
"gulp-clean": "^0.3.1",
"gulp-concat": "^2.6.0",
"gulp-csslint": "^0.1.5",
"gulp-cssmin": "^0.1.7",
"gulp-htmlhint": "^0.3.0",
"gulp-htmlmin": "^1.1.3",
"gulp-jshint": "^1.11.2",
"gulp-less": "^3.0.3",
"gulp-load-plugins": "^0.10.0",
"gulp-shell": "^0.4.2",
"gulp-uglify": "^1.2.0",
"gulp-watch": "^4.3.4"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"gulp"
],
"author": "xLsDg",
"license": "MIT"
}

每次需要使用的时候,将该文件放到项目文件夹下,在终端中输入 npm install 即可自动安装相应的模块。

配置模板

安装完模块之后,还需要配置一下对应的工作参数。新建 gulpfile.js 文件与 package.json 文件同一个目录下,内容为:

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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
var cssSrc = './less';
var cssDst = './css';

var jsSrc = './js/page';
var jsDst = './js/dist';

var htmlSrc = './views/**';
var htmlDst = './html';

var gulp = require('gulp');

var plugins = require('gulp-load-plugins')({
pattern: ['gulp-*', 'gulp.*'],
config: __dirname + '/package.json',
scope: ['devDependencies'],
replaceString: /^gulp(-|\.)/, // what to remove from the name of the module when adding it to the context
camelize: true, // if true, transforms hyphenated plugins names to camel case
lazy: true, // whether the plugins should be lazy loaded on demand
rename: {} // a mapping of plugins to rename
});

gulp.task('concat-css', function() {
return gulp.src([cssDst + '/*.css', '!' + cssDst + '/all.css'])
.pipe(plugins.concat('all.css'))
.pipe(gulp.dest(cssDst));
});

gulp.task('clean-css', function() {
return gulp.src([cssDst + '/*.css'], {
'read': false
})
.pipe(plugins.clean({
'force': false
}));
});

gulp.task('build-css', ['clean-css'], function() {
return gulp.src([cssSrc + '/*.less', '!' + cssSrc + '/variable.less'])
.pipe(plugins.less())
.pipe(plugins.csslint({
'important': false,
'adjoining-classes': false,
'known-properties': false,
'box-sizing': false,
'box-model': false,
'overqualified-elements': false,
'display-property-grouping': true,
'bulletproof-font-face': true,
'compatible-vendor-prefixes': false,
'regex-selectors': true,
'errors': true,
'duplicate-background-images': true,
'duplicate-properties': true,
'empty-rules': true,
'selector-max-approaching': true,
'gradients': true,
'fallback-colors': true,
'font-sizes': false,
'font-faces': true,
'floats': false,
'star-property-hack': false,
'outline-none': false,
'import': true,
'ids': true,
'underscore-property-hack': false,
'rules-count': true,
'qualified-headings': false,
'selector-max': true,
'shorthand': true,
'text-indent': true,
'unique-headings': false,
'universal-selector': true,
'unqualified-attributes': false,
'vendor-prefix': false,
'zero-units': true,
'force': true
}))
.pipe(plugins.csslint.reporter())
.pipe(plugins.autoprefixer({
browsers: [
'ie >= 8',
'ff >= 10',
'chrome >= 20',
'safari >= 7',
'opera >= 10',
'ios >= 7',
'android >= 2.3'
]
}))
.pipe(plugins.cssmin({
'compatibility': 'ie8',
'noAdvanced': true
}))
.pipe(gulp.dest(cssDst));
});

gulp.task('concat-js', function() {
return gulp.src([jsDst + '/*.js', '!' + jsDst + '/all.js'])
.pipe(plugins.concat('all.js'))
.pipe(gulp.dest(jsDst));
});

gulp.task('clean-js', function() {
return gulp.src([jsDst + '/*.js'], {
'read': false
})
.pipe(plugins.clean({
'force': false
}));
});

gulp.task('build-js', ['clean-js'], function() {
return gulp.src([jsSrc + '/*.js'])
.pipe(plugins.jshint({
'jquery': true, // 检查预定义的全局变量,防止出现$未定义,该项根据实际代码修改
'bitwise': false, // 不检查位运算
'browser': true, // 通过浏览器内置的全局变量检测
'devel': true, // 允许对调试用的alert和console.log的调用
'camelcase': true, // 强制验证驼峰式命名
'curly': true, // 强制使用花括号
'eqeqeq': false, // 不强制使用===比较运算符
'es3': true, // 兼容es3规范,针对旧版浏览器编写的代码
'esnext': false, // 不使用最新的es6规范
'expr': true, // 允许未赋值的函数名表达式,例如console && console.log(1)
'forin': false, // 不强制过滤遍历对象继承的属性
'freeze': false, // 不限制对内置对象的扩展
'immed': true, // 禁止未用括号包含立即执行函数
'indent': false, // 不强制缩进
'latedef': true, // 禁止先调用后定义
'maxdepth': false, // 不限制代码块嵌套层数
'maxparams': false, // 不限制函数参数个数
'newcap': false, // 不对首字母大写的函数强制使用new
'noarg': false, // 不禁止对arguments.caller和arguments.callee的调用
'noempty': false, // 不禁止空代码块
'nonew': false, // 允许直接new实例化而不赋值给变量
'plusplus': false, // 允许++和--运算符使用
'quotmark': 'single', // 字符串使用单引号
'scripturl': true, // 允许javascript伪协议的url
'smarttabs': false, // 允许混合tab和空格缩进
'strict': false, // 不强制使用es5严格模式
'sub': true, // 允许用[]形式访问对象属性
'undef': true, // 禁止明确未定义的变量调用,如果你的变量(myvar)是在其他文件中定义的,可以使用/*global myvar */绕过检测
'unused': false, // 允许定义没用的变量,在某些函数回调中,经常出现多个参数,但不一定会用
'multistr': false, // 禁止多行字符串,改用加号连接
'globals': {
'jQuery': true,
'FastClick': true,
'define': true,
'unescape': true,
'require': true,
'iScroll': true,
'host': true
}
}))
.pipe(plugins.jshint.reporter('default'))
.pipe(plugins.uglify())
.pipe(gulp.dest(jsDst));
});

gulp.task('clean-html', function() {
return gulp.src([htmlDst + '/*.html'], {
'read': false
})
.pipe(plugins.clean({
'force': false
}));
});

gulp.task('build-html', ['clean-html'], function() {
return gulp.src([htmlSrc + '/*.html'])
.pipe(plugins.htmlhint({
'tagname-lowercase': true,
'attr-lowercase': true,
'attr-value-double-quotes': true,
'attr-value-not-empty': false,
'attr-no-duplication': true,
'doctype-first': true,
'tag-pair': true,
'tag-self-close': true,
'spec-char-escape': true,
'id-unique': true,
'src-not-empty': true,
'head-script-disabled': true,
'img-alt-require': false,
'doctype-html5': true,
'id-class-value': true,
'style-disabled': false,
'space-tab-mixed-disabled': true,
'id-class-ad-disabled': true,
'href-abs-or-rel': true,
'attr-unsafe-chars': true,
'force': true
}))
.pipe(plugins.htmlhint.reporter())
.pipe(plugins.htmlmin({
'removeComments': false,
'removeCommentsFromCDATA': false,
'removeCDATASectionsFromCDATA': false,
'collapseWhitespace': true,
'conservativeCollapse': false,
'preserveLineBreaks': false,
'collapseBooleanAttributes': false,
'removeAttributeQuotes': false,
'removeRedundantAttributes': false,
'preventAttributesEscaping': false,
'useShortDoctype': false,
'removeEmptyAttributes': false,
'removeScriptTypeAttributes': false,
'removeStyleLinkTypeAttributes': false,
'removeOptionalTags': false,
'removeIgnored': false,
'removeEmptyElements': false,
'lint': false,
'keepClosingSlash': false,
'caseSensitive': false,
'minifyJS': false,
'minifyCSS': false,
'minifyURLs': false,
'ignoreCustomComments': [],
'processScripts': [],
'maxLineLength': [],
'customAttrAssign': [],
'customAttrSurround': [],
'customAttrCollapse': []
}))
.pipe(gulp.dest(htmlDst));
});

gulp.task('clean-all', ['clean-css', 'clean-js', 'clean-html'], function() {
console.log('Clean all files finish.');
});

gulp.task('build-all', ['build-css', 'build-js', 'build-html'], function() {
console.log('Build all files finish.');
});

gulp.task('no-html', ['build-css', 'build-js'], function() {
console.log('Build all files finish.');
});
gulp.task('no-js', ['build-css', 'build-html'], function() {
console.log('Build all files finish.');
});
gulp.task('no-css', ['build-js', 'build-html'], function() {
console.log('Build all files finish.');
});

gulp.task('watch', function() {
gulp.watch([cssSrc + '/*.less', jsSrc + '/*.js', htmlSrc + '/*.html'], ['build-all']).on('change', function(event) {
console.log('Event type: ' + event.type);
console.log('Event path: ' + event.path);
});
});

gulp.task('default', ['build-all'], function() {
console.log('Build all files finish.');
});

以上内容需根据实际项目情况小做修改即可。

参考资料

1.Gulp:任务自动管理工具

坚持原创技术分享,您的支持将鼓励我继续创作!