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
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
-
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.
