• Szerző: Sallai András
• Copyright © Sallai András, 2021
• CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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/

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.

• 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

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.

• grunt-init futtatása
• npm init parancs létrehozza
• Kézzel készítünk egyet a következő sablon alapján:

{
  "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"
  }
}

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.

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:

module.exports = function(grunt) {
 
};

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

grunt.initConfig({
    task: { }
});
 
grunt.registerTask(feladatnev, [ opcionális leírás, ], feladatfüggvény );
 
grunt.loadNpmTasks('bővítmény');

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.

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

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

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",
 
  }
}

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.

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']);
 
};

Végrehajtás:

grunt

Eredmény:

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

JavaScript kódok minimalizálása.

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

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

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']);
 
};

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

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']);
 
};

grunt copy

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:

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

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

Indítás:

grunt watch

• 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)