为什么 usemin 不接受 --htmlmin 选项？

Question

我正在使用带有 --htmlmin 选项的 npm usemin 构建网站的分发副本。

从package.json 运行下面的脚本，我希望在dist 目录中创建3 个迷你/丑陋的文件：index.html、aboutus.html 和contactus.html。

所有文件都包含以<!--build:css css/main.css-->...<--endbuild--> 和<!--build:js js/main.js-->...<--endbuild--> 为界的链接和脚本

脚本还应创建main.css 和main.js

如果我设置index.html htmlmin:true，实际结果是脚本错误。

如果我设置为false（其他两个文件仍然是htmlmin:true），那么它会“成功”运行，在dist 中创建迷你/丑陋的aboutus.html 和contactus.html。但是它根本不会创建任何 main 文件。

脚本如下：

"scripts": {
  "start": "npm run watch:all",
  "test": "echo \"Error: no test specified\" && exit 1",
  "lite": "lite-server",
  "scss": "node-sass -o css/ css/",
  "watch:scss": "onchange \"css/*.scss\" -- npm run scss",
  "watch:all": "parallelshell \"npm run watch:scss\" \"npm run lite\"",
  "clean": "rimraf dist",
  "copyfonts": "copyfiles -f node_modules/font-awesome/fonts/* dist/fonts",
  "imagemin": "imagemin img/* -o dist/img",
  "usemin": "usemin contactus.html -d dist -- htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html && usemin index.html -d dist -o dist/index.html",
  "build": "npm run clean && npm run copyfonts && npm run imagemin && npm run usemin"
},

错误日志是

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build'
1 verbose cli ]
2 info using npm@6.14.4
3 info using node@v12.16.2
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle confusion@1.0.0~prebuild: confusion@1.0.0
6 info lifecycle confusion@1.0.0~build: confusion@1.0.0
7 verbose lifecycle confusion@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle confusion@1.0.0~build: PATH: C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\user\OneDrive\Chiff Chaff\JavaScript Projects\Coursera\FullStack\Bootstrap4\conFusion\node_modules\.bin;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\System32\OpenSSH\;C:\Program Files\nodejs\;C:\Program Files (x86)\Brackets\command;C:\Program Files\Git\cmd;C:\Users\user\AppData\Local\Microsoft\WindowsApps;C:\Users\user\AppData\Roaming\npm;C:\Users\user\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\user\AppData\Local\GitHubDesktop\bin;C:\Program Files\Git\cmd;
9 verbose lifecycle confusion@1.0.0~build: CWD: C:\Users\user\OneDrive\Chiff Chaff\JavaScript Projects\Coursera\FullStack\Bootstrap4\conFusion
10 silly lifecycle confusion@1.0.0~build: Args: [
10 silly lifecycle   '/d /s /c',
10 silly lifecycle   'npm run clean && npm run copyfonts && npm run imagemin && npm run usemin'
10 silly lifecycle ]
11 silly lifecycle confusion@1.0.0~build: Returned: code: 1  signal: null
12 info lifecycle confusion@1.0.0~build: Failed to exec build script
13 verbose stack Error: confusion@1.0.0 build: `npm run clean && npm run copyfonts && npm run imagemin && npm run usemin`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:310:20)
13 verbose stack     at ChildProcess.<anonymous> (C:\Program Files\nodejs\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:310:20)
13 verbose stack     at maybeClose (internal/child_process.js:1021:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid confusion@1.0.0
15 verbose cwd C:\Users\user\OneDrive\Chiff Chaff\JavaScript Projects\Coursera\FullStack\Bootstrap4\conFusion
16 verbose Windows_NT 10.0.18363
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v12.16.2
19 verbose npm  v6.14.4
20 error code ELIFECYCLE
21 error errno 1
22 error confusion@1.0.0 build: `npm run clean && npm run copyfonts && npm run imagemin && npm run usemin`
22 error Exit status 1
23 error Failed at the confusion@1.0.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

Answer 1

检查 CSS 和 JavaScript 源文件路径

我最近遇到了同样的问题。我发现我的 about.html 文件中有错误的路径（JavaScript 文件）

这里走错路了，

<script src="node_modules/popper.js/dist/popper.min.js"></script>

我更正了，

<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>

因为我写了错误的源路径，这就是我的 aboutus.html 文件无法缩小的原因。虽然它的渲染 CSS/main.css 文件。当涉及到 JavaScript 块时，它停止了。然后整个过程就停止了。

这是我的 CSS 和 JavaScript 源文件路径

<!-- build:css css/main.css -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<!-- endbuild -->

<!-- build:js js/main.js -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
<!-- endbuild -->