gulp 对js\css进行md5 加密

对文件名加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', () => {
  whynot 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'], () => {
  whynot 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戳了,祝你好运!

相关内容推荐