Play - js/css concatenation & minify

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>

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

</body>

</html>

Server Side optimization

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.