在一个管道中定义的变量在另一个管道中未定义

Question

我正在使用gulp来处理一个站点的页面，其中一些页面是php文件。问题是，在所有页面都通过模板引擎运行之后，它们具有.html文件扩展名。我添加了一个属性的文件，指定如果它应该是一个文件除了html，然后重命名文件以匹配。但是，由于某些原因，gulp-rename一直说我用来存储扩展名的变量是undefined。

在gulpfile.js中对应的任务:

var gulp         = require('gulp'),
    gutil        = require('gulp-util'),
    lodash       = require('lodash'),
    data         = require('gulp-data'),
    filesize     = require('gulp-filesize'),
    frontMatter  = require('gulp-front-matter'),
    rename       = require('gulp-rename'),
    util         = require('util');    

gulp.task('metalsmith', function(){
var ext;                     //Variable to store file extension
return gulp.src(CONTENT_DIR)
    .pipe(frontMatter()).on("data", function(file){
        lodash.assign(file, file.frontMatter);
        delete file.frontMatter;
    })
    .pipe(data(function(file){                  //ext is defined here
        if(typeof file.filetype === 'undefined'){
            ext = {extname: '.html'};
        }else{
            ext = {extname: file.filetype};
        }
    }))
    .pipe(tap(function(file){
        console.log(ext);       //when I print to the console, ext is defined and correct
    }))
    .pipe(rename(ext)) //ext is undefined
    .pipe(gulp.dest(BUILD_DIR))
});

当我运行上面的Unsupported renaming parameter type supplied错误。

我还尝试过在与rename()相同的行上拥有obj选项，ext仅存储文件扩展名例如:.pipe(rename({extname: ext}))，这导致文件未定义添加为扩展名(而不是phpfile.php下面的md文件将被命名为phpfileundefined)

phpfile.md

---
layout: php.hbt
filetype: ".php"
title: "php"
---

package.json

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-data": "^1.2.1",
    "gulp-filter": "^4.0.0",
    "gulp-front-matter": "^1.3.0",
    "gulp-rename": "^1.2.2",
    "gulp-util": "^3.0.7",
    "lodash": "^4.11.1"
  }

Answer 1

您的问题是，当您执行rename(ext)时，ext的值仍然是undefined，因为您的data(...)代码尚未运行。

Gulp插件是这样工作的:

1. 你调用插件函数并传递给它任何必要的参数。在你的情况下，rename(ext) .
2. 插件函数返回一个双工流
3. 将双工流传递给.pipe()
4. 只有在所有 .pipe()调用都执行完后，流才开始运行。

因此，rename(ext)是一个函数调用，用于构造流本身。只有在流构造完成后，流才能开始运行。

但是，只有在流运行时才设置ext的值。在构造流时，需要在之前输入ext 的值。

在您的情况下，最简单的解决方案是简单地在data(...)函数中手动重命名，而不是依赖gulp-rename。你可以使用node.js内置的path模块(这就是gulp-rename在引擎盖下使用的):

var path = require('path');
gulp.task('metalsmith', function(){
  return gulp.src(CONTENT_DIR)
    .pipe(frontMatter()).on("data", function(file){
        lodash.assign(file, file.frontMatter);
        delete file.frontMatter;
    })
    .pipe(data(function(file){
        var ext;
        if(typeof file.filetype === 'undefined'){
            ext = '.html';
        }else{
            ext = file.filetype;
        }
        var parsedPath = path.parse(file.path);
        file.path = path.join(parsedPath.dir, parsedPath.name + ext);
    }))
    .pipe(gulp.dest(BUILD_DIR))
});

或者你也可以使用gulp-foreach，正如我在这个类似问题的答案中建议的那样。但是，在您的情况下，这并不是真正必要的，因为您已经在data(...)中直接访问了file对象。

EDIT:为了完整起见，这里有一个使用gulp-foreach的版本:

var foreach = require('gulp-foreach');
gulp.task('metalsmith', function(){
   return gulp.src(CONTENT_DIR)
    .pipe(frontMatter()).on("data", function(file){
        lodash.assign(file, file.frontMatter);
        delete file.frontMatter;
    })
    .pipe(foreach(function(stream, file){
        var ext;
        if(typeof file.filetype === 'undefined'){
            ext = {extname: '.html'};
        }else{
            ext = {extname: file.filetype};
        }
        return stream.pipe(rename(ext));
    }))
    .pipe(gulp.dest(BUILD_DIR))
});

Answer 2

@Sven的答案看起来就像要走的路，因为你希望可以推广到其他网站，因为你不能放弃gulp-front-matter管道。

来完成刚才的代码:Even

var ext = {extname: '.html'};
…
.pipe(rename(ext))
…

不起作用:gulp-rename会说"我不知道如何处理传递给我的这种数据。"你需要做

var ext = '.html';
…
.pipe(rename({extname: ext})
…

(或ext = 'html'和{extname: '.' + ext}，例如，如果"html"字符串是从其他地方拉出来的，并且没有".")

---

正如我们在聊天中讨论的那样，我希望发现您的php和html可以通过文件名或路径轻松区分。因为你所有的php文件都在/blog，你可以使用gulp-filter。也许最终它不是这种情况下的最佳解决方案，但它是一个有用的工具，所以它看起来是这样的:

var gulp = require('gulp'),
    gutil = require('gulp-util'),
    lodash = require('lodash'),
    data = require('gulp-data'),
    filesize = require('gulp-filesize'),
    filter = require('gulp-filter'),           // ADDED
    frontMatter = require('gulp-front-matter'),
    rename = require('gulp-rename'),
    util = require('util');
gulp.task('metalsmith', function() {
    const filterPHP = filter('blog/**/*', { restore: true });
    const filterHTML = filter('!blog/**/*', { restore: true });
    return gulp.src(CONTENT_DIR)
                                                  //---- if the only purpose of this particular gulp-front-matter pipe was to support the extension assignment, you could drop it
        .pipe(frontMatter()).on("data", function(file) {    //
            lodash.assign(file, file.frontMatter);          //
            delete file.frontMatter;                        //
        })                                                  //
                                                 //---------
        .pipe(filterPHP)                    // narrow down to just the files matched by filterPHP
        .pipe(rename({ extname: '.php' }))
        .pipe(filterPHP.restore)           // widen back up to the full gulp.src
        .pipe(filterHTML)                  // narrow down to just the files matched by filterHTML
        .pipe(rename({ extname: '.html' }))
        .pipe(filterHTML.restore)          // widen back up
        .pipe(gulp.dest(BUILD_DIR))
});