szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:nodejs|< NodeJS]]

====== Grunt ======

  * **Szerző:** Sallai András
  * Copyright (c) Sallai András, 2021
  * [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== A grunt =====

A GRUNT egy JavaScript feladat futtató. 
Lehetővé teszi a feladatok automatikus
végrehajtását, úgy mint, minifikáció, 
fordítás, tesztelés, ellenőrzés, stb. 


Weblapja:
  * https://gruntjs.com/


===== Telepítés =====

A Grunt és kiegészítőit Node.js, npm csomagkezelőjével kezelhetjük. 

A Grunt 0.4.x-nek szüksége van minimum 0.8.0 Node.js-re. 
Kezdés előtt frissítsd az npm-t, rendszergazdaként:
  npm update -g npm


Telepítés:
  npm install -g grunt-cli

Telepítés után kapunk egy grunt parancsot, ami útvonalban lesz. 

A grunt-cli telepítse nem telepíti a Grunt feladat futtatót. 

===== Bővítmények =====

  * grunt-jsfmt - A formázás, keresés, újraírás.
  * grunt-contrib-cssmin - CSS minimalizálás.
  * nodemon - Újraindítja a node servert, ha egy állomány változott.
  * grunt-contrib-concat - Péládul JavaScript fájlok összefűzése.
  * grunt-contrib-watch - Fájlok változására, feladatok indítása.

Az összes bővítmény:
  * https://gruntjs.com/plugins
===== Kezdés =====

Két állományra van szükségünk:
  * package.json - npm modulokról adatok
  * Gruntfile.js - Grunt feladatok

Ezeket több módon is létrehozhatjuk. 
  * [[https://gruntjs.com/project-scaffolding|grunt-init]] futtatása
  * npm init parancs létrehozza
  * Kézzel készítünk egyet a következő sablon alapján:


<code json>
{
  "name": "projekt-neve",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  }
}
</code>



A registerTask() függvénnyel saját, egyedi feladatokat készíthetünk:

  grunt.registerTask('css', ['sass', 'cssmin']);

A példánkban a css feladat hatására két feladat hajtódik végre, a sass és a cssmin.



===== Grunt konfigurálás =====

A következő teendőink vannak:

  * csomagoló függvény elkészítése
  * projekt és feladat konfiguráció
  * Grunt bővítmények és feladatok betöltése
  * feladatok és álnevek finomítása


A grunt globális objektummal létrehozzuk a csomagolófüggvényt:

<code javascript>
module.exports = function(grunt) {
    
};
</code>


A fenti függvényen belül létrehozom konfigurációim és
feladataim.

<code javascript>
grunt.initConfig({
    task: { }
});

grunt.registerTask(feladatnev, [ opcionális leírás, ], feladatfüggvény );

grunt.loadNpmTasks('bővítmény');
</code>



===== Minifikálás =====

Adott egy projekt könyvtáron belül egy src könyvtár, amelyben 
elkészítjük a HTML, CSS és JavaScript állományokat. 
Elsőként a CSS fájlokat szeretnénk minifikálni, majd
a minifikált fájlokat a dist könyvtáron belül elhelyezni.

<code>
projekt01/
  |-dist/
  |-src/
  |  |-index.html
  |  |-script.js
  |  `-style.css
  |-Gruntfile.js
  `-package.json
</code>


A művelethez szükségünk van a grunt cssmin
bővítményére, ami elvégzi a minifikálást.
Ezért a package.json fájlban felvesszük
a függőségek közzé. 

Ez történhet annak telepítésével:
  npm install grunt-contrib-cssmin --save-dev

A <nowiki>--save-dev</nowiki> kapcsolót használtuk,
mivel csak fejlesztési időben van szükség a 
minifikáló bővítményre. 


<code javascript package.json>
{
  "name": "pr06",
  "version": "1.0.0",
  "description": "Grunt teszt",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Nagy János",
  "license": "MIT",
  "devDependencies": {
    "grunt": "^1.4.1",
    "grunt-contrib-cssmin": "^4.0.0",

  }
}
</code>

Az initConfig() függvényen belül így 
felveszek egy cssmin nevű feladatot,
azon belül egy build nevű feladatot. 
Megmondom, hogy ami forrásban szerepel,
a minifikálás után kerüljön a célkönyvtárba.

Az loadNpmTasks() függvénnyel betöltöm a 
bővítményt, a registerTask() függvénnyel
megmondom, hogy a cssmin feladat, legyen
alapfeladat.

<code javascript Gruntfile.js>
module.exports = function(grunt) {

    grunt.initConfig({
        cssmin: {
            build: {
                src: 'src/style.css',
                dest: 'dist/style.min.css'
            }
        }
    });

   grunt.loadNpmTasks('grunt-contrib-cssmin');

   grunt.registerTask('default', ['cssmin']);

};
</code>

Végrehajtás:
  grunt

Eredmény:

<code>
projekt01/
  |-dist/
  |  `-style.min.css
  |-src/
  |  |-index.html
  |  |-script.js
  |  `-style.css
  |-Gruntfile.js
  `-package.json
</code>

===== Uglify =====

JavaScript kódok minimalizálása.


Használjuk a grunt-contrib-uglify bővítményt.

  npm install grunt-contrib-uglify --save-dev

<code javascript Gruntfile.js>
module.exports = function(grunt) {

   grunt.initConfig({
   		cssmin: {
        build: {
		 src: 'src/style.css',
                 dest: 'dist/style.min.css'
        }
		  },
      uglify: {
        build: {
          src: 'src/script.js',
          dest: 'dist/script.min.js'
        }
      }
   });

   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-uglify');

   grunt.registerTask('default', ['cssmin', 'uglify']);

};
</code>


===== Fájlok másolása =====
Használhatjuk a grunt-contrib-copy bővítményt:
  * https://www.npmjs.com/package/grunt-contrib-copy


  npm install grunt-contrib-copy --save-dev


<code javascript Gruntfile.js>
module.exports = function(grunt) {

   grunt.initConfig({
   		cssmin: {
        build: {
				         src: 'src/style.css',
                 dest: 'dist/style.min.css'
        }
		  },
      uglify: {
        build: {
          src: 'src/script.js',
          dest: 'dist/script.min.js'
        }
      },
      copy: {
        main: {
          expand: true,
          cwd: 'src',
          src: '*.html',
          dest: 'dist'
        }
      }
   });

   grunt.loadNpmTasks('grunt-contrib-cssmin');
   grunt.loadNpmTasks('grunt-contrib-uglify');
   grunt.loadNpmTasks('grunt-contrib-copy');

   grunt.registerTask('default', ['cssmin', 'uglify']);

};
</code>

  grunt copy

===== Változások figyelése =====

Figyeljük a megadott fájlokat. Ha változnak, végrehajtuk a megadott feladatokat.

  npm install grunt-contrib-watch --save-dev

Konfiguráljuk a grunt.initConfig() függvényen belül:

<code javascript>
      watch: {
        cssmin: {
          files: 'src/style.css',
          tasks: ['cssmin']
        }
      }
</code>


<code javascript>
grunt.loadNpmTasks('grunt-contrib-watch');
</code>

Indítás:
  grunt watch

===== Források =====
  * https://semaphoreci.com/community/tutorials/getting-started-with-grunt-js (2021)
  * https://scotch.io/tutorials/a-simple-guide-to-getting-started-with-grunt (2021)
  * https://www.tutorialspoint.com/grunt/ (2021)
  * https://gruntjs.com/getting-started (2021)
szit

Felhasználói eszközök

Eszközök a webhelyen

Eszközök az oldalon
