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卡死(对,我的就是卡死了)
解决方法:百度的(-_-)
相关推荐
我有一只小松鼠 2020-02-29
MrLiar 2015-11-09
idnochinese 2019-07-01
UndefineOrNull 2019-07-01
星辰的笔记 2020-07-04
zhongweinan 2020-06-10
liangjielaoshi 2020-06-11
jiangfulai 2020-04-18
UndefineOrNull 2020-02-29
UndefineOrNull 2020-03-01
hlihaihong 2020-02-18
UndefineOrNull 2020-02-12
yinuoqingqin 2020-01-13
星辰的笔记 2020-01-13
UndefineOrNull 2020-01-13
hlihaihong 2020-01-13
kaosini 2020-01-12
hlihaihong 2020-01-12
kaosini 2020-01-12