Grunt.js


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

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

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij