Gulp usemin无法为JS文件添加版本号问题求助

看起来你的CSS文件版本控制正常，但JS文件没生成带哈希的版本号，还没报错，这种情况通常是压缩环节静默失败或者路径/依赖配置问题导致的。下面是一步步的排查和解决思路：

1. 先排查UglifyJS是否静默报错 #

UglifyJS（尤其是旧版本）在处理ES6+语法或者存在语法错误的JS文件时，可能不会抛出明显错误，但会中断后续的rev()执行。你可以给Uglify添加错误监听，看看是不是压缩环节出了问题：

修改usemin任务中的JS配置：

js: [
  function() { 
    return uglify().on('error', function(err) {
      gutil.log(gutil.colors.red('[Uglify Error]'), err.toString());
      this.emit('end'); // 确保任务继续执行，不卡死
    })
  },
  function() {return rev()}
]

然后重新运行gulp build，如果控制台出现红色的错误日志，说明你的JS代码有语法问题（比如未转译的ES6代码），需要先通过Babel转译后再压缩。如果没有报错，再尝试暂时注释掉uglify，只保留rev()，看看JS文件能不能生成版本号：

js: [
  // function() {return uglify()},
  function() {return rev()}
]

如果此时版本号正常生成，那问题就出在Uglify的压缩环节，需要修复JS代码语法或者更新Uglify版本。

2. 检查HTML中的文件路径是否正确 #

你的HTML中JS的引用是绝对路径：

<script src="/temp/scripts/Vendor.js"></script>

Gulp的usemin在处理时，是基于当前工作目录查找文件的，绝对路径可能会导致它找不到对应的文件（相当于从根目录找temp文件夹，而不是项目目录）。尝试去掉开头的斜杠，改成相对路径：

<!-- build:js /assets/scripts/Vendor.js -->
<script src="temp/scripts/Vendor.js"></script>
<!-- endbuild -->
<!-- build:js /assets/scripts/App.js -->
<script src="temp/scripts/App.js"></script>
<!-- endbuild -->

确保temp/scripts文件夹确实存在于项目根目录下，并且里面有对应的JS文件。

3. 调整任务执行顺序 #

你的build任务同时依赖三个并行执行的任务：

gulp.task('build', ['deleteDistFolder', 'optimizeImages', 'usemin']);

在Gulp 3.x中，数组里的依赖任务是并行运行的，这意味着usemin可能在deleteDistFolder还没完全删除旧文件夹时就开始执行，虽然CSS正常，但JS可能因为文件写入时机问题出问题。可以调整依赖顺序，确保deleteDistFolder先完成，再执行其他任务：

// 先执行deleteDistFolder，再执行usemin和optimizeImages
gulp.task('build', ['deleteDistFolder'], function() {
  gulp.start('optimizeImages', 'usemin');
});

或者把usemin和optimizeImages的依赖都设为deleteDistFolder，这样它们会在删除完成后再并行执行。

4. 检查插件版本兼容性 #

不同版本的gulp-usemin、gulp-rev、gulp-uglify之间可能存在兼容问题。可以尝试更新这些插件到最新版本：

npm update gulp-usemin gulp-rev gulp-uglify

如果更新后问题依旧，可以尝试调整rev和uglify的顺序（虽然通常rev应该在压缩之后，但某些版本的usemin可能要求rev在前？不过这个概率较低，可以试试）。

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