¿Cómo habilitar archivos minificados de JavaScript en las plantillas de Play 2.3.1?
playframework sbt (1)
Pude cargar el plugin sbt-uglify 1.0.3 en mi aplicación Play Framework 2.3.1. La carga de los javascripts no minificados es bastante sencilla, pero cargar las versiones minimizadas parece ser imposible.
En mi plantilla, uso etiquetas <script>
similares a esta:
<script src="@routes.Assets.at("javascripts/app.js")"></script>
En el modo dev, se carga la versión javascript no minificada, lo cual está bien. En el modo prod (usando activator start
) veo sbt-uglify generar las versiones minificadas a la carpeta target/web/uglify/build
, pero como no modifiqué la línea de etiqueta <script>
anterior en mis plantillas, la no minificada versiones de los archivos javascripts están cargados.
¿Hay alguna manera de hacer un mapeo solo-prod de tales rutas para cargar las versiones minimizadas?
La cuestión de que el Enrutador Inverso debería usar activos minificados en producción se arregló automáticamente en Play 2.3.1 que coincide exactamente con su requerimiento.
De acuerdo con Play 2.3.1 Changelog :
El comportamiento del enrutador inverso de Activos ha cambiado, si existen versiones minificadas de activos, ahora devuelve una URL para esos. Para deshabilitar este comportamiento, establezca
assets.checkForMinified=true
enapplication.conf
.
NOTA: debería leer set assets.checkForMinified=false
, pero de todos modos ...
Lo que sigue funciona solo en modo de producción, de modo que inicie la aplicación con el activator start
no run
o use las secuencias de comandos de inicio generadas (después de la stage
).
El comportamiento de usar versiones minificadas de activos en producción debe habilitarse de manera predeterminada en la versión de Play con @routes.Assets.versioned
(no routes.Assets.at
).
Requiere que la declaración de ruta apropiada en conf/routes
sea:
GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)
Lo que encontré un poco confuso al principio fue el orden de los elementos en pipelineStages
, así como el requisito de incluir sbt-rjs en él.
Y justo después de escribir la oración sobre el orden que encontré en la sección "RequireJS" en Play 2.3 Migration Guide :
El orden de las etapas es significativo. Primero quiere optimizar los archivos, producir resúmenes de los mismos y luego producir versiones gzip de todos los activos resultantes.
También encontré en Play 2.3 Migration Guide en la sección "Closure Compiler":
UglifyJS 2 se proporciona actualmente a través del complemento RequireJS (que se describe a continuación). La intención en el futuro es proporcionar un complemento UglifyJS 2 independiente también para situaciones donde RequireJS no se utiliza.
Todo comenzó con la respuesta a la obstrucción de JavaScript de Play 2.3 sbt-web .
Por lo tanto, el siguiente pipelineStages
es el que funciona: rjs
cuenta el orden y los rjs
:
pipelineStages := Seq(rjs, uglify, digest, gzip)
project/plugins.sbt
usado fue el siguiente:
resolvers += "Typesafe repository" at "http://repo.typesafe.com/typesafe/releases/"
addSbtPlugin("com.typesafe.play" % "sbt-plugin" % "2.3.5")
addSbtPlugin("com.typesafe.sbt" % "sbt-digest" % "1.0.0")
addSbtPlugin("com.typesafe.sbt" % "sbt-uglify" % "1.0.3")
addSbtPlugin("com.typesafe.sbt" % "sbt-gzip" % "1.0.0")
addSbtPlugin("com.typesafe.sbt" % "sbt-rjs" % "1.0.6")
No olvides crear una app/assets/javascripts/main.js
para dejar que sbt-rjs
haga su trabajo.
Como prueba, creé una aplicación Play con el activator new playApp play-scala
y apliqué los cambios anteriores tanto en la compilación como en la app/views/main.scala.html
que finalmente se veía de la siguiente manera (note @routes.Assets.versioned
)
@(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>@title</title>
<link rel="stylesheet" media="screen" href="@routes.Assets.versioned("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="@routes.Assets.versioned("images/favicon.png")">
<script src="@routes.Assets.versioned("javascripts/hello.js")" type="text/javascript"></script>
</head>
<body>
@content
</body>
</html>
Ejecutar activator start
y llamar a curl http://localhost:9000
da (formato de mina por el bien de la legibilidad):
➜ play-uglify curl http://localhost:9000
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Play</title>
<link rel="stylesheet" media="screen" href="/assets/stylesheets/d41d8cd98f00b204e9800998ecf8427e-main.css">
<link rel="shortcut icon" type="image/png" href="/assets/images/84a01dc6c53f0d2a58a2f7ff9e17a294-favicon.png">
<script src="/assets/javascripts/4302136334616ae0605d47a1932ee262-hello.min.js" type="text/javascript"></script>
</head>
<body>
<h1>Your new application is ready.</h1>
</body>
</html>
Note 4302136334616ae0605d47a1932ee262-hello.min.js
y los recursos que no son de JavaScript digeridos.