How to bundle GLSL files with Gulp?

I'm working on a WebGL project that requires custom .glsl shaders. The project bundles the app with Gulp, so I'm trying to use https://github.com/mikecao/gulp-glsl which is a "Gulp plugin that converts GLSL code into minified strings." Perfect!

I ran npm install gulp-glsl --save-dev and my gulpfile.js looks as follows:

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

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

And then I try to import my shader like this:

import fragShader from "./GLSL/frag.glsl";

But the Gulp compiler gives me a Compile Error:

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

I don't need Gulp to compile the .glsl file, I just need it to turn it into a string for use with WebGL. What can I do with Gulp to make this happen?

Solution

Gulp is a task runner. It doesn't bundle you scripts, but can launch some other tool to bundle or preprocess. It looks like your issue is related to the way you import shader and not to minifier module.

ParseError fails on valid glsl shader directive.

I suggest trying to import your .glsl without gulp-glsl first. If your project uses some bundler like browserify or webpack - check for glsl-importer module for that bundler (for example webpack-glsl-loader for webpack).