把需要引入的CSS和JS所有外部文件合并为两个文件，方便调用怎么做？

迷南。 2023-10-05 12:10 36阅读 0赞

## 把需要引入的CSS和JS所有外部文件合并为两个文件，方便调用怎么做？ ##

### 1.问题原因 ###

项目开发几乎每个JSP都会引用JS和CSS，那么就会有一些常用JS或者CSS，我们不希望每个JSP文件都引用一堆文件，而是只引用公用的JS和CSS就可以了；

### 2.解决办法 ###

#### 创建commonsCss.js文件----存放 css文件路径 ####

>     document.write('需要的css路径')
> 
>     //文件只是学习，不做其他用途
>     //全局css
>     document.write(' <link href="static/Hplus/css/bootstrap.min.css" rel="stylesheet">')
>     document.write('<link href="static/Hplus/css/bootstrap-table.min.css" rel="stylesheet">')
>     document.write(' <link href="static/Hplus/css/font-awesome.css">')
>     document.write('  <link href="static/Hplus/css/animate.css" rel="stylesheet">')
>     document.write('   <link href="static/Hplus/css/style.css" rel="stylesheet">')
>     //漂亮的弹窗口必须引入css
>     document.write('   <link href="static/Hplus/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">')

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FheHpzdWo_size_16_color_FFFFFF_t_70][]

#### 创建commonsJs.js文件----存放 Js文件路径 ####

>     //全局js
>     document.write('<script src="static/Hplus/js/jquery.min.js"></script>')
>     document.write('<script src="static/Hplus/js/bootstrap.min.js?"></script>')
>     document.write('<script src="static/Hplus/js/plugins/metisMenu/jquery.metisMenu.js"></script>')
>     document.write('<script src="static/Hplus/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>')
>     document.write('<script src="static/Hplus/js/plugins/layer/layer.min.js"></script>')
>     document.write('<script src="static/Hplus/js/bootstrap-table.min.js"></script>')
>     document.write('<script src="static/Hplus/js/plugins/sweetalert/sweetalert.min.js"></script>')

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FheHpzdWo_size_16_color_FFFFFF_t_70 1][]

#### JSP页面引用 ####

>     <head>
>         <title>宠物阁</title>
>         <base href="<%=basePath%>">
>         <%--全局css--%>
>         <script src="static/commons/css/commonsCss.js"></script>
>     </head>
> 
>     <body>
>     </body>
>     <%--全局js--%>
>     <script src="static/commons/js/commonsJs.js"></script>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FheHpzdWo_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FheHpzdWo_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201021170239711.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FheHpzdWo=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FheHpzdWo_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201021170418631.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FheHpzdWo=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FheHpzdWo_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201021170633272.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FheHpzdWo=,size_16,color_FFFFFF,t_70