我的项目结构是这样的:
./
-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>
这显然行不通。那么如何显示实际文件名而不是模式?
最佳答案
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'));
});
关于javascript - 如何在 gulp-template 中使用与模式匹配的实际文件名,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27076745/