1. Zuhause
  2. Frage und Antwort
  3. Wie aktivieren Sie reduzierte JavaScript-Dateien in Play 2.3.1-Vorlagen?

Wie aktivieren Sie reduzierte JavaScript-Dateien in Play 2.3.1-Vorlagen?

2014-07-04 11 views
14

Ich konnte das Plugin sbt-uglify 1.0.3 in meiner Play Framework 2.3.1 App laden. Das Laden der nichtminimierten Javascripts ist ziemlich einfach, aber das Laden der verkleinerten Versionen scheint unmöglich zu sein.Wie aktivieren Sie reduzierte JavaScript-Dateien in Play 2.3.1-Vorlagen?

In meiner Vorlage I <script> Tags ähnlich wie diese verwendet:

<script src="@routes.Assets.at("javascripts/app.js")"></script>

In dev-Modus, der nicht-minimierte JavaScript-Version geladen wird, das ist in Ordnung. Im Prod-Modus (unter Verwendung von activator start) sehe ich sbt-uglify, das die verkleinerten Versionen in den Ordner target/web/uglify/build generiert, aber weil ich die obige <script> Tag-Zeile in meinen Vorlagen nicht ändere, werden die nichtminimierten Versionen der Javascripts-Dateien geladen.

Gibt es eine Möglichkeit, eine Nur-Prod-Mapping solcher Routen zu erstellen, um die verkleinerten Versionen zu laden?

Quelle

2014-07-04 nyuwec

Antwort

20

Das Problem wurde in Play 2.3.1 behoben, die exakt Ihren Anforderungen entspricht.

Nach Play 2.3.1 Changelog:

Das Verhalten der Assets Reverse-Router hat sich verändert, wenn Versionen von Vermögenswerten minimierte existieren, es gibt jetzt eine URL für diejenigen statt. Um dieses Verhalten zu deaktivieren, setzen Sie assets.checkForMinified=true in application.conf.

HINWEIS Es eher gesetzt assets.checkForMinified=false, aber trotzdem ...

Was Werke in Produktionsmodus folgt nur so starten Sie die Anwendung mit activator start nicht run oder verwenden Sie die generierten Skripte starten lesen sollte (nach stage).

Das Verhalten in Produktion minimierten Versionen von Vermögenswerten mit sollte standardmäßig in der Version des Spiels mit @routes.Assets.versioned (nicht routes.Assets.at) aktiviert werden.

Es erfordert, dass die entsprechende Route Erklärung in conf/routes ist:

GET /assets/*file controllers.Assets.versioned(path="/public", file: Asset)

Was ich ein wenig unklar gefunden zunächst die Reihenfolge, in ihm von Elementen in pipelineStages sowie die Forderung enthält sbt-rjs war .

Und nachdem ich den Satz über die Reihenfolge geschrieben hatte ich in dem Abschnitt „RequireJS“ in Play 2.3 Migration Guide gefunden:

Die Reihenfolge der Stufen ist signifikant. Sie wollen zuerst die Dateien optimieren, Digests von ihnen erstellen und dann Gzip-Versionen aller resultierenden Assets produzieren.

ich auch in Play 2.3 Migration Guide im Abschnitt "Closure Compiler" gefunden habe:

UglifyJS 2 derzeit über das RequireJS Plugin zur Verfügung gestellt wird (beschrieben next). Die Absicht ist in Zukunft, ein eigenständiges UglifyJS 2 Plugin auch für Situationen zur Verfügung zu stellen, in denen RequireJS nicht verwendet wird.

Alles begann mit der Antwort auf Play 2.3 sbt-web plugin Javascript minification.

Also, die unter pipelineStages ist die Arbeit ein - beachten Sie die Reihenfolge und rjs:

pipelineStages := Seq(rjs, uglify, digest, gzip)

project/plugins.sbt verwendet wurde, war wie folgt:

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")

Vergessen Sie nicht, eine leere app/assets/javascripts/main.js-Datei zu erstellen lassen Sie sbt-rjs seine Arbeit machen.

Als Test habe ich eine Play-Anwendung mit activator new playApp play-scala und angewandt, um die oben genannten Änderungen in der Build sowie in app/views/main.scala.html, die letztlich folgt aussah, als (Anmerkung @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>

activator start Ausführen und Aufruf curl http://localhost:9000 gibt (meine aus Gründen der Lesbarkeit der Formatierung):

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

Hinweis 4302136334616ae0605d47a1932ee262-hello.min.js und die nicht-JavaScript-Ressourcen verdaut .

Quelle

2014-07-08 00:55:12

+0

Ich versuche auch, uglify zu verwenden. Ich weiß jedoch nicht, wie ich mit Play anfangen soll. Wenn Sie ein Beispiel haben, können Sie bitte teilen? – JMC

+2

Ich habe uglify, digest, gzip zu Project + pipelineStages hinzugefügt wie beschrieben. Ich habe auch die '@ routes.Assets.at' -> '@ routes.Assets.versioned' in Ansichten geändert. Das Starten meiner App mit 'activator start' erzeugt die minimierten Javascripts, aber der Browser lädt immer noch die ursprünglichen, nicht-minifizierten Versionen. – nyuwec

+0

Hallo @Jacek ich folge allen oben genannten Schritten. Aber wenn "Aktivator Start" Befehl ausgeführt wird, bekomme ich folgenden Fehler. '[info] Fertig Verpackung. java.util.regex.PatternSyntaxException: Unmatched Closing ')' in der Nähe von Index 47 ['"]? ([^ \ S'"] *) ['"]? \ S *: \ s * [\ []? . * ['"]. */lib \ (. *) ['"] ' –

 Verwandte Themen

  • Keine verwandten Themen^_^