# 29: Przygotowanie produkcji - CSS-Tricks

W tym screencastie przeniesiemy go z powrotem do normalnego edytora tekstu, tak jak zaczęliśmy. W sytuacji „prawdziwego świata” te rzeczy są prawdziwe:

Chcesz podzielić swój JavaScript na tyle małych plików, na ile ma to dla Ciebie sens. Tak jak podzieliliśmy kod JavaScript na małe, zrozumiałe funkcje, tak samo możemy zrobić z plikami. Pamiętaj var Movies = ( );Ten obiekt prawdopodobnie byłby własnym plikiem.
Te mniejsze pliki powinny być połączone (połączone razem w jeden plik) i skompresowane (przepuszczone przez system minifikacji, aby usunąć białe znaki, a nawet przepisać zmienne, aby zmniejszyć ostateczny rozmiar pliku).

Zadania konkatenacji i kompresji są tak powszechne, że bez względu na to, jaki jest twój przepływ pracy, prawdopodobnie istnieje narzędzie, które będzie pasować do pomocy.

CodeKit to oprogramowanie dla komputerów Mac, które może w tym pomóc.

Masz CodeKit obserwuj cały folder projektu. Znajdzie w nim pliki JavaScript (pliki kończące się na .js lub nawet .coffee, jeśli wolisz pisać w CoffeeScript). Na karcie Skrypty wyświetli je wszystkie. Możesz kliknąć jeden z nich, a następnie wybrać opcje, co zrobić, gdy plik zostanie zmieniony i zapisany (w dowolnym edytorze tekstu).

Na powyższym zrzucie ekranu widać na samym CSS-Tricks. Mam global.jsplik, który importuje wiele innych plików (zależności). Kiedy ten plik jest zmieniany / zapisywany, jest sprawdzany za pomocą wskazówki JS, zależności są dołączane lub poprzedzane zgodnie z ustaleniami, a następnie ostateczny plik jest tworzony ( global-ck.js) i zminimalizowany. Całkiem fajne!

Możesz zarządzać tymi zależnościami bezpośrednio w interfejsie CodeKit UI, ale prawdopodobnie najlepiej jest to zrobić za pomocą komentarzy do kodu bezpośrednio w samym pliku JS:

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

Następnie możesz połączyć -ck.jswersję JavaScript w HTML.

Co jeśli nie masz komputera Mac? Możesz znaleźć alternatywy w Google. Podłączyłbym kilka tutaj, ale ten świat ciągle się zmienia. Wiem na pewno, że są takie, które zasadniczo kopiują wygląd i funkcjonalność CodeKit, ale działają na różnych przeglądarkach i są open source.

Powiedzmy, że Twój projekt to Ruby on Rails. Railsy oferują Asset Pipeline, który również wykonuje te zadania za Ciebie.

Podobnie jak CodeKit ma specjalnie sformatowane komentarze, aby poinformować go, jakie są zależności, tak samo działa Asset Pipeline:

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

Następnie łączysz ten plik JavaScript z szablonami, takimi jak:

Myślę, że to całkiem niezły system. Z kilku powodów. Jednym z nich jest to, że w trakcie opracowywania pliki pozostaną oddzielne, co jest przydatne do debugowania w narzędziach DevTools. Innym jest to, że po wdrożeniu pliki będą miały w nazwach pliki ciągi do niszczenia pamięci podręcznej, co jest ważnym krokiem, jeśli obsługujesz odległe nagłówki, które wygasają dla dobrego buforowania.

Nie są to oczywiście jedyne dwie opcje. Prawdopodobnie istnieją niezliczone sposoby, aby to zrobić. Inną bardzo popularną obecnie techniką jest Grunt.

Do wykonania tych „zadań” można użyć grunt-contrib-concat i grunt-contrib-uglify.

Oto przykładowy plik Gruntfile.js, który pobierze folder pełen zależności bibliotecznych i plik global.js, a następnie połączy je i zminimalizuje do pliku production.min.js:

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

Następnie wystarczy wpisać „grunt” w wierszu poleceń z folderu projektu, aby to zrobić. Grunt może stać się jednak o wiele bardziej wymyślny, jak można się domyślić. Który będzie musiał być inny dzień!

Przygotowałem przykładowy projekt (dla tych z Was, którzy mają dostęp do pobierania), abyście mogli przeglądać, aby zobaczyć, jak działa ta rzecz Grunt. Wymagania wstępne: