gpt4 book ai didi

javascript - 使用 gulp 生成文件

转载 作者:数据小太阳 更新时间:2023-10-29 05:12:36 25 4
gpt4 key购买 nike

我有一个项目,其中包含多个名为 setup.js 的文件,位于我的 /src 文件夹的各个子文件夹中。我想要一个 gulp 任务,将所有 setup.js 文件复制到 /dist 文件夹并保留子文件夹结构。这部分很简单。

棘手的部分是我还想在 \dist 文件夹中的每个 setup.js 文件旁边生成一个 index.html 文件。 index.html 文件对于所有这些文件将完全相同,只是它需要使用相对于 /dist 文件夹的路径来引用 setup.js 脚本。我知道我可以使用类似 gulp-template 的东西动态呈现 html 文件,但我不知道如何将 setup.js 的路径传递给它。而且我不知道如何为每个 setup.js 创建一个 index.html

所以我想要的结果文件夹结构看起来像这样

/src
template.html
/blah1
setup.js
/blah2
setup.js
/dist
/blah1
setup.js
index.html
/blah2
setup.js
index.html

关于如何执行此操作的任何想法?

或者,如果有人可以将我链接到 Gulp 上的一些详细文档/示例/教程,这些文档/示例/教程可能会解释如何进行此类操作,我将不胜感激。我还没有找到很多真正解释 Gulp 幕后发生的好文章,而且很难找到超越琐碎的 src | 的例子。丑化 |连接 |目标用例。

谢谢!

最佳答案

我当然不是 gulp 或 node 方面的专家,所以请随时纠正我/添加到我的答案中......

我已尝试复制与您在此处描述的内容类似的目录结构...

使用gulp-tapgulp-template

gulpfile.js

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

gulp.task('default', function () {
gulp.src('./src/**/**.js', { base: './src' })
// tap into the stream to get the current file and compile
// the template according to that
.pipe(tap(function (file) {
gulp.src('./src/template.html')
// compile the template using the current
// file.path as the src attr in the template file
.pipe(template({
sourcefile: file.path
}))
// not sure about this line but I'm sure it could be better
// splits the path on the / and then uses the second to last
// item in the split array (which is the current directory, minus src plus dist)
.pipe(gulp.dest('./dist/' + file.path.split('/')[file.path.split('/').length - 2]))
}))
// finally put the javascript files where they belong
.pipe(gulp.dest('./dist'))
});

template.html

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="<%- sourcefile %>"></script>
</head>
<body>
</body>
</html>

起始目录结构

.
|____dist
|____gulpfile.js
|____src
| |____bar
| | |____setup.js
| |____foo
| | |____setup.js
| |____template.html

最终目录结构

.
|____dist
| |____bar
| | |____setup.js
| | |____template.html
| |____foo
| | |____setup.js
| | |____template.html
|____gulpfile.js
|____src
| |____bar
| | |____setup.js
| |____foo
| | |____setup.js
| |____template.html

关于javascript - 使用 gulp 生成文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23532592/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com