如何使用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'));
});
  • css任务流处理方法 详见

  • js任务流处理方法 详见

  • 加入版本任务流处理方法

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');
});

开发日志
分享开发过程
665 声望
2 粉丝
0 条评论
推荐阅读
GIT
GIT [TOC] 版本库 1.搭建服务器、初始化版本库 1.1 搭建服务器参考地址1.2 本地版本库 {代码...} 2.添加、克隆远程仓库 {代码...} {代码...} 第一次推送 -u 把本地的master分支和远程的master分支关联起来 {代码....

sofichael阅读 2k

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
反编译微信小程序获取小程序前端源码wxapkg
研究反编译的原因就是我自己辛苦了半个月写的小程序,忘记备份放在桌面,心急体验Win11系统 重装系统忘记备份源码,后悔莫及。 后来网上找了反编译的教程,反编译已经上线了的小程序 于是自己尝试了一下,真的可...

TANKING13阅读 10k评论 7

封面图
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...

九旬13阅读 1.6k

封面图
665 声望
2 粉丝
宣传栏