如何在Gulp的build-dist任务中排除指定JS文件写入index.html

Hey there! Let's tackle your Gulp issue step by step. Looking at your gulpfile.js, I see you're trying to exclude specific JS files from being written into index.html during your build-dist/full-build-dist tasks. You mentioned using the ! prefix, which is the right approach—here's how to implement it for your specific setup:

1. Exclude files from manual injection (the copy-files-add task) #

Your copy-files-add task is responsible for injecting specific JS files into the <!-- inject:js:upload --> section of your index.html. To exclude files here, just add the ! prefix to the file path in your source array.

For example, if you want to exclude all tealeaf*.js files, modify the task like this:

gulp.task('copy-files-add', function () {
  // Add ! before the path of files you want to exclude
  let jsFiles = [
    `${config.folders.distBuild}js/ng-file-upload/ng-file-upload-shim.js`,
    `${config.folders.distBuild}js/ng-file-upload/ng-file-upload.js`,
    `${config.folders.distBuild}js/fileuploader.js`,
    `!${config.folders.distBuild}js/tealeaf*.js` // This excludes all tealeaf-prefixed JS files
  ];
  let jsSrc = gulp.src(jsFiles, { read: false });
  let configOptions = { 
    starttag: '<!-- inject:js:upload -->', 
    relative: true, 
    removeTags: true 
  };
  let injectTask = utils.src(`${config.folders.distBuild}index.html`, 'local-inject')
    .pipe(inject(jsSrc, configOptions));
  injectTask = injectTask.pipe(gulp.dest(`${config.folders.distBuild}`));
  return injectTask;
});

The gulp-inject plugin will automatically ignore paths prefixed with !, so those files won't show up in your index.html.

2. Exclude files from the default build-dist task #

Your build-dist task comes from the ng1-template-gulp package, and its configuration is controlled by your gulp.config.ts file. To exclude files here, you'll need to modify that config file:

Open ./gulp.config.ts and look for where JS source files are defined. Add the ! prefix to the paths you want to exclude, like this:

export default function(config: any) {
  // ... other existing config ...
  config.js.src = [
    `${config.folders.client}/app/**/*.js`,
    `${config.folders.client}/customjs/**/*.js`,
    `!${config.folders.client}/customjs/tealeaf*.js` // Exclude specific files here
  ];
  // ... other existing config ...
}

This tells the build-dist task to skip those files when injecting JS into index.html.

3. Bonus: Exclude files from the generated library.json #

If you also want the excluded files to not appear in the library.json file created by full-build-dist, add a check in the loop that builds the result array:

gulp.task('full-build-dist', ['build-dist'], () => {
  utils.log('Creating a new json file for cms to use');
  var fileContent = fs.readFileSync(`${config.folders.distBuild}index.html`, "utf8");
  let array = fileContent.split('<script');
  let result = [];
  for (let i = 0; i < array.length; i++) {
    if (i == 0 || i == array.length - 1 || i == array.length - 2) {
      continue;
    }
    let elem = array[i];
    let tempResult = elem.substring(elem.indexOf('js/') + 3, elem.indexOf('</script>') - 2);
    // Skip files matching your exclusion pattern
    if (!tempResult.startsWith('tealeaf')) { // Adjust this condition to match your files
      result.push(tempResult);
    }
  }
  utils.log(`Element :${config.folders.distBuild}` + JSON.stringify(result));
  fs.writeJson(`${config.folders.distBuild}library.json`, result, function (err) { 
    // console.log(err) 
  })
});

You can adjust the condition to use includes(), a regex, or any other check that matches the files you want to exclude.

That should cover all your bases—your specific JS files will now be excluded from index.html and any related build artifacts!

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