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插件

常用插件

1. gulp-sequence 顺序执行

2. gulp-jshint js语法检测

3. gulp-imagemin 图片压缩

4. imagemin-pngquant 图片压缩（png）

5. gulp-clean-css css压缩

6. gulp-uglify js压缩

7. gulp-htmlmin html压缩（js、css压缩）

8. gulp-minify-html html压缩（js模板压缩）

9. gulp-rev MD5版本号

10. gulp-rev-collector 版本替换

11. 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 任务名称

其他

目录说明

1. dist

ajaxJs

1. css

2. html

3. images

4. js

5. node_modules

6. rev

ajaxJs

1. css

2. font

3. js

4. revCollector

css

1. html

2. src

ajaxJs

1. css

2. html

3. images

4. js

5. gulpfile.js

6. package.json

使用npm安装模块速度有些慢，可以使用淘宝的cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

重要的在这里：
cnpm安装的模块用webstorm打开时会造成webstorm卡死（对，我的就是卡死了）
解决方法：百度的（-_-）

关键字：gulp, 前端, 压缩, 版本更新

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！