Node.js从html读取src值并获取图像

我正在开发一个小应用程序（通过玩来提升我的技能），使用Node.js、Express和Gulp构建静态网站。 该应用程序由用于构建HTML的PUG模板引擎和一个资产文件夹组成，所有静态文件（图像、css、js）都位于该文件夹中

images文件夹在init中有很多图像，我们不一定要全部使用它们。 然而，我想做的是

---

能够读入html文件（index.html）

检索图像的路径

从资产目录获取正在使用的图像

使用复制图像并在目标文件夹中创建另一个结构 html和图像

尽可能压缩网站的最终输出文件夹

下面是应用程序的结构。

|- Battlefield
  |- app
    |- Assets
      |- images
    |- Views
      |- html
        |- index.html
      |- pug
        |- index.pug
  |- dest

这是我的Gulpfile.js

//需要一口
var gulp=需要（“gulp”）；
var sass=需要（'gulp-sass'）；
var pug=需要（'gulp-pug'）；
var browserSync=require（'browser-sync'）；
var nodemon=require（'gulp-nodemon'）；
gulp.task（'hello'，function（）{
//测试吞咽任务“你好”
log（'Hello Zell'）；
});
gulp.task（'sass'，function（）{
return gulp.src（'app/Assets/scss/***.scss'）//获取app/scss和子目录中以.scss结尾的所有文件
.pipe（sass（））//使用gulp sass
.pipe（吞咽目标（'app/Assets/css'））
.pipe（browserSync.reload({
溪流：对
}))
});
gulp.task（'pug'，/*['copy']，*/function（）{
return gulp.src（'app/Views/pug/***.pug'）
.烟斗（哈巴狗）({
真的吗
}))
.pipe（gulp.dest（'app/Views/html'））
.pipe（browserSync.reload({
溪流：对
}))
});
//多重监视过程
gulp.task（'watch'，['browserSync'，'sass'，'pug'，function（））{
狼吞虎咽的手表（'app/Assets/scss/***.scss'，['sass']）；
狼吞虎咽的手表（'app/Views/pug/***.pug'，['pug']）；
//每当HTML、CSS或JS文件更改时，重新加载浏览器
gulp.watch（'app/Views/html/*.html'，browserSync.reload）；
gulp.watch（'app/Assets/css/***.css'，browserSync.reload）；
gulp.watch（'app/Assets/js/***.js'，browserSync.reload）；
});
gulp.task（'browserSync'，['nodemon'，function（））{
browserSync.init（空{
代理：“http://localhost:4000",
文件：[“app/***.*”]，
港口：7000，
});
});
吞咽任务（'nodemon'，函数（cb）{
var=false；
返回节点({
脚本：“server.js”
}).on（'start'，function（））{
//避免多次启动nodemon
//感谢github用户@matthisk
如果（！已启动）{
cb（）；
开始=真；
}
});
});如果您想捕获更新的资产和html文件，您可以使用这两个软件包来实现所需的功能。如果你升级到gulp4，你可以有一些非常漂亮的功能来帮助你

您可以在此处找到关于“大口喝”的所有答案：

关于Express的说明

因为Express是一个HTTP服务器，所以您可以构建自己的路由，以访问您想要服务的任何文件/资产。
因此，例如，图像将在自定义express配置文件中以这种方式设置URL:img src='/layout/*.png'

我的配置，如果可以帮助您：

"严格使用",

const express=require（'express'）

module.exports=（应用程序，配置）=>{

}

但是，如果您正在维护一个解决方案，并且需要将编译后的html源代码连同其他资源一起交付给另一方，我建议您使用这个gulp包，它会将html、css文件中的资源路径（strin替换）重写到您喜欢的另一个源代码中。
-
“能够读入html文件（index.html）”你是什么意思？browserSync启动时，是否先查看index.html？是吗？嗨@HaHuuTin，谢谢你的回复。我更新了问题，使之更加准确。我希望你明白了。如果你需要更多信息，请告诉我。谢谢，AjmalGulp版本：3.9.0。我用package.json更新问题。
path = require('path'),

favicon = require('serve-favicon'),

serve_static = require('serve-static'),

cookie_parser = require('cookie-parser'),

body_parser = require('body-parser'),

http = require('http');

app.set('port', 4000);
app.set('views', './server/views/pages/');
app.set('view engine', 'pug');
app.use(cookie_parser());
app.use(body_parser.json());
app.use(body_parser.urlencoded({
    extended: true
}));

app.use('/stylesheets', express.static('./builds/app/stylesheets'));
app.use('/scripts', express.static('./builds/app/scripts'));
app.use('/fonts', express.static('./builds/app/fonts'));
app.use('/images', express.static('./builds/app/images'));