Javascript 如何将GLSL文件与Gulp绑定？

我正在处理一个需要自定义

.glsl

着色器的WebGL项目。该项目将应用程序与Gulp捆绑在一起，所以我尝试使用它，这是一个“将GLSL代码转换为小型字符串的Gulp插件”。完美

我运行了

npm install gulp glsl--save dev

，我的

gulpfile.js

如下所示：

const gulp = require('gulp');
const glsl = require('gulp-glsl');

gulp.src('**/GLSL/*.glsl')
    .pipe(glsl({format: 'raw'}))
    .pipe(gulp.dest('build'));

然后我尝试像这样导入我的着色器：

从“/GLSL/frag.GLSL”导入fragShader

但是Gulp编译器给了我一个编译错误：

[13:27:17] gulp-notify: [Compile Error]
/Users/.../WebGL/GLSL/polyFrag.glsl:1
#extension GL_OES_standard_derivatives : enable
^
ParseError: Unexpected character '#'

我不需要Gulp来编译
.glsl
文件，我只需要将其转换为字符串以用于WebGL。我可以用Gulp做什么来实现这一点？
Gulp是一个任务执行者。它不会捆绑您的脚本，但可以启动其他工具进行捆绑或预处理。
看起来您的问题与导入着色器的方式有关，而与minifier模块无关

ParseError
在有效的glsl着色器指令上失败

我建议先尝试导入您的
.glsl
，而不
吞下glsl
。
如果您的项目使用了诸如browserify或webpack之类的捆绑程序，请检查该捆绑程序的glsl导入器模块（例如，webpack的
webpack glsl loader
。
您知道吗

是一个Node.js风格的模块构建系统，与
browserify，GLSL着色器除外！它允许你分享
并使用npm上的着色器代码

它是生态系统的核心组件之一，允许您从npm安装GLSL模块并在着色器中使用它们。这使得将来自社区的不同效果和技术组合在一起变得非常简单，包括但不限于雾、噪音、胶片颗粒、光线行进辅助、缓和功能和照明模型

因为glslify只将一个着色器文件输出为字符串，所以只要您选择的任何WebGL框架接受自定义着色器，就可以轻松地使用它。
通过“将其转换为字符串”，您的意思是“缩小”glsl结果吗？@DacreDenny问题是Gulp将
#扩展GL_OES
视为JavaScript，它不明白。我需要将
.glsl
文件转换为字符串，这样它就相当于
var fragShader=“#extension GL_OES:enable”
。Webpack和Rollup可以很容易地处理这个问题，但我似乎无法让它与Gulp一起工作。那么该怎么办呢？它声称是一个“将GLSL代码转换为小型字符串的Gulp插件”，并将这些代码写回自述示例中的文件系统
build
目录（
.pipe（Gulp.dest（'build'））
）。将一个.glsl文件更改为另一个.glsl文件（缩小）。旧文件内容也可以作为字符串处理。着色器文件内容只是一个没有任何魔力的纯文本
gulpglsl
在捆绑环境中似乎没有帮助。谢谢！我确实误解了Gulp在做什么，但是这个项目使用的是Browserify，所以我能够让它工作