Gulp wiredep排除jquery注入

Gulp wiredep 排除 jQuery 注入的解决方案

基础概念

wiredep 是一个 Gulp 插件，用于自动将 Bower 依赖项注入到 HTML 文件中。它通过扫描 bower.json 文件中的依赖关系，然后在 HTML 文件中自动添加相应的脚本或样式链接。

问题原因

当使用 wiredep 时，它会自动将所有 Bower 依赖项注入到 HTML 文件中，包括 jQuery。但有时我们可能希望手动管理 jQuery 的引入（例如使用 CDN 或特定版本），这时就需要排除 jQuery 的自动注入。

解决方案

方法1：使用 wiredep 的 exclude 选项

const gulp = require('gulp');
const wiredep = require('wiredep').stream;

gulp.task('wiredep', function () {
  gulp.src('./src/index.html')
    .pipe(wiredep({
      exclude: ['jquery']
    }))
    .pipe(gulp.dest('./dist'));
});

方法2：在 bower.json 中覆盖依赖项

{
  "name": "my-project",
  "dependencies": {
    "jquery": null
  }
}

方法3：使用 ignorePath 选项

gulp.task('wiredep', function () {
  gulp.src('./src/index.html')
    .pipe(wiredep({
      ignorePath: /jquery/
    }))
    .pipe(gulp.dest('./dist'));
});

应用场景

当项目需要特定版本的 jQuery 时
当使用 jQuery 的 CDN 版本时
当项目中已经手动引入了 jQuery 时

注意事项

确保在排除 jQuery 后，项目中仍有其他方式引入 jQuery（如手动添加 script 标签）
如果其他 Bower 包依赖 jQuery，排除 jQuery 可能会导致这些包无法正常工作
排除 jQuery 后，需要确保 jQuery 的版本与其他依赖项兼容

完整示例

const gulp = require('gulp');
const wiredep = require('wiredep').stream;

gulp.task('inject', function () {
  return gulp.src('./src/index.html')
    .pipe(wiredep({
      exclude: ['jquery'],
      fileTypes: {
        html: {
          block: /(([ \t]*)<!--\s*bower:*(\S*)\s*-->)(\n|\r|.)*?(<!--\s*endbower\s*-->)/gi,
          detect: {
            js: /<script.*src=['"]([^'"]+)/gi,
            css: /<link.*href=['"]([^'"]+)/gi
          },
          replace: {
            js: '<script src="{{filePath}}"></script>',
            css: '<link rel="stylesheet" href="{{filePath}}" />'
          }
        }
      }
    }))
    .pipe(gulp.dest('./src'));
});

通过以上方法，你可以有效地排除 jQuery 的自动注入，同时保留其他 Bower 依赖项的自动注入功能。