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

Question

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

images 文件夹有很多初始图像，我们不一定要使用所有图像。 但是，我想做的是；

1. 能够读取html文件（index.html）
2. 检索图像的路径
3. 从资产目录中获取正在使用的图片
4. 复制图像并在目标文件夹中创建另一个结构 index.html 和图片
5. 如果可能，压缩网站的最终输出文件夹。

下面是应用的结构。

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

这是我的 Gulpfile.js

// Requiring Gulp
var gulp = require('gulp');
var sass = require('gulp-sass');
var pug = require('gulp-pug');
var browserSync = require('browser-sync');
var nodemon = require('gulp-nodemon');

gulp.task('hello', function() {
  //Test Gulp task 'hello'
  console.log('Hello Zell');
});

gulp.task('sass', function() {
  return gulp.src('app/Assets/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
    .pipe(sass()) //using gulp-sass
    .pipe(gulp.dest('app/Assets/css'))
    .pipe(browserSync.reload({
      stream: true
    }))
});


gulp.task('pug', /*['copy'],*/ function() {
  return gulp.src('app/Views/pug/**/*.pug')
    .pipe(pug({
      pretty: true
    }))
    .pipe(gulp.dest('app/Views/html'))
    .pipe(browserSync.reload({
      stream: true
    }))
});


// Multiple watch process
gulp.task('watch', ['browserSync', 'sass', 'pug'], function() {
  gulp.watch('app/Assets/scss/**/*.scss', ['sass']);
  gulp.watch('app/Views/pug/**/*.pug', ['pug']);
  // Reloads the browser whenever HTML or CSS or JS files change
  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(null, {
    proxy: "http://localhost:4000",
    files: ["app/**/*.*"],
    port: 7000,
  });
});

gulp.task('nodemon', function(cb) {

  var started = false;

  return nodemon({
    script: 'server.js'
  }).on('start', function() {
    // to avoid nodemon being started multiple times
    // thanks github user @matthisk
    if (!started) {
      cb();
      started = true;
    }
  });
});

更新：

下面是package.json：

{
  "name": "Framework",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Aumeeruddy Ajmal",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.8",
    "gulp": "^3.9.1",
    "gulp-pug": "^3.3.0",
    "gulp-sass": "^3.1.0",
    "express": "^4.15.3",
    "body-parser": "^1.17.2",
    "cookie-parser": "^1.4.3",
    "multer": "^1.3.0",
    "gulp-nodemon": "^2.2.1"
  }
}

例如，我有以下 HTML。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Node Static files</title>
</head>
<body>
  <img src="images/logo.jpg" alt="">
  <img src="images/main.jpg" alt="">
  <img src="images/example.jpg" alt="">
</body>
</html>

我希望节点或 gulp 通过命令或任务能够读取该 html，找到 <img src="..." alt=""> 部分，检索图像的路径。 查看路径目录并将图像复制到另一个目录（用于重组），然后压缩输出包。

Answer 1

如果您想获取更新的资产和 html 文件，您可以使用这 2 个包来满足您的需求。如果你更新到 gulp4，你可以拥有一些非常漂亮的功能来帮助你。

您对 gulp 的所有答案都可以在这里找到：https://github.com/gulpjs/gulp/tree/4.0#sample-gulpfilejs

关于 Express 的说明

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

我的配置，如果对你有帮助的话：

'使用严格';

const express = require('express'),

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');

module.exports = (app, config)=> {

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'));

}

但是，如果您正在维护一个解决方案，并且您需要将已编译的 html 源代码与其他资产一起交付给另一方，我建议您使用这个 gulp 包，它会重写资产的路径（strin 替换) 在您的 html、css 文件中复制到您喜欢的另一个来源。 - https://www.npmjs.com/package/gulp-replace