如何使用gulp给资源文件加上版本
如何使用gulp给资源文件加上版本 github
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'));
});
gulp.task('rev',['img','css','js'], function () {
gulp.src(['rev-manifest.json', config['static'].html])
.pipe( $.revCollector({
replaceReved: true,
dirReplacements: {
//路径替换
// 'css': '/dist/css',
// '/js/': '/dist/js/',
// 'cdn/': function(manifest_value) {
// return '//cdn' + (Math.floor(Math.random() * 9) + 1) + '.' + 'exsample.dot' + '/img/' + manifest_value;
// }
}
}) )
.pipe($.minifyHtml({conditionals: true, loose: true}))
.pipe(gulp.dest('dist'));
gulp.task('del', require('del')('rev'));//最后删除过渡文件目录
});
开启任务
gulp.task('test', ['clean'], function () {
gulp.start('rev');
});
开发日志
分享开发过程
被 1 篇内容引用
665 声望
2 粉丝
推荐阅读
GIT
GIT [TOC] 版本库 1.搭建服务器、初始化版本库 1.1 搭建服务器参考地址1.2 本地版本库 {代码...} 2.添加、克隆远程仓库 {代码...} {代码...} 第一次推送 -u 把本地的master分支和远程的master分支关联起来 {代码....
sofichael阅读 2k
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...
chokcoco赞 20阅读 2.1k评论 2
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...
边城赞 17阅读 1.9k
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...
XboxYan赞 21阅读 1.6k评论 1
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...
wuwhs赞 17阅读 2.4k
反编译微信小程序获取小程序前端源码wxapkg
研究反编译的原因就是我自己辛苦了半个月写的小程序,忘记备份放在桌面,心急体验Win11系统 重装系统忘记备份源码,后悔莫及。 后来网上找了反编译的教程,反编译已经上线了的小程序 于是自己尝试了一下,真的可...
TANKING赞 13阅读 10k评论 7
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...
九旬赞 13阅读 1.6k
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。