使用Gulp useref合并JS文件遇文件找不到错误求助

看起来你遇到了两个典型的gulp-useref使用问题，我来帮你逐一解决：

1. 文件找不到错误的原因与解决方法 #

问题根源 #

gulp-useref是静态解析HTML内容的，它不会执行Twig模板语法。你的模板里用了{{asset('js/profile/edit/js-script.js')}}，useref会把这个Twig表达式当成字面量的文件路径，再结合你从templates/base.html.twig读取文件的上下文，它会尝试去/var/www/html/project/templates/js/profile/edit/js-script.js找文件——但你的实际JS文件显然在web/js目录下，所以会报错。

解决方案（二选一即可） #

方案A：直接修改模板为静态相对路径

把Twig的asset标签替换成相对于模板文件的静态路径：

<!-- build:js combined.js -->
<script src="../web/js/profile/edit/js-script.js" type="text/javascript"></script>
<!-- endbuild -->

这里../web/js/是相对于templates目录的路径，useref能直接定位到正确的文件。

方案B：在transformPath中解析Twig标签

如果你不想修改模板，可以通过transformPath把Twig的asset表达式转换成实际路径：

transformPath: (filePath) => {
  // 把{{asset('js/xxx.js')}}转换成../web/js/xxx.js
  return filePath.replace('{{asset(\'js/', '../web/js/').replace('\')}}', '');
}

2. 输出路径错误（嵌套web/js文件夹+生成base.html.twig）的解决方法 #

问题根源 #

• gulp-useref默认会保留整个HTML文件并输出到dest目录，所以你的gulp.dest('web/js')会把处理后的base.html.twig也放到web/js下。
• 你build注释里写的是build:js web/js/combined.js，当dest是web/js时，useref会把这个路径拼接起来，最终生成web/js/web/js/combined.js，也就是嵌套的文件夹。

解决方案 #

1. 首先修改build注释，把目标JS路径改成相对于dest的路径：

<!-- build:js combined.js -->
<!-- 原来的script标签 -->
<!-- endbuild -->

2. 使用gulp-if过滤文件，只输出JS文件，丢弃处理后的HTML。先安装依赖：

npm install gulp-if --save-dev

3. 修改你的gulp任务：

const gulp = require('gulp');
const useref = require('gulp-useref');
const gulpIf = require('gulp-if');

gulp.task('useref', function () {
  return gulp.src('templates/base.html.twig')
    .pipe(useref({
      transformPath: (filePath) => {
        // 用方案B的路径转换，或者如果用了方案A可以去掉这个配置
        return filePath.replace('{{asset(\'js/', '../web/js/').replace('\')}}', '');
      }
    }))
    // 只把JS文件输出到web/js目录
    .pipe(gulpIf('*.js', gulp.dest('web/js')));
});

额外优化：先编译Twig再处理useref（可选） #

如果你的模板有很多动态内容，推荐先把Twig编译成静态HTML，再用useref处理：

1. 安装gulp-twig和del（清理临时目录）：

npm install gulp-twig del --save-dev

2. 编写任务：

const gulp = require('gulp');
const useref = require('gulp-useref');
const twig = require('gulp-twig');
const gulpIf = require('gulp-if');
const del = require('del');

// 编译Twig到临时目录
gulp.task('compile-twig', function () {
  return gulp.src('templates/base.html.twig')
    .pipe(twig({
      data: {} // 这里可以传入模板需要的动态数据
    }))
    .pipe(gulp.dest('.tmp'));
});

// 处理JS合并
gulp.task('useref', gulp.series('compile-twig', function () {
  return gulp.src('.tmp/base.html')
    .pipe(useref())
    .pipe(gulpIf('*.js', gulp.dest('web/js')))
    // 任务结束后清理临时目录
    .on('end', () => del('.tmp'));
}));

这样执行gulp useref就能正确合并JS，不会再出现找不到文件和路径错误的问题了。

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