閱讀html文件並找到js / css並將其最小化，然后用舊名稱替換js / css名稱-Gulp

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將會創建一個'dist'文件夾，其中包含您的縮小的CSS和uglified js以及修改后的main.html。

我已經在具有此文件夾結構的測試系統上運行了它，並且效果很好。 讓我知道您是否還有問題。

閱讀html文件並找到js / css並將其最小化，然后用舊名稱替換js / css名稱-Gulp

問題描述

1 個解決方案

解決方案1
0 2017-10-03 13:52:59

閱讀html文件並找到js / css並將其最小化，然后用舊名稱替換js / css名稱-Gulp

問題描述

1 個解決方案

解決方案1 0 2017-10-03 13:52:59

解決方案1
0 2017-10-03 13:52:59