如何使用gulp给资源文件加上版本

 我来答
春天的污树
2017-06-27 · 超过19用户采纳过TA的回答
知道答主
回答量:62
采纳率:0%
帮助的人:23.8万
展开全部
1.package.json文件部分插件 plugins
"dependencies": {
"del": "^1.1.1",
"gulp": "^3.8.11",
"gulp-autoprefixer": "^2.1.0",
"gulp-cache": "^0.2.8",
"gulp-clean": "^0.3.1",
"gulp-concat": "^2.5.2",
"gulp-imagemin": "^2.2.1",
...
}

2.安装所需的gulp插件
$ npm install

3.gulpfile.js
'use strict';
var gulp = require('gulp');
/*global -$ 加载需使用的gulp插件*/
var $ = require('gulp-load-plugins')();

配置选项(也可以直接在任务中写相对路径)
/*
*管理资源文件路径集合
*config.static下
*css scripts images 替换为自己的路径(可按照此配置管理)
*/
var config = {};
// 源资源文件路径
config['static'] = {
styles: 'static/styles/*.*',
scripts: 'static/scripts/*.*',
images: 'static/images/*.*',
html:'static/*.html'
};
...

图片任务流处理方法

/*
*images 任务流
*/
gulp.task('images', function () {
return gulp.src(config['static'].images)
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe($.imagemin({
distgressive: true,
progressive: true,
interlaced: true,
svgoPlugins: [{removeViewBox: false}],
use: [require('imagemin-pngquant')()]
}))
.pipe(gulp.dest(config['rev'].images))
.pipe($.notify({ message: 'images task complete' }));
});
/*
*img 添加版本任务流
*use gulp-rev to version the rev files and generate the 'rev-manifest.json' file
*/
gulp.task('img', ['images'], function(){
return gulp.src(config['rev'].images_file)
.pipe($.rev())
.pipe(gulp.dest(config['dist'].images))
.pipe($.rev.manifest({
base: 'dist',
merge: true //如果存在 rev-manifest.json文件则合并
}))
.pipe(gulp.dest('dist'));
});
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式