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

how to use actual file name matched by pattern in gulp-template

本文关键字：模式匹配 文件名 gulp      更新时间：2023-09-26

我的项目结构是这样的：

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

我想匹配文件夹中的所有 javascript 文件js并在索引文件中使用它们。所以，在我的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'))
})

索引.html

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

呈现索引.html如下所示：

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

这显然是行不通的。那么如何显示实际文件名来代替图案呢？

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'));
});
相关文章：