gulp 对js\css进行md5 加密

有的服务器为了网站加载速度，会做服务器缓存，这样就会出现代码出现引用地址没变，新代码不生效，而我们又希望新代码可以及时生效，这样我们就需要避免缓存，当然也有很多方法，本文只介绍使用gulp-rev（对文件名加MD5后缀）和gulp-rev-collector（路径替换）配合进行对文件名字进行md5加密.

rev会做什么：

　　根据静态资源内容，生成md5签名，打包出来的文件名会加上md5签名，同时生成一个json用来保存文件名路径对应关系。

替换html里静态资源的路径为带有md5值的文件路径，这样html才能找到资源路径。

第一步: (安装插件 )

npm install --save-dev gulp-rev gulp-rev-collector

第二步：(写配置文件，以js文件为例)

gulp.task('scripts5', () => {
  return gulp.src('app/scripts/**/*.js')
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.rev())//- 文件名加MD5后缀
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest('.tmp/scripts'))
    .pipe($.rev.manifest()) //- 生成一个rev-manifest.json
    .pipe(gulp.dest('.tmp/rev/scripts')) //- 将 rev-manifest.json 保存到 rev 目录内
    .pipe(reload({stream: true}));
});

　　

gulp.task('html5', ['styles5', 'scripts5'], () => {
  return gulp.src(['.tmp/rev/**/*.json', 'app/*.html'])//获取rev-manifest.json和要替换的html文件
    .pipe($.revCollector({replaceReved: true}))//根据rev-manifest.json的规则替换html里的路径，由于替换是根据rev-manifest.json规则来的，所以一定要先生成这个文件再进行替换
    .pipe($.useref({searchPath: ['.tmp', 'app', '.']}))
    .pipe($.if('*.js', $.uglify()))
    .pipe($.if('*.css', $.cssnano({safe: true, autoprefixer: false})))
    .pipe($.if('*.html', $.htmlmin({collapseWhitespace: false})))
    .pipe(gulp.dest('dist'));
});

　　主要就是那五句代码，至此，你再执行构建项目就会有md5戳了，祝你好运！

本文标题:gulp 对js\css进行md5 加密

原创作者:Jiao Shou

发布时间:2016年10月14日 - 10:54

最后更新:2016年10月14日 - 21:09

原始链接:http://www.cnblogs.com/jiaoshou/p/5959568.html

许可协议:转载本篇文章时请务必以超链接形式标明文章原文链接和作者信息。

扫描二维码,分享此文章