之前被grunt的各种配置搞得头大，后来发现居然有gulp这样的好东西，于是就入坑了
创建package.json
npm init安装gulp
全局安装（因为要使用gulp命令）
npm i gulp -g项目安装（当然是项目需要咯）
npm i gulp --save-devi：install简写
--save-dev：自动添加到devdependencies
安装gulp插件
常用插件
gulp-sequence 顺序执行
gulp-jshint js语法检测
gulp-imagemin 图片压缩
imagemin-pngquant 图片压缩（png）
gulp-clean-css css压缩
gulp-uglify js压缩
gulp-htmlmin html压缩（js、css压缩）
gulp-minify-html html压缩（js模板压缩）
gulp-rev MD5版本号
gulp-rev-collector 版本替换
gulp-cache 缓存
安装示例
npm i gulp-sequence --save-dev安装gulp-jshint要注意需要额外安装下jshint
安装好后我们的package.json文件内容就如下所示啦：
{
"name": "gulp-study",
"version": "1.0.0",
"description": "gulp study",
"main": "gulpfile.js",
"keywords": [
"gulp"
],
"author": "xiaomeng",
"license": "ISC",
"devDependencies": {
"gulp": "^3.9.1",
"gulp-cache": "^0.4.5",
"gulp-clean-css": "^2.0.11",
"gulp-htmlmin": "^2.0.0",
"gulp-imagemin": "^3.0.2",
"gulp-jshint": "^2.0.1",
"gulp-minify-html": "^1.0.6",
"gulp-rev": "^7.1.0",
"gulp-rev-collector": "^1.0.5",
"gulp-sequence": "^0.4.5",
"gulp-uglify": "^1.5.4",
"imagemin-pngquant": "^5.0.0",
"jshint": "^2.9.2"
}
}创建gulpfile.js
gulpfile.js文件内容
var gulp = require("gulp"),
sequence = require("gulp-sequence"),//顺序执行
jsHint = require("gulp-jshint"),//js语法检测
minImage = require("gulp-imagemin"),//图片压缩
minImageForPng = require("imagemin-pngquant"),//图片压缩（png）
minCss = require("gulp-clean-css"),//css压缩
minJs = require("gulp-uglify"),//js压缩
minHtml = require("gulp-htmlmin"),//html压缩（js、css压缩）
minHtmlForJT = require("gulp-minify-html"),//html压缩（js模板压缩）
rev = require("gulp-rev"),//MD5版本号
revCollector = require("gulp-rev-collector"),//版本替换
cache = require("gulp-cache");//缓存
//配置
var config = {
//资源文件
source: {
//源文件
src: {
font: "src/font/*",
css: "src/css/*.css",
ajaxJs: "src/ajaxJs/*.js",
js: "src/js/*.js",
images: "src/images/*.{png,jpg,gif,ico}",
html: "src/html/*.html"
},
//MD5版本号文件
rev: {
font: "rev/font/*.json",
css: "rev/css/*.json",
ajaxJs: "rev/ajaxJs/*.json",
js: "rev/js/*.json"
},
//替换版本后的文件
revCollector: {
css: "revCollector/css/*.css",
html: "revCollector/html/*.html"
}
},
//目录
dir: {
//MD5版本号文件目录
rev: {
font: "rev/font",
css: "rev/css",
ajaxJs: "rev/ajaxJs",
js: "rev/js"
},
//替换版本后的文件目录
revCollector: {
css: "revCollector/css",
html: "revCollector/html"
},
//正式文件目录
dist: {
css: "dist/css",
ajaxJs: "dist/ajaxJs",
js: "dist/js",
images: "dist/images",
html: "dist/html"
}
}
};
//任务
var task = {
jsHint: "jsHint",
revFont: "revFont",
revCss: "revCss",
revAjaxJs: "revAjaxJs",
revJs: "revJs",
revCollectorCss: "revCollectorCss",
revCollectorHtml: "revCollectorHtml",
minCss: "minCss",
minAjaxJs: "minAjaxJs",
minJs: "minJs",
minHtml: "minHtml",
minImage: "minImage"
};
//js语法检测
gulp.task(task.jsHint, function () {
gulp.src([config.source.src.ajaxJs])
.pipe(jshint())
.pipe(jshint.reporter());
});
//MD5版本号
gulp.task(task.revFont, function () {
return gulp.src(config.source.src.font)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(config.dir.rev.font));
});
gulp.task(task.revCss, function () {
return gulp.src(config.source.src.css)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(config.dir.rev.css));
});
gulp.task(task.revAjaxJs, function () {
return gulp.src(config.source.src.ajaxJs)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(config.dir.rev.ajaxJs));
});
gulp.task(task.revJs, function () {
return gulp.src(config.source.src.js)
.pipe(rev())
.pipe(rev.manifest())
.pipe(gulp.dest(config.dir.rev.js));
});
//版本替换
/**
* 对插件进行如下修改，使得引用资源文件的url得以如下变换：
* "/css/base-f7e3192318.css" >> "/css/base.css?v=f7e3192318"
*
* gulp-rev 1.0.5
* node_modules\gulp-rev\index.js
* 144 manifest[originalFile] = revisionedFile; => manifest[originalFile] = originalFile + '?v=' + file.revHash;
*
* gulp-rev 1.0.5
* node_modules\gulp-rev\node_modules\rev-path\index.js
* 10 return filename + '-' + hash + ext; => return filename + ext;
*
* gulp-rev-collector 7.1.0
* node_modules\gulp-rev-collector\index.js
* 31 if ( !_.isString(json[key]) || path.basename(json[key]).replace(new RegExp( opts.revSuffix ), '' ) !== path.basename(key) ) { =>
* if ( path.basename(json[key]).split('?')[0] !== path.basename(key) ) {
*
*/
gulp.task(task.revCollectorCss, function () {
return gulp.src([config.source.rev.font, config.source.src.css])
.pipe(revCollector())
.pipe(gulp.dest(config.dir.revCollector.css));
});
gulp.task(task.revCollectorHtml, function () {
return gulp.src([config.source.rev.css, config.source.rev.ajaxJs, config.source.rev.js, config.source.src.html])
.pipe(revCollector())
.pipe(gulp.dest(config.dir.revCollector.html));
});
//压缩文件
gulp.task(task.minCss, function () {
return gulp.src(config.source.revCollector.css)
.pipe(minCss())
.pipe(gulp.dest(config.dir.dist.css));
});
gulp.task(task.minAjaxJs, function () {
return gulp.src(config.source.src.ajaxJs)
.pipe(minJs())
.pipe(gulp.dest(config.dir.dist.ajaxJs));
});
gulp.task(task.minJs, function () {
return gulp.src(config.source.src.js)
.pipe(minJs())
.pipe(gulp.dest(config.dir.dist.js));
});
gulp.task(task.minHtml, function () {
return gulp.src(config.source.revCollector.html)
.pipe(minHtmlForJT())//附带压缩页面上的js模板
.pipe(minHtml({
removeComments: true,
collapseWhitespace: true,
collapseBooleanAttributes: true,
removeEmptyAttributes: true,
removeScriptTypeAttributes: true,
removeStyleLinkTypeAttributes: true,
minifyJS: true,
minifyCSS: true
}))//附带压缩页面上的css、js
.pipe(gulp.dest(config.dir.dist.html));
});
gulp.task(task.minImage, function () {
return gulp.src(config.source.src.images)
.pipe(cache(minImage({
progressive: true,
use: [minImageForPng()]
})))
.pipe(gulp.dest(config.dir.dist.images));
});
//正式构建
gulp.task("build", sequence(
//js语法检测
//[task.jsHint],
//MD5版本号
[task.revFont, task.revCss, task.revAjaxJs, task.revJs],
//版本替换
[task.revCollectorCss, task.revCollectorHtml],
//压缩文件
[task.minCss, task.minAjaxJs, task.minJs, task.minHtml, task.minImage]
));
gulp.task("default", ["build"], function () {
});运行
执行默认任务
gulp执行指定任务
gulp 任务名称其他
目录说明
-
dist
ajaxJs
css
html
images
js
node_modules
-
rev
ajaxJs
css
font
js
-
revCollector
css
html
-
src
ajaxJs
css
html
images
js
gulpfile.js
package.json
使用npm安装模块速度有些慢，可以使用淘宝的cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org重要的在这里：
cnpm安装的模块用webstorm打开时会造成webstorm卡死（对，我的就是卡死了）
解决方法：百度的（-_-）