码迷,mamicode.com
首页 > 其他好文 > 详细

gulp缓存 markdown编辑

时间:2019-12-19 23:13:24      阅读:105      评论:0      收藏:0      [点我收藏+]

标签:taobao   对象   pip   浏览器   title   目录结构   编辑   tao   copy   

gulp添加版本号解决缓存问题

  1. 第一项 配置node
    [node安装教程:] https://www.cnblogs.com/xinaixia/p/8279015.html
    运行node -v 有版本号即为安装成功
  2. 第二项 配置cnpm
    运行cmd,安装淘宝镜像
    npm install cnpm -g --registry=https://registry.npm.taobao.org
  3. 第三项 项目源目录配置
    新建src,把项目目录拖到src
    打包版本号只适用于本目录结构,其他结构自己去配置
    技术图片

  4. 第四项 安装gulp
    安装package.json里配置好的gulp相关插件,进行安装
    在当前文件夹下输入cmd,
    npm i或 cnpm i 会看到多了一个node_modules的依赖包
  5. 第三项 gulpfile.js
    新建gulpfile.js,内部参数匹配有规则,内部逻辑就用封装好的
    本教程为gulp添加版本号,清除浏览器缓存,
//引用gulp
const gulp = require('gulp');

// 加版本号
const assetRev = require('gulp-asset-rev');

// 文件清理
const clean = require('gulp-clean');

// 给html添加版本号
gulp.task('htmlminTask', function() {
    gulp.src('src/*.html') //创建一个流,用于从文件系统读取 Vinyl 对象
        .pipe(assetRev()) //管道方法
        .pipe(gulp.dest('dist/')) //创建一个用于将 Vinyl 对象写入到文件系统的流
    gulp.src(['src/**/*.html']) //** 匹配多个目录及子目录  *匹配0或多个字符
        .pipe(assetRev())
        .pipe(gulp.dest('dist/'))
})

// 文件复制 复制没有经过处理的文件 不添加此代码 生成得dist仅为打包执行的东西
gulp.task('copyTask', function() {
    gulp.src('src/asset/**/*')
        .pipe(gulp.dest('dist/asset/'))
})

// 打包
gulp.task('default', ['htmlminTask', 'copyTask']); //gulp执行顺序
  1. 第六项 更改node_modules依赖包文件
    进入到./node_modules/_gulp-asset-rev@0.0.15@gulp-asset-rev文件夹下的index.js文件
    找到第80或81行的
    //src = src.replace(verStr, ‘‘).replace(/(.[^\.]+)$/, verStr + "$1");
    替换成下面的
    src = src += "?v=" + verStr

7.第七项 执行 gulp
运行cmd 输入 gulp

相关连接:
- 安装node
https://www.runoob.com
- 复制整个文件夹或文件到指定目录
https://www.runoob.com
- 自动更新版本号
-https://blog.csdn.net/chen_enson_1/article/details/85780786

gulp缓存 markdown编辑

标签:taobao   对象   pip   浏览器   title   目录结构   编辑   tao   copy   

原文地址:https://www.cnblogs.com/hanhaiyuntao/p/12070452.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!