Web前端使用了越来越多的JS或CSS,如jQuery, Backbone.js 和Bootstrap。一般情况下,我们是将这些Web资源拷贝到Java的目录下,通过手工进行管理,这种通方式容易导致文件混乱、版本不一致等问题。

WebJars是将这些通用的Web前端资源打包成Java的Jar包,然后借助Maven工具对其管理,保证这些Web资源版本唯一性,升级也比较容易。关于webjars资源,有一个专门的网站http://www.webjars.org/,我们可以到这个网站上找到自己需要的资源,在自己的工程中添加入maven依赖,即可直接使用这些资源了。

在我的项目试验中,采用spingMVC进行前端管理,其中使用bootstrap作为前台css的骨架,就使用到了webjars的bootstrap资源。

1、首先在项目的pom依赖中加入对bootstrap webjars的依赖

<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>3.1.0</version>
</dependency>

2、在spring的配置文件中,将对/webjars的访问重定向到/META-INF/resources/webjars/

<!-- uses WebJars so Javascript and CSS libs can be declared as Maven dependencies (Bootstrap, jQuery...) -->
<mvc:resources mapping="/webjars/**" location="classpath:/META-INF/resources/webjars/"/>

3、在页面中引入css、js文件,这里有个不方便的地方是要记住版本号

<link rel='stylesheet' href='/webjars/bootstrap/3.1.0/css/bootstrap.min.css'>

在webjars的网站中,讲到了三种应用webjars的方式,分别为NPM WebJars、Bower WebJars、Classic WebJars,我的上述方法属于Classic Webjars方式,其余的两种方式没有应用过,需要后续研究。。。。。

使用WebJar管理css、JavaScript文件的更多相关文章

  1. Vim下的Web开发之html,CSS,javascript插件

    Vim下的Web开发之html,CSS,javascript插件   HTML 下载HTML.zip 解压HTML.zip,然后将里面的所有文件copy到C:\Program Files\Vim\vi ...

  2. Yii2 assets注册的css样式文件没有加载

    准备引入layui.css文件的,在LayuiAssets类中已经配置了资源属性 <?php namespace frontend\assets; use yii\web\AssetBundle ...

  3. gulp实现打包js/css/img/html文件,并对js/css/img文件加上版本号

    参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...

  4. 几款极好的 JavaScript 文件上传插件

    文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...

  5. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

  6. Animo.js :一款管理 CSS 动画的强大的小工具

    Animo.js 是一个功能强大的小工具,用于管理 CSS 动画.它的特色功能包括像堆栈动画,创建跨浏览器的模糊,设置动画完成的回调等等.Animo 还包括惊人的 animate.css,为您提供了近 ...

  7. 【精心推荐】几款极好的 JavaScript 文件上传插件

    文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...

  8. Sublime Text插件:HTML+CSS+JAVASCRIPT+JSON快速格式化[转]

    今天在github上乱逛,无意间找到victorporof分享的htmlpretty插件,特做推荐: 先看看他是怎么描述htmlpretty的: This is a Sublime Text 2 an ...

  9. node.js 使用 UglifyJS2 高效率压缩 javascript 文件

    UglifyJS2 这个工具使用很长时间了,但之前都是在 gulp 自动构建 时用到了 UglifyJS 算法进行压缩. 最近玩了一下 UglifyJS2 ,做了一个 在线压缩javascript工具 ...

随机推荐

  1. mybatis0212 mybatis逆向工程 (MyBatis Generator)

    1mybatis逆向工程 (MyBatis Generator) .1什么是mybatis的逆向工程 mybatis官方为了提高开发效率,提高自动对单表生成sql,包括生成 :mapper.xml.m ...

  2. 基于MTD的NAND驱动开发、K9F1G08 2K page、Yaffs2 Files System

    转载:http://hi.baidu.com/cui1206/item/1d4119e376132513585dd886 基于MTD的NAND驱动(linux-2.6.22.10内核),目前已可以在该 ...

  3. 杂乱无章之javascript(二)

    1.浏览器与事件事件通常是由浏览器所产生,不同的浏览器会产生的事件也有所不同,即使同一浏览器不同版本所产生的事件也有不同.以下为HTML4.01中的事件 2.error事件:它可以调用一个错误处理函数 ...

  4. ASP.NET弹出模态对话框【转】

    主页面 PageBase.aspx.cs 中的代码 protected void Page_Load(object sender, EventArgs e) {    if (!this.IsPost ...

  5. Android调用相册截取图片遇到的问题

    1.在Android中可以使用如下的方式来调用相册,选择图片进行裁剪使用,昨天在开发的时候遇到一个问题 private void cropBigImageUri(Uri uri, int output ...

  6. [ImportNew]Java线程面试题

    Java语言一个重要的特点就是内置了对并发的支持,让Java大受企业和程序员的欢迎.大多数待遇丰厚的Java开发职位都要求开发者精通多线程技术并且有丰富的Java程序开发.调试.优化经验,所以线程相关 ...

  7. crontab执行java命令失效

    一.我们常常碰到在shell下执行某个命令能够成功,比如执行一个java程序: java -jar /home/opscoder/topo-audit.jar,但是在crontab下执行会失败. co ...

  8. Win7 32bit(x86)/64bit(x64) 完整安装版(非GHOST版本)

    Windows7 32bit 旗舰iso格式完整安装镜像 百度云盘:http://pan.baidu.com/s/1bpjLPs Windows7 64bit 旗舰iso格式完整安装镜像 百度云盘:h ...

  9. 今天写了几个css属性

    <!DOCTYPE html> <html> <head> <meta charset=UTF-8"> <title></t ...

  10. Jersey(1.19.1) - Extracting Request Parameters

    Parameters of a resource method may be annotated with parameter-based annotations to extract informa ...