angular1x初始与架构演进（四）gulp配置+OcLazyLoad中资源MD5时间轴更新

来源：互联网发布：闪迪固态硬盘优化软件编辑：程序博客网时间：2024/05/21 07:55

个人不是很喜欢非覆盖式更新这个模式：在一个版本中资源会出现不同的时间轴版本，而且这些版本会一直存在，导致项目越来越大，至于管理这个功能其实git就有提供，webstrom也有提供历史记录，所以这种模式并不是很重要。

var gulp = require('gulp'),    less = require('gulp-less'),    browserSync = require('browser-sync').create(),    minifycss = require('gulp-minify-css'),    minifyjs = require('gulp-js-minify'),    rev = require('gulp-rev'),    revCollector = require('gulp-rev-collector');

主要是使用到了rev+rev-collector,修改了其中的一些代码实现的：

修改rev+rev-collector简书上有这篇，我就懒得写怎么弄的了，注意下他的行数跟最新版本的行数并不同，但是也差不了多少行

附上已经修改好的：GitHub地址

一个less的task：

gulp.task('Less', function () {    gulp.src(['less/**/*.less'])        .pipe(less())        .pipe(minifycss())        .pipe(rev())        .pipe(gulp.dest('css'))        .pipe(rev.manifest())        .pipe(gulp.dest('rev/css'));});

less-->文件编译-->css-->生成MD5映射表-->输出到css文件夹-->保存md5到映射表-->更新md5映射表

md5映射表：

后续代码不一一解释了，现在开始解释更新js中js引用的时间轴或许这样说比较绕口看图：

（请无视js这个变量，我是用来环境变量的）

要实现这种效果其实很简单，我只是在gulp中添加了一段自己写的代码的：

监控js-->发生改变-->生成新的md5-->更新路由js中js引用的时间轴根据md5地图来更新

当时纠结很久这个问题，突然记起gulp是运行在node环境中，然后参考下源码，按理我能去读写文件，于是我写了这段代码：

读取gulpapp.js，这个js是加载路由的js，也就是入口，OcLazyLoad加载的js也在其中

最终输出在app.js中，相当gulpapp是开发-->编译成app

function fsFile(){    var fs = require('fs');    fs.readFile('js/gulpapp.js', 'utf-8', function (err, data) {        if(!err) {            var fileText = data;            fs.readFile('rev/js/rev-manifest.json', 'utf-8', function (err, data1) {                if (!err) {                    var tt = JSON.parse(data1);                    for (var key in tt) {                        fileText = fileText.replace(new RegExp("" + key + "", "g"), tt[key]);                    }                    fs.writeFile("app.js", fileText, function (err) {                        if (err)                            console.log("fail " + err);                        else                            console.log("写入文件ok");                    });                }else{                    console.log("不存在rev/js/rev-manifest.json");                }            })        }else{            console.log("不存在");        }    })}

或许写的有点乱，实践做做就知道了

0 0