Play - js/css concatenation & minify

时间：2022-10-05 10:17:20

1. Css

We’ll use LESS CSS, all less sources are defined in the app/assets, and they will be

compiled to standard css by the build process.

Below are steps to use the less css.

a.   add sbt-less plugin to your project’s plugins.sbt

addSbtPlugin("com.typesafe.sbt" % "sbt-less" % "1.0.0")

b.   enable the sbt-web plugin for your project

Note: sbt-web is auto enabled in play 2.3.x, we do not need this step if our app is

based on play2.3.x

lazy val root = (project in file(".")).enablePlugins(SbtWeb)

c.  tell less compiler to compile related less sources

add the following lines to build.sbt of your project.

includeFilter in (Assets, LessKeys.less) := "*.less"

excludeFilter in (Assets, LessKeys.less) := "_*.less"

d.  enable compress

add the following line to build.sbt of your project.

LessKeys.compress in Assets := true

for step c & d, we can also configure these settings in Build.Scala, which is

equal to  built.sbt

e.   create less file in your assets/css(e.g.   assets/css/demo.less), you can import other

less file.

e.g.  @import "lib/bootstrap/less/bootstrap.less";

f.    use the less in your page, just add the stylesheet reference to demo.css

e.g. <link rel="stylesheet" type="text/css"  href=”css/demo.css”/>

h.   LESS sources are compiled automatically during an assets command, or when

you  refresh any page in your browser while you are running in development mode.

i.     More online resource

AssetsLess

sbt-less plugin

Javascript

We’ll use RequireJS(a JavaScript file and module loader) to modularize our

JavaScript.  Using RequireJS makes it is possible to resolve and load javascript modules

on the client side while allowing server side optimization. For server side optimization

module dependencies may be minified and combined, and we can use sbt-rjs to do the

optimization.

Using RequireJS, we should write our js in modular. Below is an example on how to use

requirejs.

//demouser/UserController.js

define([], function(){

function UserController($scope, $http){

$scope.user = {"email":"", "name":"", "id":null};

$scope.load = function(){

$http.get('user/list')

.success(function(resp){

$scope.users = resp;

})

};

$scope.load();

}

UserController.$inject = ['$scope', '$http'];

return UserController;

});

//userMain.js,  module loader

requirejs.config({

paths: {

'angular': ['../lib/angularjs/angular'],

'angular-route': ['../lib/angularjs/angular-route'],

},

shim: {

'angular': {

exports : 'angular'

},

'angular-route': {

deps: ['angular'],

exports : 'angular'

}

}

});

require(['angular', './demouser/UserController'],

function(angular, UserController) {

var app = angular.module('app', []);

app.controller("UserController", UserController);

angular.bootstrap(document, ['app']);

});

//page

<html>

<body>

…………………………..

<script data-main=’userMain.js’ src=”lib/requirejs/require.js”></script>

</body>

</html>

Server Side optimization

  1. add sbt-rjs plugin to your plugins.sbt of your project

addSbtPlugin("com.typesafe.sbt" % "sbt-rjs" % "1.0.7")

2. configure sbt-rjs  in Build.scala

includeFilter in rjs := GlobFilter("*.js"),

RjsKeys.paths := Map(

　　　　"angular" -> ("../lib/angularjs/angular", "../lib/angularjs/angular")

),

RjsKeys.modules := Seq(

//WebJs.JS.Object("name" -> "angularDemoMain"),//do optimization for module

　　 WebJs.JS.Object("name" -> "userMain")

)

3.  add the plugin to the asset pipeline

pipelineStages := Seq(rjs)

4. generate the minified & combined js
              The RequireJS optimizer shouldn’t generally kick-in until it is time to perform a  
              deployment. i.e. by running start, state, dist tasks.

Play - js/css concatenation & minify的更多相关文章

  1. grunt 压缩js css html 合并等配置与操作详解

    module.exports = function(grunt){ //1.引入 grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTa ...

  2. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  3. JS&sol;CSS缓存杀手——VS插件

    背景 前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)!    一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...

  4. gulp实现打包js&sol;css&sol;img&sol;html文件，并对js&sol;css&sol;img文件加上版本号

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

  5. 配置springMVC之后&comma;引入js&comma;css等资源处理

    配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...

  6. springmvc js&sol;css路径问题

    ①No mapping found for HTTP request with URI[/msm2/css/login2.css] in DispatcherServlet with name 'sp ...

  7. iOS之在webView中引入本地html&comma;image&comma;js&comma;css文件的方法 - sky&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;&sol;ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  8. springMVC下jsp引用外部js&comma;css等静态资源的解决方法

    直入主题. 1. web.xml对springMVC配置如下: <servlet> <description>Spring MVC配置</description> ...

  9. 在Sublime Text 3 中安装SublimeLinter&comma;Node&period;js进行JS&amp&semi;CSS代码校验

    转载自:http://www.wiibil.com/website/sublimelinter-jshint-csslint.html 在Sublime Text中安装SublimeLinter,No ...

随机推荐

  1. 十六、Java基础---------集合框架之Set

    写在前面的话,这篇文章在昨天就写好了,今天打开的时候一不小心将第二天的文章粘贴到了这篇文章,很不幸的是除了标题之外依然面目全非,今天带着沉痛的心情再来写这篇文章! 上篇文章介绍了Collection体 ...

  2. Visual Studio 如何恢复默认设置

    我们在使用 Visual Studio 的时候,常常有一些窗口不见了又弄不回来的情况,如何恢复默认设置呢? 1.点击“开始-->程序-->Microsoft Visual Studio20 ...

  3. easyui 查询

    <fieldset> <legend>查询</legend> <table style="width: 100%;"> <tr ...

  4. MyBatis学习总结&lowbar;18&lowbar;MyBatis与Hibernate区别

    也用了这么久的Hibernate和MyBatis了,一直打算做一个总结,就他们之间的优缺点说说我自己的理解: 首先,Hibernate是一个ORM的持久层框架,它使用对象和我们的数据库建立关系,在Hi ...

  5. 织梦DeDeCms列表分页和内容页分页错位解决办法

    文章页分页代码在这里/include/arc.archives.class.php列表页分页/include/arc.listview.class.php 很多入门的站长会碰到这样的问题,织梦的通病, ...

  6. java笔记9之switch

    switch语句的注意事项:        A:case后面只能是常量,不能是变量,而且,多个case后面的值不能出现相同的        B:default可以省略吗?            可以省 ...

  7. 解开一个疑惑，为什么LVS开放的端口，使用netstat或ss命令，不能查找到其监听的端口呢？

    RT, 这个疑问,本周一直在心里,今天找到一个说法. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 另外LVS规则算是内核方法,用netstat -ntulp也显 ...

  8. DataGridView 多列排序功能

    System.Data.DataTable dt = new System.Data.DataTable(); private void FillDataGridView() { dt.Columns ...

  9. IdentityServer4-用EF配置Client（一）

    一.背景 IdentityServer4的介绍将不再叙述,百度下可以找到,且官网的快速入门例子也有翻译的版本.这里主要从Client应用场景方面介绍对IdentityServer4的应用. 首先简要介 ...

  10. android adt自带eclipse无法设置ndk路径

    android sdk官网下载r23版本的adt时自带的eclipse没有设置ndk路径的地方,通过Install New Software 发现无法更新,那么如何解决这个问题呢?     软件百度云 ...

相关文章