gulp-useref引发错误：“路径必须是字符串” [英] Gulp-useref is throwing error: "path must be a string"

问题描述

我使用由yeoman的gulp-webapp生成器生成的 gulpfile.js ，并稍微修改以适应我的需要。出于某种原因，当我尝试运行构建过程（默认任务）时，我一直遇到问题。错误在'html'任务期间抛出，大部分错误引用都在`node_modules \gulp-useref \index.js'中。

这是错误输出：

  stream.js：94 
 throw er; //在管道中未处理的流。 
 
 TypeError：路径在Object.fs.openSync（fs.js：427：18）处必须是字符串
 
在Object.fs.readFileSync（fs.js：284 ：15）
在Transform。< anonymous> （C：\dev\project\\\
ode_modules\gulp-useref\index.js：54：44）
在Array.forEach（native）
在Transform。< anonymous> （C：\dev\project\\\
ode_modules\gulp-useref\index.js：50：31）
在Array.forEach（native）
在Transform。< anonymous> （C：\dev\project\\\
ode_modules\gulp-useref\index.js:41:36）
在Array.forEach（native）
在Transform._transform（C：\\ \\ dev\project\\\
ode_modules\gulp-useref\index.js：38：23）
在Transform._read（C：\dev\project\\\
ode_modules\gulp-useref\ node_modules\through2\\\
ode_modules\readable-stream\lib\_stream_transform.js：184：10）
在Transform._write（C：\dev\project\\\
ode_modules\gulp-useref \\\
ode_modules\through2\\\
ode_modules\readable-stream\lib\_stream_transform.js：172：12）
  

以下是HTML任务：

  gulp.task（'html'，['styles'，'脚本']，函数（）{
 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（））; 
}）; 
  

解决方案简短回答： TypeError：路径必须是字符串表示链接/脚本路径存在问题。 useref无法找到您指向的文件或目录。

长答案：

遇到两个问题。

1. 链接/脚本路径需要与gulp文件相关，或者需要备用目录进行搜索。

 <！ -  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. yeoman gulpfile使用多个alt需要你把它们放在花括号里面的目录：
   

 <！ -  build：css（{。temp，app}）/styles/main.css  - > Works 
  

但是如果您只有一个alt目录，在大括号中它会引发错误。

 <！ -  build：css（ {app}）/styles/main.css  - > TypeError：path必须是字符串
  

这是因为它正在阅读路径为 C：\path\to\project\ {app} \styles\style.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_modules\gulp-useref\index.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:\dev\project\node_modules\gulp-useref\index.js:54:44)
    at Array.forEach (native)
    at Transform.<anonymous> (C:\dev\project\node_modules\gulp-useref\index.js:50:31)
    at Array.forEach (native)
    at Transform.<anonymous> (C:\dev\project\node_modules\gulp-useref\index.js:41:36)
    at Array.forEach (native)
    at Transform._transform (C:\dev\project\node_modules\gulp-useref\index.js:38:23)
    at Transform._read (C:\dev\project\node_modules\gulp-useref\node_modules\through2\node_modules\readable-stream\lib\_stream_transform.js:184:10)
    at Transform._write (C:\dev\project\node_modules\gulp-useref\node_modules\through2\node_modules\readable-stream\lib\_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\to\project\{app}\styles\style.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屋！