Question

我正在开发一个小应用程序（用来升级我的技能），使用Node.js，Express和Gulp构建静态网站。该应用程序包含用于构建HTML的PUG模板引擎和一个Asset文件夹，其中包含所有静态文件（images，css，js）。

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

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

以下是该应用的结构。

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

这是我的Gulpfile.js

＆＃13;

// 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;
    }
  });
});

＆＃13;

更新

下面是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。

＆＃13;

<!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>

＆＃13;

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

Answer 1

如果您想要捕获更新的资产和html文件，您可以使用这两个软件包来实现您的需求。如果你更新到gulp4，你可以有一些漂亮的功能，可以帮助你。

您可以在此处找到所有关于gulp的答案：https://github.com/gulpjs/gulp/tree/4.0#sample-gulpfilejs

关于快递的说明

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

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

'use strict';

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）=＆gt; {

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 replacement））在你的html，css文件中你喜欢的另一个来源。 - https://www.npmjs.com/package/gulp-replace

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

1 个答案: