Question

我开始使用Gulp，我想写一个执行以下任务的任务：

使用模式*.doc.cjsx
写下在名为components.coffee

我正在使用gulp-inject。我知道我最终需要写一个合适的JS文件而不是咖啡文件（以避免在git上跟踪内容生成的文件）

这是我的任务:(咖啡）

gulp.task 'react-components', ->
    gulp.src('src/apis/front/commons/components.coffee')
        .pipe(plumber())
        .pipe(
            inject(
                gulp.src(
                    [
                        "src/apis/front/commons/button/*.doc.cjsx"
                    ],
                    read: false
                ),
                {
                    ignorePath: 'src/apis/front/commons/'
                    addPrefix: 'require ./' # I need to make the path relative at runtime, I haven't tested this yet because it doesn't generate any output, yet.
                    starttag: '# inject:components'
                }
            )
        )
        .pipe(debug({minimal: false}))
        .pipe(gulp.dest('src/apis/front/commons/'))

以下是components.coffee文件：

module.exports = [
    require "./button/button.doc.js" # This should be auto-generated inside the starting tag and closing tag.

    # inject:components
    # endinject
]

这是我运行任务时的输出：

[10:15:24] Using gulpfile ~/service/www/hapi-rho/gulpfile.coffee
[10:15:24] Starting 'react-components'...
[10:15:24] gulp-inject 1 files into components.coffee.
[10:15:24] gulp-debug: 
cwd:   ~/service/www/hapi-rho
base:  ~/service/www/hapi-rho/src/apis/front/commons/
path:  ~/service/www/hapi-rho/src/apis/front/commons/components.coffee

[10:15:24] gulp-debug: 1 item
[10:15:24] Finished 'react-components' after 31 ms

似乎工作正常，因为gulp说它将1个文件注入 components.coffee ，如果我在文件夹中添加另一个*.doc.cjsx文件，那么它说它注入了两个文件。

但components.coffee 的内容未被更改，所以我显然遗漏了一些东西。要么找不到starttag，要么找不到其他内容。

解决方案：这是我的解决方案，基于斯文的答案。路径发生了变化，我现在正在生成一个对象而不是一个数组，但原理是一样的。

gulp.task 'react-components', ->
    gulp.src('src/apis/front/components/components.coffee')
    .pipe(plumber())
    .pipe(
        inject(
            gulp.src('src/apis/front/components/**/*.doc.cjsx', read: false),
            ignorePath: 'src/apis/front/components/'
            starttag: '# inject:components'
            endtag: '# endinject'
            transform: (filepath, file, i, length) ->
                filename = filepath.replace(/cjsx$/, 'js')
                suffix = if i + 1 < length then ',' else ''
                '"' + filename + '": require ".' + filename + '"'# + suffix
        )
    )
    .pipe(debug(minimal: false))
    .pipe gulp.dest('src/apis/front/components/')

Answer 1

首先，您忘了指定endtag。

其次，您需要提供transform选项。如果没有显式提供，将使用默认转换函数，它使用目标文件类型（在您的情况下为coffee）和源文件类型（在您的情况下为cjsx）来选择为你明智的转变。

很遗憾，coffee / cjsx配对可用no default transformation。这意味着你必须自己写一个。

以下是您的案例（常规JavaScript，因为我不精通CoffeeScript）：

gulp.task('react-components', function()  {
  return gulp.src('src/apis/front/commons/components.coffee')
    .pipe(plumber())
    .pipe(inject(
       gulp.src("src/apis/front/commons/button/*.doc.cjsx", {read:false}),
       {
         ignorePath: 'src/apis/front/commons/',
         starttag: '# inject:components',
         endtag: '# endinject',
         transform: function (filepath, file, i, length) {
           return 'require ".' + filepath.replace(/cjsx$/, "js") +
                  '"' + (i + 1 < length ? ',' : '');
         }
       }
     ))
    .pipe(debug({minimal: false}))
    .pipe(gulp.dest('src/apis/front/commons/'));
});

将所有文件名写入另一个文件的Gulp任务

1 个答案: