如何从一个html文件加载所有CSS和JS？

Question

我的申请结构如下：

在private void showAlertMesage() { AlertDialog.Builder alertDialogBuilder = new AlertDialog.Builder(this); alertDialogBuilder.setPositiveButton("Ok", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface arg0, int arg1) { seekAllowed = true; webView1.resume(); } }); alertDialogBuilder.setNegativeButton("Cancel", new DialogInterface.OnClickListener() { @Override public void onClick(DialogInterface arg0, int arg1) { webView1.resume(); } }); AlertDialog alertDialog = alertDialogBuilder.create(); alertDialog.show(); } 和webapp/assets/css上分别有我的CSS和JavaScript文件。

在webapp/assets/js上我有以下链接和脚本定义：

WEB-APP/html/include/imports.html

我没有在我开发的每个页面上放置所有这些信息，而是想使用类似的东西（这是来自login.html）：

<link rel="shortcut icon" href="assets/img/favicon.png"
type="image/x-icon" />

<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link id="bootstrap-rtl-link" href="" rel="stylesheet" />
<link href="assets/css/font-awesome.min.css" rel="stylesheet" />

<link
href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300"
rel="stylesheet" type="text/css" />

<link id="beyond-link" href="assets/css/beyond.min.css" rel="stylesheet" />
<link href="assets/css/demo.min.css" rel="stylesheet" />
<link href="assets/css/animate.min.css" rel="stylesheet" />
<link id="skin-link" href="" rel="stylesheet" type="text/css" />

<script src="assets/js/skins.min.js" ></script>

<script src="assets/js/jquery-2.0.3.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/slimscroll/jquery.slimscroll.min.js"></script>

<!--Beyond Scripts -->
<script src="assets/js/beyond.js"></script>

我正在尝试不同的相对路径，但这不起作用，无论是在上面还是在文件上“找到”CSS和JS文件。这不应该工作吗？

如何在一行中使用适当的相对路径，将所有CSS和JS包含在我的页面中？

Answer 1

我认为你正在寻找像gulp.js这样的任务选手 我总是使用它来使所有脚本在一个文件中缩小，所有样式在一个文件中缩小，这也有助于许多其他任务

您可以尝试通过以下方式在项目中安装：

npm install gulp --sav-dev

然后你可以使用像

这样的东西

gulp.src('js/*.js') // Matches all js files in js directory  
.pipe(minify()) // minify files
.pipe(gulp.dest('build')); // load them all in build file

有关gulp可以执行的更多信息和任务，请参阅official docs