Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:nodejs:grunt

< Node.js

Grunt

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:

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 szervert, ha egy állomány változott.
  • grunt-contrib-concat - Például 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:

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.

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

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:

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

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.

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

Uglify

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

Fájlok másolása

Használhatjuk a grunt-contrib-copy bővítményt:

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

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:

      watch: {
        cssmin: {
          files: 'src/style.css',
          tasks: ['cssmin']
        }
      }
grunt.loadNpmTasks('grunt-contrib-watch');

Indítás:

grunt watch

Források

oktatas/web/nodejs/grunt.txt · Utolsó módosítás: 2024/07/28 11:14 szerkesztette: admin