javascript - 如何在 gulp-template 中使用与模式匹配的实际文件名

Question

我的项目结构是这样的:

./
 -index.html
 -js/
    -app.js
    -home/
         -home.js

我想匹配 js 文件夹中的所有 javascript 文件并在索引文件中使用它们。所以，在我的 gulpfile.js 中是这样使用的:

var gulp = require('gulp'),
template = require('gulp-template');

var js = ['js/**/*.js'];

gulp.task('default', function() {
return gulp.src('index.html')
        .pipe(template({
            scripts: js,
            name: 'index',
        }))
        .pipe(gulp.dest('dist'))
})

index.html

<%= name %>
<!-- compiled JavaScript --><% scripts.forEach( function ( file ) { %>
<script type="text/javascript" src="<%= file %>"></script><% }); %>

像这样呈现 index.html:

<!-- compiled JavaScript -->
<script type="text/javascript" src="js/**/*.js"></script>

这显然行不通。那么如何显示实际文件名而不是模式？

Answer 1

glob 模式需要扩展为实际文件路径数组。这通常由 gulp.src 为您处理。

您可以使用 globby像这样扩展模式:

var gulp = require('gulp');
var template = require('gulp-template');
var globby = require('globby'); // npm install --save-dev globby

var js = globby.sync(['js/**/*.js']);

gulp.task('default', function() {
    return gulp.src('index.html')
        .pipe(template({
            scripts: js,
            name: 'index',
        }))
        .pipe(gulp.dest('dist'));
});