读取 html 文件并找到 js/css 并将其缩小并用旧名称替换 js/css 名称 - Gulp答案

【问题标题】：Read html files and find js/css and minify that and replace js/css name with old name - Gulp读取 html 文件并找到 js/css 并将其缩小并用旧名称替换 js/css 名称 - Gulp
【发布时间】：2018-03-14 11:56:07
【问题描述】：

我有一个这样的html文件：

<html class="h-100">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>Login</title>

   <!-- main css -->
   <link rel="stylesheet" href="../src/vendors/clarity-ui/css/clarity-ui.min.css">
    <link rel="stylesheet" href="../src/scss/main.css">
</head>

我想为此读取 html 文件：

提取名称和路径 css 或 js 文件
缩小 css 或 js
复制到dist目录
将 css 或 js 路径/名称重命名为新位置和名称

如何使用 Gulp 和 Gulp 插件做到这一点？

【问题讨论】：

标签： gulp copy extract rename minify

【解决方案1】：

看看gulp-useref。它有一个很好的例子：

var gulp = require('gulp'),
useref = require('gulp-useref'),
gulpif = require('gulp-if'),
uglify = require('gulp-uglify'),
minifyCss = require('gulp-clean-css');

gulp.task('html', function () {
         //  I made a small change to gulp.src below
   return gulp.src('./app/*.html')
    .pipe(useref())
    .pipe(gulpif('*.js', uglify()))
    .pipe(gulpif('*.css', minifyCss()))
    .pipe(gulp.dest('dist'));
});

[编辑：添加您的 html]

<html class="h-100">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Login</title>

  <link rel="stylesheet" href="../src/vendors/clarity-ui/css/clarity-ui.min.css">

  <!-- build:css dist/css/main.css -->
  <link rel="stylesheet" href="../src/scss/main.css">
  <!-- endbuild -->

  <!-- build:js ../dist/js/myJS.js -->
  <script src="../src/js/myJS.js"></script>
  <!-- endbuild -->

 </head>

我假设您不想更改已经缩小的供应商 css。所以没有必要在它周围放置一个指令。

并且 useref 不会连接供应商 css，因为它不会抓取该资产，因为它们没有围绕它的构建指令。

你可以对你的 js 文件做类似的事情。

[编辑：添加 文件夹 结构。]

-[your working directory]
---[app]
-----test.html
---[src]
------[scss]
--------main.css
------[js]
--------myJS.js
-gulpfile.js

所以 gulpfile.js 位于 app 和 src 文件夹上方的基本工作目录中。

从您的工作目录运行 gulp html 将创建一个“dist”文件夹，其中包含您的缩小 css 和 uglified js 以及您修改后的 main.html。

我已经在具有这种文件夹结构的测试系统上运行了它，它运行良好。如果您仍有问题，请告诉我。

【讨论】：

感谢@Mark，但我不想连接所有 js 或 css 文件。 useref 用于连接资产文件。你有什么想法吗？
这只是他们的示例代码。它不会连接你的 css，例如，如果你在每个单独的周围放置一个构建指令。将指令放入 html 文件后，您是否尝试过？指令说明要获取哪些 css 或 js 资产以及将它们重命名为什么。在每个单独的 css 周围放置一个指令。