Grunt

Grunt – task runner

taski opisane JS

 

Instalacja

potrzebny Node.js z dodaniem do PATH ścieżki instalacyjnej do Node,js aby korzystać w konsoli z poleceń npm

 

npm install -g grunt-cli – używanie poleceń grunta w konsoli Grunt CLI (command line interface) – bez tego po wpisaniu grunt w konsoli otrzymamy error „Command Not Found”

npm install -g grunt

npm install grunt –save-dev

 

  • package.js – utworzenie za pomocą npm init – opis projektu, lista wykorzystywanych modułów Node – instalacja modułów – npm install, packages.js wskazuje dla npm co nalezy zainstalować

 

 

 

kroki

  1. instalacja Node.js
  2. instalacja npm
  3. consola – > npm install -g grunt-cli
  4. stworzenie pliku packages.js przez consola -> npm init i podanie parametrów projektu
  5. w consoli -> npm install grunt –save-dev – instaluje katalog node_modules w katalogu projektu i dodaje informacje w packages.js: 
      "devDependencies": {
    "grunt": "^1.0.1"
  }
  6. dodanie kolejnych elementów: npm install grunt-contrib-cssmin –save-dev
  7. tworzenie pliku konfiguracji grunt – Gruntfile.js zawsze umieszczony w katalogu root projektu wraz z plikiem packages,json

 

 

3 główne sekcje:

  • grunt.initConfig – opis settingsów tasków
  • grunt.loadNpmTask – ładuje te taski
  • grunt.registerTask – rejestruje taski by można było wywołać je komendą, to co jest wprowadzone jak default odpalane jest przy komendzie grunt

 

pobranie tasków gunt ->  gruntjs.com/plugins

kiedy usuniemy cały katalog node_modules ale zachowamy plik packages.js to uruchamiając komendę npm install pobieramy wszytskie zasoby

 

pobiera potrzebne moduły i ich zależności w katalogu node_modules

  • Gruntfile.js – skrypty tasków

 

budowa Gruntfile.js:


module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        taskName: {          //nazwa zadania
            options: {       //opcje

            },
            operations: {    //operacje

            }
        }
    });

    grunt.loadNpmTasks('grunt-module');                  // w taki sposób ładujemy nasze moduły
    grunt.registerTask('default', ['taskName']);         // określany jakie zadania wykonują się po wpisaniu w konsoli grunt
};

generowanie plików poprzez grunt init (po instalacji szablonów)

 

 

Grunt i Grunt plugins – instalowane i zarządzane za pomocą npm (Node.js package menager)

 

aktualizacja npm: npm update -g npm (z sudo lub bez)

 

Instalacja modułów

Lista modułów

komenda: npm instal modul-name –save-dev

–save-dev – dodanie modułu do pliku package.js w sekcji devDependencies

–save – dodanie modułu do pliku package.js w sekcji dependencies

 

 

instalujemy lokalnie grunt – npm install grunt –save-dev – pojawia się w pliku package.js

 

Elementy Gruntfile:

  • wrapper function
  • konfiguracja projektu i zadania
  • ładowanie pluginów Grunt i zadań(tasków)
  • custom tasks

Additional Resources

 

grunt wordpress:

  • https://www.npmjs.com/package/grunt-wordpress
  • https://www.npmjs.com/package/grunt-wordpress-deploy
  • https://code.tutsplus.com/tutorials/using-grunt-with-wordpress-development–cms-21743
  • https://www.wpessentials.io/2015/09/grunt-automation-for-wordpress-developers/
  • https://premium.wpmudev.org/blog/grunt-for-wordpress/
  • https://archetyped.com/know/grunt-for-wordpress-plugins/
  • https://mattbanks.me/grunt-wordpress-development-deployments/

gulp:

npm run gulpwatch instead of gulp watch
npm run gulpstyles instead of gulp styles
npm run gulpscripts instead of gulp scripts

#tools