Minifikacja plików JS i CSS – Grunt

Wiele osób, mając własną witrynę, zastanawia się czasem, jak by tu ją przyspieszyć. Coraz popularniejsze są narzędzia Google, tj. usługa PageSpeed Insights, która pozwala na przetestowanie danej witryny pod względem optymalizacyjnym, a co za tym idzie pod względem szybkości działania. Postaram się po krótce przedstawić narzędzie, które pozwoli zautomatyzować minifikację plików css i js.

Co to jest minifikacja?

Minifikacja, czy to plików css czy JavaScript (innych również), jest to proces kasowania zbędnych znaków (typu spacje czy puste linie) z zachowaniem poprawności i działania kodu. Ponadto, przed minifikacją plików zalecane jest złączenie wszystkich plików danego typu w jeden, a dopiero wtedy rozpocząć minifikację plików. Dodatkowo proces minifikacji zamienia wszelkie nazwy zmiennych na literki alfabetu tak, aby jeszcze bardziej ograniczyć wielkość ciągu. Przejdźmy zatem do omówienia narzędzia do złączeń i minifikacji plików.

Grunt – system do automatyzacji zadań

Grunt został stworzony do wykonywania określonych zadań na określonym zbiorze plików. Przykładowym zadaniem, które możemy wykonać za pomocą Grunt’a jest minifikacja plików.

Naturalnie, aby skorzystać z tego narzędzia należy je zainstalować. Naturalnie konsolowo 🙂

npm install -g grunt-cli
npm install -g grunt

Oczywiście zakładam, że Node.js już posiadamy. Powyższa (pierwsza) komenda zainstaluje nam globalnie (flaga -g) klienta, dzięki któremu uzyskamy dostęp do taskera Grunt’a. Kolejną ważną komendą (druga) jest instalacja samego Grunt’a (preferuję instalacją globalną). To jednak nie koniec przygotowywania działającego narzędzia. Należy jeszcze stworzyć plik Gruntfile.js oraz package.json. Co te pliki oznaczają – odsyłam do dokumentacji. Tutaj skupię się na już działaniu.

Do mojego przykładu minifikacji plików js i css wykorzystam następujący plik Gruntfile.js:

module.exports = function(grunt) {
    grunt.initConfig({
        concat: {
            js: {
                src: [
                    'js/jquery.js',
                    'js/bootstrap.js',
                    // analogicznie inne pliki js
                ],
                dest: 'dest/js/concat.js'
            },
            css: {
                src: [
                    'css/bootstrap.css',
                    'css/font-awesome.css',
                    // analogicznie inne pliki css
                ],
                dest: 'dest/css/concat.css'
            }
        },
        cssmin: {
            css:{
                src: 'dest/css/concat.css',
                dest: 'dest/css/styles.min.css'
            }
        },
        uglify: {
            js: {
                src: 'dest/js/concat.js',
                dest: 'dest/js/scripts.min.js'
            }
        }
    });

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

    grunt.registerTask('default', [
        'concat:js',
        'concat:css',
        'cssmin:css',
        'uglify:js'
    ]);

};

Przed wywołaniem w konsoli komendy grunt, należy upewnić się, iż mamy pobrane i zainstalowane odpowiednie moduły, czyli:

npm install grunt-css -g
npm install grunt-contrib-uglify -g
npm install grunt-contrib-concat -g

W pliku Gruntfile.js inicjowana jest konfiguracja poszczególnych zadań, czyli:

• concat js – informacje, które pliki js mają być złączone oraz ścieżka docelowa pliku złączonego
• concat css – informacje, które pliki css mają być złączone oraz ścieżka docelowa pliku złączonego
• cssmin – deklaracja ścieżek źródłowej i docelowej do minifikacji css,
• ugify – deklaracja ścieżek źródłowej i docelowej do minifikacji js,
• ładowanie modułów potrzebnych do wykonania złączeń i minifikacji,
• wykonanie określonych zadań

Jak widać konstrukcja nie jest trudna i jest całkiem logiczna. Zatem, gdy już mamy stworzone pliki potrzebne do wykonania naszych testowych zadań, należy wywołać w konsoli komendę grunt. Poprawne wykonanie całej operacji zostanie podsumowane zielonym komunikatem „Done, without errors.” Teraz możemy zerknąć do katalogu dest, i zaimplementować utworzone pliki do strony internetowej.

Podsumowanie

Jak widać na powyższym przykładzie, minifikacja plików js i css nie jest wybitnie trudna. Pozwala ona na zmniejszenie liczby odwołań do serwera, co przełoży się na szybkość działania witryny. Jeśli coś jest nie jasne, piszcie w komentarzach, postaram się wyjaśnić.