gulp之JS、CSS、HTML、图片压缩以及版本更新

之前被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卡死（对，我的就是卡死了）
解决方法：百度的（-_-）