之前被grunt的各种配置搞得头大，后来发现居然有gulp这样的好东西，于是就入坑了
创建package.json
npm init
安装gulp
全局安装（因为要使用gulp命令）
npm i gulp -g
项目安装（当然是项目需要咯）
npm i gulp --save-dev
i：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卡死（对，我的就是卡死了）解决方法：