gulp打包引用替换

踏浪

发布于 2021-12-24 13:45:12

7110

发布于 2021-12-24 13:45:12

文章被收录于专栏：踏浪的文章

关于 gulp 的基本使用方法前面有介绍。

Gulp使用指南

昨天，朋友问我一个问题。gulp打包给文件添加 hash 之后，怎么替换其他文件中引用的js（或者css），要替换成打包以后的带有 hash 的那一个文件。

其实主要用到的就是 gulp-rev 和 gulp-replace 这两个插件。

有三个js文件

a.js

export default 'a';

b.js

import a from 'a';
console.log(a)

export default 'b';

main.js

import a from 'a';
import b from 'b';

console.log(a)
console.log(b)

三个js文件都需要打包并添加hash值。如果默认没有replace操作。那么打包后的main.js中的 import 的内容依旧是原来的。比如 import b from 'b'; 打包后还是 import b from 'b'; 而不是 import b from 'b-XXXXXXXX'; 这样带有hash的。

const gulp = require('gulp');
const rev = require('gulp-rev');
const del = require('del');
const replace = require('gulp-replace');

// 清空打包目录
gulp.task('c', function (cb) {
  del(
    [
      // 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
      'dist/*',
    ],
    cb
  );
});

// 生成带有 hash 的js
gulp.task(
  'js',
  () =>
    gulp
      .src(['./src/*js'])
      .pipe(gulp.dest('dist')) // 将源文件拷贝到打包目录
      .pipe(rev())
      .pipe(gulp.dest('dist')) // 将生成的hash文件添加到打包目录
      .pipe(rev.manifest('js-rev.json')) // 生成映射文件
      .pipe(gulp.dest('dist')) // 将map映射文件添加到打包目录
);

// 替换hash
gulp.task('r', () => {
  const manifest = require('./dist/js-rev.json')
  for (const key in manifest) {
    const newKey = key.split('.')[0];
    manifest[newKey] = manifest[key].split('.')[0]
    delete manifest[key];
  }
  
  return (
    gulp
      .src('./dist/*.js')
      .pipe(replace(/import (\S+) from ('|")(\S+)('|")/g, (match, a, b, c) => {
        return `import ${a} from '${manifest[c]}'`
      }))
      .pipe(gulp.dest('dist'))
  );
});

大概的就是上面的配置，至于其他的，比如说要 babel 转译。直接添加相关的插件即可。

在线地址

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-06-30，如有侵权请联系 cloudcommunity@tencent.com 删除

打包