Grunt.js

W tym artykule skupiłem się na automatyzatorze zadań Grunt.js. Należy jednak mieć świadomość, że na rynku, są już dostępne również inne narzędzia. Narzędzia do automatyzacji zadań Grunt i Gulp coraz częściej, są zastępowane przez Webpack. Webpack nie tylko zastępuje je jako automatyzator zadań, ale również stanowi loader modułów dla tworzonego projektu. Z Webpackiej jest trochę trudniej zacząć, Grunt.js jest łatwiejszym narzędziem do szybkiego startu dla osób, które wcześniej nie korzystały z automatyzatorów.

Node

W celu rozpoczęcia pracy z Grunt.js musimy posiadać zainstalowany pakiet node.js. Node w pracy na front-endzie towarzyszy nam nieustannie dlatego jeżeli go jeszcze nie posiadasz wejdź na stronę https://nodejs.org/en/ i wybierz Download jako: LTS (Long-term Support) Recommended For Most Users.

Instalacja

Mając już zainstalowanego node skorzystamy z pakietu npm i zainstalujemy globalnie GRUNT-CLI wpisując w konsoli:

npm install -g grunt-cli

Teraz wystarczy już tylko posiadać katalog z własnym projektem i stworzyć w nim nowy projekt, wpisując w jego wnętrzu komendy:

npm init
npm install grunt --save-dev

Poprawność instalacji można sprawdzić wpisując w konsoli komendę

grunt --help

W pliku package.json na początek powinniśmy mieć wskazanego Granta w najnowszej wersji:

"devDependencies": {
    "grunt": "^1.0.1"
}

Kolejne rzeczy zaczną się tam pojawiać, gdy zaczniemy dodawać pluginy.

Gruntfile.js

To już koniec przygotowań teraz należy stworzyć plik: Gruntfile.js. To w nim musimy wykonać całą konfigurację, która następnie żmudną pracę wykona za nas. Zaczynamy od

module.exports = function(grunt) {
grunt.initConfig({
   //deklaracje wymagane przez pluginy
        });
grunt.loadNpmTasks(''); 
grunt.registerTask('default', ['']);
};

W grunt.initConfig deklarujemy kolejne pluginy, z których będziemy korzystać. Konfiguracja pluginów oraz możliwość wyszukania konkretnego udostępniona jest na stronie: http://gruntjs.com/plugins
W grunt.loadNpmTasks(''); kolejne pluginy dodajemy w kolejnych linijkach.
W grunt.registerTask('default', ['']); konfigurujemy kolejność uruchamiania pluginów. Wpisywane, są one kolejno w tablicy np: grunt.registerTask('build', ['jshint', 'uglify']);

Przydatne pluginy

Na wspominanej już stronie http://gruntjs.com/plugins znajdują się pluginy, z których możemy korzystać. Jeżeli ich nazwa zaczyna się od contrib- oraz ma ikonę gwiazdki oznacza to, że dany plugin został stworzony przez ekipę Grunt. Po kliknięciu danego pluginu pojawia się szczegółowy opis jego instalacji w npm, deklaracji w pliku Gruntfile.js oraz uruchomieniowych parametrów.

Dodatkowe pakiety instaluje się komendą, zgodną z opisem dla danego pakietu, np:

npm install grunt-contrib-jshint --save-dev
grunt-autoprefixer – Dodawanie prefixów do CSS
grunt-contrib-jshint – Sprawdzenie poprawności plików JS
grunt-contrib-uglify – minimalizacja plików poprzez usunięcie spacji
grunt-contrib-cssmin – minimalizacja plików CSS i łączenie kilku w jeden
grunt-contrib-watch – nasłuchiwanie zmian w trakcie pracy, bez konieczności odświeżania
grunt-contrib-less – kompilacja plików LESS na CSS
grunt-contrib-sass – kompilacja plików SASS na CSS

Cały plik Gruntfile.js z pluginami

module.exports = function(grunt) {
  grunt.initConfig({
  		jshint: {
  			dev: {
  				src: ["script.js"]
  			}
  		},
  		autoprefixer: {
  			dev: {
   			  src: ["*.css"]
     		        }
  		},
  		uglify: {
                    my_target: {
                    files: {
                        'output.min.js': ['script.js']
                         }
                     }
                },
		watch: {
		  scripts: {
		    files: ['script.js'],
		    tasks: ['jshint'],
		    options: {
		      spawn: false,
		    },
		  },
		}
  	  });
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ['jshint', 'autoprefixer', 'watch']);
  grunt.registerTask('build', ['jshint', 'autoprefixer', 'uglify']);
};
Grunt.js
Uruchamiamy jednym z poleceń:
grunt (uruchomione zostaną pluginy zadeklarowane jako 'default'
grunt build (polecenia uruchamiające zależą od wpisanej pozycji grunt.registerTask('')