#29: Produktionsreif machen

Wir werden in diesem Screencast zurück zu einem normalen Texteditor wechseln, so wie wir angefangen haben. In einer "realen" Situation sind diese Dinge wahr:

1. Sie möchten Ihren JavaScript-Code in so viele kleine Dateien aufteilen, wie es für Sie sinnvoll ist. So wie wir den JavaScript-Code in kleine, verständliche Funktionen aufgeteilt haben, können wir das Gleiche mit Dateien tun. Erinnern Sie sich an `var Movies = { };`? Dieses Objekt wäre wahrscheinlich seine eigene Datei.
2. Diese kleineren Dateien sollten verkettet (zu einer Datei zusammengefügt) und komprimiert (durch ein Minifizierungssystem laufen lassen, um Leerzeichen zu entfernen und sogar Variablen umzuschreiben, um die endgültige Dateigröße zu reduzieren).

Die Aufgaben des Verkettens und Komprimierens sind so verbreitet, dass es wahrscheinlich ein Werkzeug gibt, das in Ihren Workflow passt, egal wie dieser aussieht.

CodeKit ist eine Mac-Software, die dabei helfen kann.

Sie lassen CodeKit Ihren gesamten Projektordner überwachen. Es findet JavaScript-Dateien darin (Dateien, die auf .js enden, oder sogar .coffee, wenn Sie lieber in CoffeeScript schreiben). Unter der Registerkarte "Scripts" listet es sie alle auf. Sie können auf eine davon klicken und dann Optionen auswählen, was passieren soll, wenn diese Datei geändert und gespeichert wird (von jedem Texteditor).

Im obigen Screenshot sehen Sie, dass ich auf CSS-Tricks selbst eine Datei namens global.js habe, die eine Reihe anderer Dateien (Abhängigkeiten) importiert. Wenn diese Datei geändert/gespeichert wird, wird sie über JS Hint geprüft, dann werden die Abhängigkeiten wie angegeben angehängt oder vorangestellt, dann wird die endgültige Datei erstellt (global-ck.js) und minifiziert. Ziemlich cool!

Sie können diese Abhängigkeiten direkt über die CodeKit-Benutzeroberfläche verwalten, aber es ist wahrscheinlich am besten, dies über Code-Kommentare direkt in der JS-Datei selbst zu tun.

// put BEFORE the rest of the code in this file
// @codekit-prepend "jquery.markitup.js"

// put AFTER the rest of the code in this file
// @codekit-append "prism.js"

Sie würden dann die `-ck.js`-Version des JavaScripts im HTML verknüpfen.

Was, wenn Sie nicht auf einem Mac sind? Sie können im Internet nach Alternativen suchen. Ich würde hier einige verlinken, aber diese Welt verändert sich ständig. Ich weiß sicher, dass es einige gibt, die im Wesentlichen das Aussehen und die Funktionalität von CodeKit kopieren, aber browserübergreifend funktionieren und Open Source sind.

---

Nehmen wir an, Ihr Projekt ist Ruby on Rails. Rails hat die Asset Pipeline, die diese Aufgaben ebenfalls für Sie erledigt.

Genau wie CodeKit speziell formatierte Kommentare hat, um ihm mitzuteilen, was die Abhängigkeiten sind, tut dies die Asset Pipeline auch.

//= require libs/jquery.js
//= require common/love.js

var MyObject = {
 // yadda yadaa
}

Sie verknüpfen dann diese JavaScript-Datei aus Ihren Vorlagen wie folgt:

<%= javascript_include_tag "admin/admin.js" %>

Ich finde das ein ziemlich nettes System. Aus mehreren Gründen. Einer ist, dass die Dateien in der Entwicklung getrennt bleiben, was für das Debugging in den DevTools schön ist. Ein anderer ist, dass die Dateien nach der Bereitstellung Cache-Busting-Strings in den Dateinamen haben, was ein wichtiger Schritt ist, wenn Sie weit entfernte Expires-Header für gutes Caching verwenden.

<script src="//assets.yoursite.com/assets/common/everypage-f2a6e496508e79e40a7f0ac730e91270.js" type="text/javascript"></script>

---

Dies sind natürlich nicht die einzigen beiden Optionen. Es gibt wahrscheinlich unzählige Möglichkeiten, dies zu tun. Eine weitere sehr beliebte Technik heutzutage ist Grunt.

Sie könnten grunt-contrib-concat und grunt-contrib-uglify verwenden, um diese "Aufgaben" auszuführen.

Hier ist eine Beispiel-Gruntfile.js, die einen Ordner voller Bibliotheksabhängigkeiten und eine global.js-Datei nimmt und sie zu einer production.min.js-Datei verkettet und minifiziert.

module.exports = function(grunt) {

  grunt.initConfig({

    concat: {
      dist: {
        src: [
          'js/libs/*.js',
          'js/global.js'
        ],
        dest: 'js/build/production.js',
      }
    },

    uglify: {
      build: {
        src: 'js/build/production.js',
        dest: 'js/build/production.min.js'
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.registerTask('default', ['concat', 'uglify']);

};

Dann genügt es, "grunt" über die Kommandozeile von Ihrem Projektordner aus einzugeben, um dies zu tun. Grunt kann jedoch, wie Sie vielleicht vermuten, noch viel ausgefeilter sein. Das muss ein anderes Mal behandelt werden!

Ich habe ein Beispielprojekt zusammengestellt (für diejenigen unter Ihnen mit Download-Zugang), das Sie sich ansehen können, um zu sehen, wie dieses Grunt-Ding funktioniert. Die Voraussetzungen

• Haben Sie Node installiert
• Haben Sie Grunt-CLI installiert
• Führen Sie npm install im Terminal in diesem Verzeichnis aus

Dann können Sie den Befehl grunt ausführen und sehen, wie er funktioniert.