# 29: Produktion fertig machen - CSS-Tricks

Wir werden es in diesem Screencast wieder zu einem normalen Texteditor bringen, genau wie wir angefangen haben. In einer "realen Welt" sind diese Dinge wahr:

Sie möchten Ihr JavaScript in so viele kleine Dateien aufteilen, wie es für Sie sinnvoll ist. Genau wie wir den JavaScript-Code in kleine verständliche Funktionen aufgeteilt haben, können wir dasselbe mit Dateien tun. Denken Sie daran, var Movies = ( );Dieses Objekt wäre wahrscheinlich eine eigene Datei.
Diese kleineren Dateien sollten verkettet (zu einer Datei zusammengefasst) und komprimiert (durch ein Minimierungssystem geführt werden, um Leerzeichen zu entfernen und sogar Variablen neu zu schreiben und so die endgültige Dateigröße zu verringern).

Die Aufgaben der Verkettung und Komprimierung sind so häufig, dass unabhängig von Ihrem Workflow wahrscheinlich ein Tool vorhanden ist, das Ihnen dabei hilft.

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

Sie lassen CodeKit Ihren gesamten Projektordner überwachen. Darin finden sich JavaScript-Dateien (Dateien, die mit .js enden, oder sogar .coffee, wenn Sie lieber in CoffeeScript schreiben). Auf der Registerkarte Skripte werden alle aufgelistet. Sie können auf eine davon klicken und dann Optionen auswählen, was zu tun ist, wenn diese Datei geändert und gespeichert wird (von einem beliebigen Texteditor).

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

Sie können diese Abhängigkeiten direkt über die CodeKit-Benutzeroberfläche verwalten, aber es ist wahrscheinlich am besten, dies über Codekommentare 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.jsVersion des JavaScript im HTML verknüpfen .

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

Angenommen, Ihr Projekt ist Ruby on Rails. Rails verfügt über die Asset-Pipeline, die diese Aufgaben auch für Sie erledigt.

Genau wie CodeKit speziell formatierte Kommentare hat, um die Abhängigkeiten zu ermitteln, tut dies auch die Asset-Pipeline:

//= require libs/jquery.js //= require common/love.js var MyObject = ( // yadda yadaa )

Anschließend verknüpfen Sie diese JavaScript-Datei aus Ihren Vorlagen wie folgt:

Es ist ein ziemlich schönes System, denke ich. Aus einigen Gründen. Zum einen bleiben die Dateien in der Entwicklung getrennt, was sich gut zum Debuggen in den DevTools eignet. Ein weiterer Grund ist, dass die Dateien nach der Bereitstellung Cache-Busting-Zeichenfolgen in den Dateinamen enthalten. Dies ist ein wichtiger Schritt, wenn Sie weit entfernte abgelaufene Header für ein gutes Caching bereitstellen.

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

Sie können grunt-contrib-concat und grunt-contrib-uglify verwenden, um diese „Aufgaben“ auszuführen.

Hier ist ein Beispiel für Gruntfile.js, das einen Ordner voller Bibliotheksabhängigkeiten und eine global.js-Datei nimmt und sie zu einer Datei "product.min.js" zusammenfasst und minimiert:

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')); );

Wenn Sie dann einfach "grunzen" über die Befehlszeile in Ihrem Projektordner eingeben, wird dies für Sie erledigt. Grunzen kann allerdings viel ausgefallener werden, wie Sie vielleicht vermuten. Welches muss ein anderer Tag sein!

Ich habe ein Beispielprojekt zusammengestellt (für diejenigen unter Ihnen mit Download-Zugriff), damit Sie sich ansehen können, wie dieses Grunt-Ding funktioniert. Die Voraussetzungen: