带有 woofmark 的 gulp-concat - 将非法令牌引入输出答案

【问题标题】：gulp-concat with woofmark - introduces illegal token into output带有 woofmark 的 gulp-concat - 将非法令牌引入输出
【发布时间】：2015-11-18 15:58:20
【问题描述】：

我的网站项目有一些 JavaScript 库依赖项，我使用 gulpfile.js 中的 gulp-concat 插件将它们捆绑为一个库，而不是单独包含它们：

gulp.src(['src/js/angular.min.js',
          'src/js/angular-route.min.js',
          'src/js/angular-sanitize.min.js',
          'src/js/domador.min.js',
          'src/js/megamark.min.js',
          'src/js/woofmark.min.js'])
.pipe(concat('libs.js'))
.pipe(gulp.dest('dist/'));

在我添加了domador、megamark 和woofmark 库后，出现了一个问题。

虽然这些库在 HTML 中单独引用时可以正常工作，但捆绑它们会在我的 libs.js 中引入一些非法字符，这会破坏 Chrome：

Uncaught SyntaxError: Unexpected token ILLEGAL

开发工具告诉我，在megamark.min.js 结束和woofmark.min.js 开始之间确实存在三个意外字符：

但是！当我在 Visual Studio 中查看 libs.js 时：

混合中似乎有某种“隐藏”字符对 Chrome 来说变得“未隐藏”并杀死脚本。我不明白为什么它们会在那里，或者为什么我尝试补救的方法都不起作用......

我尝试过的：

捆绑除woofmark.min.js 之外的所有内容，并将其单独包含在内。是的，这可行，但我想将它们全部捆绑在一起（我想了解发生了什么）
将记事本中的文件重新保存为 UTF-8 编码。没有效果。
从woofmark.min.js 中第一个关键字的中途退格，比必要的次数要多得多，然后重新输入必要的字符。没有效果。
megamark.min.js 的最后几个字符进行了类似的努力。没有效果。

任何见解将不胜感激！

【问题讨论】：

使用什么服务器将脚本传送到浏览器？什么默认字符集就可以了？我明白了，shchcy: "щ" 也不正确。
服务器应该以content-type:application/javascript; UTF-8 标头响应.js 文件。
这个符号 - 只是 BOM 标记。如果使用 utf-8 应该可以正确解析。
总之，第一个屏幕上使用了单字节字符集。
stackoverflow.com/questions/5406172/utf-8-without-bom

标签： visual-studio gulp byte-order-mark gulp-concat

【解决方案1】：

感谢cmets中vp_arth提供的信息，我找到了解决办法。

woofmark.min.js 文件似乎被编码为“带有签名的 UTF-8”，这是另一种说法，它具有产生非法字符的不可见 BOM 标记。

当由 IIS 单独发送时，它正在被转换，但当连接成一个包时，标记被保留在文件中间，从而创建了非法令牌。

为了解决这个问题，我在 Visual Studio 中使用不同的编码重新保存了文件：

文件->
将 src/js/woofmark.min.js 保存为... ->
使用编码保存... -> （按钮下拉）
从选项中选择“Unicode (UTF-8 without signature) - Codepage 65001”。

然后，重新运行 gulp 任务后，完整捆绑的 lib.js 完美运行。

【讨论】：