Play - js/css concatenation & minify-优快云博客

本文介绍了如何在项目中配置并使用LESS CSS预处理器及RequireJS模块加载器，实现CSS样式文件的自动化编译与JavaScript模块化管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.

转载于:https://www.cnblogs.com/jmbkeyes/p/4551141.html