Question

我有一个像这样的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插件做到这一点？

Answer 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将创建一个＆＃39; dist＆＃39;包含缩小的css和uglified js的文件夹以及修改后的main.html。

我已在具有此文件夹结构的测试系统上运行此功能，并且完美运行。如果您还有问题，请告诉我。

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

1 个答案: