gulp之JS、CSS、HTML、圖片壓縮以及版本更新

以前被grunt的各類配置搞得頭大,後來發現竟然有gulp這樣的好東西,因而就入坑了css

建立package.json

npm init

安裝gulp

全局安裝(由於要使用gulp命令)html

npm i gulp -g

項目安裝(固然是項目須要咯)node

npm i gulp --save-dev

i:install簡寫
--save-dev:自動添加到devdependenciesweb

安裝gulp插件

經常使用插件

  • gulp-sequence 順序執行ajax

  • gulp-jshint js語法檢測npm

  • gulp-imagemin 圖片壓縮json

  • imagemin-pngquant 圖片壓縮(png)gulp

  • gulp-clean-css css壓縮緩存

  • gulp-uglify js壓縮webstorm

  • 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卡死(對,個人就是卡死了)
解決方法:百度的(-_-)

相關文章
相關標籤/搜索