如何通过Gulp任务在Angular 4中生成覆盖率报告？求适配Angular2+的插件

我完全懂你这种踩坑的感受——Angular 2+全是TypeScript代码，而很多覆盖率工具的文档全是针对原生JavaScript的，转译后再处理还一堆报错，太闹心了！下面给你几个亲测有效的方案，都是专门适配Angular 2+项目、能通过Gulp生成覆盖率报告的：

这个方案适合坚持用纯Gulp流水线处理TS编译和覆盖率的场景，核心是让覆盖率工具通过sourcemap关联回原始TS文件，而不是只统计编译后的JS。

步骤 & 代码示例 #

1. 先安装依赖：

npm install gulp-istanbul gulp-typescript gulp-sourcemaps gulp-mocha --save-dev

2. 编写Gulp任务：

const gulp = require('gulp');
const ts = require('gulp-typescript');
const sourcemaps = require('gulp-sourcemaps');
const istanbul = require('gulp-istanbul');
const mocha = require('gulp-mocha');

// 第一步：编译TS到JS，同时生成sourcemap（关键：要让sourcemap指向原始TS文件）
gulp.task('compile-ts', () => {
  return gulp.src('src/**/*.ts')
    .pipe(sourcemaps.init())
    .pipe(ts({
      module: 'commonjs',
      target: 'es5',
      declaration: false,
      sourceMap: true
    }))
    .pipe(sourcemaps.write('.', { 
      includeContent: false, 
      sourceRoot: '../src' // 这里要对应原始TS文件的相对路径
    }))
    .pipe(gulp.dest('dist'));
});

// 第二步：预instrument编译后的JS，关联sourcemap
gulp.task('pre-coverage', ['compile-ts'], () => {
  return gulp.src('dist/**/*.js')
    .pipe(istanbul({
      includeUntested: true,
      sourceMap: true // 必须启用，让istanbul识别sourcemap
    }))
    .pipe(istanbul.hookRequire()); // 覆盖Node的require方法，追踪代码执行
});

// 第三步：运行测试并生成覆盖率报告
gulp.task('coverage', ['pre-coverage'], () => {
  return gulp.src('test/**/*.spec.js') // 这里用编译后的测试JS，也可以用ts-node直接跑TS测试
    .pipe(mocha())
    .pipe(istanbul.writeReports({
      dir: './coverage',
      reporters: ['lcov', 'html', 'text-summary'], // 支持多种报告格式
      reportOpts: { dir: './coverage' }
    }))
    .pipe(istanbul.enforceThresholds({ thresholds: { global: 80 } })); // 可选：设置覆盖率阈值
});

注意点 #

• sourceRoot的配置一定要准确，否则生成的报告无法映射回原始TS文件；
• 如果你的测试文件也是TS，可以用ts-node直接在Gulp里运行，不需要提前编译测试文件。

nyc是Istanbul的CLI工具，原生支持TypeScript，不需要手动处理TS编译和sourcemap，配置起来更省心，推荐优先尝试。

步骤 & 代码示例 #

1. 安装依赖：

npm install nyc @istanbuljs/nyc-config-typescript mocha ts-node --save-dev

2. 在package.json里添加nyc配置：

{
  "nyc": {
    "extends": "@istanbuljs/nyc-config-typescript",
    "include": ["src/**/*.ts"],
    "exclude": ["src/**/*.spec.ts", "node_modules/**"]
  }
}

3. 编写Gulp任务：

const gulp = require('gulp');
const { exec } = require('child_process');

gulp.task('coverage', (cb) => {
  // 用nyc直接运行TS测试，自动处理覆盖率统计和TS映射
  exec('nyc mocha --require ts-node/register test/**/*.spec.ts', (err, stdout, stderr) => {
    console.log(stdout);
    if (stderr) console.error(stderr);
    cb(err);
  });
});

优势 #

• 不需要手动编译TS，ts-node会实时编译；
• 生成的覆盖率报告直接显示原始TS文件的代码，完全不需要处理sourcemap的坑。

如果你的Angular项目是用Angular CLI生成的，默认用Karma做测试，那这个方案最适配，还能和Gulp集成。

步骤 & 代码示例 #

1. 安装依赖：

npm install karma-coverage-istanbul-reporter --save-dev

2. 修改karma.conf.js配置：

module.exports = function(config) {
  config.set({
    // ...其他原有配置
    reporters: ['progress', 'coverage-istanbul'],
    coverageIstanbulReporter: {
      dir: require('path').join(__dirname, './coverage'),
      reports: ['html', 'lcovonly', 'text-summary'],
      fixWebpackSourcePaths: true, // 修复Webpack编译后的路径映射
      thresholds: {
        global: {
          statements: 80,
          lines: 80,
          branches: 80,
          functions: 80
        }
      }
    },
    preprocessors: {
      'src/**/*.ts': ['webpack', 'sourcemap'] // 配合Webpack和sourcemap处理TS
    },
    webpack: {
      devtool: 'inline-source-map' // 必须生成inline sourcemap
    }
  });
};

3. 编写Gulp任务启动Karma：

const gulp = require('gulp');
const karma = require('karma');

gulp.task('coverage', (done) => {
  new karma.Server({
    configFile: __dirname + '/karma.conf.js',
    singleRun: true // 运行一次测试后退出
  }, done).start();
});

优势 #

• 完美适配Angular CLI的默认测试流程；
• 生成的报告可以直接在浏览器打开，查看每个TS文件的覆盖率详情。

内容的提问来源于stack exchange，提问作者arctic_Oak