Gulp-useref 抛出错误:“路径必须是字符串"； [英] Gulp-useref is throwing error: "path must be a string"

问题描述

我正在使用由 yeoman 的 gulp-webapp 生成器生成的 gulpfile.js 并由我稍作修改以满足我的需要.出于某种原因，当我尝试运行构建过程(默认任务)时，我一直遇到问题.在 'html' 任务期间会抛出错误，并且大多数错误引用都在 `node_modulesgulp-userefindex.js' 中.

这是错误输出:

stream.js:94投掷者；//管道中未处理的流.TypeError:路径必须是字符串在 Object.fs.openSync (fs.js:427:18)在 Object.fs.readFileSync (fs.js:284:15)在变换.<匿名>(C:devproject
ode_modulesgulp-userefindex.js:54:44)在 Array.forEach (本机)在变换.<匿名>(C:devproject
ode_modulesgulp-userefindex.js:50:31)在 Array.forEach (本机)在变换.<匿名>(C:devproject
ode_modulesgulp-userefindex.js:41:36)在 Array.forEach (本机)在 Transform._transform (C:devproject
ode_modulesgulp-userefindex.js:38:23)在 Transform._read (C:devproject
ode_modulesgulp-useref
ode_modules	hrough2
ode_modules
eadable-streamlib\_stream_transform.js:184:10)在 Transform._write (C:devproject
ode_modulesgulp-useref
ode_modules	hrough2
ode_modules
eadable-streamlib\_stream_transform.js:172:12)

这是 HTML 任务:

gulp.task('html', ['styles', 'scripts'], function () {var jsFilter = $.filter('**/*.js');var cssFilter = $.filter('**/*.css');返回 gulp.src(['app/**/*.html','app/**/*.php']).pipe($.useref.assets()).pipe(jsFilter).pipe($.uglify()).pipe(jsFilter.restore()).pipe(cssFilter).pipe($.csso()).pipe(cssFilter.restore()).pipe($.useref.restore()).pipe($.useref()).pipe(gulp.dest('dist')).pipe($.size());});

解决方案

简答:TypeError: path must be a string 表示链接/脚本路径有问题.useref 找不到您指向的文件或目录.

长答案:
我遇到了两个问题.

1. 链接/脚本路径需要与 gulpfile 相关，或者具有要搜索的备用目录.

<块引用>

<link href="app/styles/base.css"><link href="app/styles/article.css"><!-- 结束构建 -->

或

<块引用>

<link href="/styles/base.css"><link href="/styles/article.css"><!-- 结束构建 -->

1. yeoman gulpfile 使用多个 alt 目录，这要求您将它们放在大括号中，如下所示:

<块引用>

作品

但是如果你只有一个 alt 目录并且你把它放在花括号里，它会抛出一个错误.

<块引用>

TypeError:路径必须是字符串

这是因为它将路径读取为 C:path oproject{app}stylesstyle.css.这对我来说似乎很奇怪.我认为无论长度如何，它都会遍历大括号中列出的目录.

I'm using a gulpfile.js generated by yeoman's gulp-webapp generator and modified slightly by me to fit my needs. For some reason I keep running into an issue when I try to run the build process(default task). The error is thrown during the 'html' task and most of the error references are in `node_modulesgulp-userefindex.js'.

Here is the error output:

stream.js:94
    throw er; //Unhandled stream in pipe.

TypeError: path must be a string
    at Object.fs.openSync (fs.js:427:18)
    at Object.fs.readFileSync (fs.js:284:15)
    at Transform.<anonymous> (C:devproject
ode_modulesgulp-userefindex.js:54:44)
    at Array.forEach (native)
    at Transform.<anonymous> (C:devproject
ode_modulesgulp-userefindex.js:50:31)
    at Array.forEach (native)
    at Transform.<anonymous> (C:devproject
ode_modulesgulp-userefindex.js:41:36)
    at Array.forEach (native)
    at Transform._transform (C:devproject
ode_modulesgulp-userefindex.js:38:23)
    at Transform._read (C:devproject
ode_modulesgulp-useref
ode_modules	hrough2
ode_modules
eadable-streamlib\_stream_transform.js:184:10)
    at Transform._write (C:devproject
ode_modulesgulp-useref
ode_modules	hrough2
ode_modules
eadable-streamlib\_stream_transform.js:172:12)

Here is the HTML task:

gulp.task('html', ['styles', 'scripts'], function () {
    var jsFilter = $.filter('**/*.js');
    var cssFilter = $.filter('**/*.css');

    return gulp.src(['app/**/*.html','app/**/*.php'])
        .pipe($.useref.assets())
        .pipe(jsFilter)
        .pipe($.uglify())
        .pipe(jsFilter.restore())
        .pipe(cssFilter)
        .pipe($.csso())
        .pipe(cssFilter.restore())
        .pipe($.useref.restore())
        .pipe($.useref())
        .pipe(gulp.dest('dist'))
        .pipe($.size());
});

解决方案

Short answer: TypeError: path must be a string means that there is an issue with the link/script paths. useref can't find the the file or directory you are pointing it to.

Long answer:
There were two issues I ran into.

1. The link/script paths needs to be relative to the gulpfile or have an alternate directory to search.

<!-- build:css /styles/main.css -->
<link href="app/styles/base.css">
<link href="app/styles/article.css">
<!-- endbuild -->

OR

<!-- build:css(app) /styles/main.css -->
<link href="/styles/base.css">
<link href="/styles/article.css">
<!-- endbuild -->

1. The yeoman gulpfile uses multiple alt directories which requires you to put them inside curly braces like this:

<!-- build:css({.temp,app}) /styles/main.css --> Works

But if you only have one alt directory and you leave it in the curly braces it will throw an error.

<!-- build:css({app}) /styles/main.css --> TypeError: path must be a string

This is because it is reading the path as C:path oproject{app}stylesstyle.css. This seems like odd behavior to me. I would think that it would iterate through the directories listed in the braces regardless of the length.

这篇关于Gulp-useref 抛出错误:“路径必须是字符串"；的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！