我正在使用usemin-cli
来缩小我的html文件。我已经安装了使用usemin-cli
所需的所有依赖项。我正在尝试以下usemin
npm脚本来完成此任务:-
"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'",
"clean": "rimraf dist",
"copyfonts": "copyfiles -f node_modules/font-awesome/fonts/* dist/fonts",
"imagemin": "imagemin img/* --out-dir dist/img",
"usemin": "usemin index.html -d dist --htmlmin -o dist/index.html && usemin contactus.html -d dist --htmlmin -o dist/contactus.html && usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html",
"build": "npm run clean && npm run copyfonts && npm run imagemin && npm run usemin"
}
它只缩小了index.html
和contactus.html
,并在aboutus.html
给出了一个错误。这是aboutus.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie-edge">
<title>Ristorante Con Fusion: About Us</title>
<!-- 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 -->
</head>
<body>
<!-- here is my body code using bootstrap and html -->
<!-- build:js js/main.js -->
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/popper.js/dist/popper.min.js"></script>
<script src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="./js/scripts.js"></script>
<!-- endbuild -->
</body>
</html>
这是index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie-edge">
<!-- 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 -->
<title>Ristorante Con Fusion</title>
</head>
<body>
<!-- build:js js/main.js -->
<script src="./node_modules/jquery/dist/jquery.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/scripts.js"></script>
<!-- endbuild -->
</body>
</html>
在npm run build
之后运行时出错
> usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html
undefined:1625
throw new JS_Parse_Error(message, filename, line, col, pos);
^
SyntaxError: Unexpected token: name (o)
at JS_Parse_Error.get (eval at <anonymous> (/home/neo/Desktop/full stack coursera/Web Ui with bootstrap(course1)/bootstrap4-starter/conFusion/node_modules/usemin/node_modules/uglify-js/tools/node.js:27:1), <anonymous>:86:23)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! confusion@1.0.0 usemin: `usemin aboutus.html -d dist --htmlmin -o dist/aboutus.html`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the confusion@1.0.0 usemin script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/neo/.npm/_logs/2019-01-17T10_30_03_425Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! confusion@1.0.0 build: `npm run clean && npm run copyfonts && npm run imagemin && npm run usemin`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the confusion@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/neo/.npm/_logs/2019-01-17T10_30_03_525Z-debug.log
我该怎么解决这个问题呢?
发布于 2019-01-23 08:55:36
问题可能在您的scripts.js文件中,但首先,请尝试一步一步地执行下一个测试。
从你的package.json ...更改(仅添加另一个*.html文件,但现在我们仅尝试使用一个*.html文件)
"usemin": "usemin index.html -d dist --htmlmin -o dist/index.html",
至
"usemin": "usemin index.html -d dist -o dist/index.html --htmlmin true",
如果不起作用,请保留更改并尝试此
从你的*.html ...变化
<!-- build:js js/main.js -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="js/scripts.js"></script>
<!-- endbuild -->
至
<!-- build:js js/main.js -->
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/tether/dist/js/tether.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- endbuild -->
<script src="js/scripts.js"></script>
跑
npm run usemin
如果看到dist文件夹和包含css和js文件夹以及
文件的完整路径;结论是,您需要从scripts.js文件中检查JavaScript的语法。
发布于 2020-09-23 07:00:02
我得到了同样的错误,因为我正在使用箭头函数和jQuery,所以我删除了箭头函数(删除jQuery代码也可以),并且运行时没有任何错误:
"usemin": "usemin aboutus.html -d dist -o dist/aboutus.html --htmlmin true && usemin contactus.html -d dist -o dist/contactus.html --htmlmin true && usemin index.html -d dist -o dist/index.html --htmlmin true"
发布于 2020-07-17 04:28:14
Assalamu Alaykum。
在aboutus.html文件中包含了错误popper.min.js文件路径
这就是你的错误道路
<script src="./node_modules/popper.js/dist/popper.min.js"></script>
应该是这样的。
<script src="./node_modules/popper.js/dist/umd/popper.min.js"></script>
您可以检查您的index.html文件popper.min.js源路径,它是正确的。
https://stackoverflow.com/questions/54234289
复制相似问题