[[oktatas:web:nodejs:gulp|< Gulp]]

====== Gulp kezdés ======

  * **Szerző:** Sallai András
  * Copyright (c) 2021, Sallai András
  * Szerkesztve: 2021, 2022, 2023
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC BY-SA 4.0]]
  * Web: https://szit.hu

===== A Gulp =====

A gulp a munkafolyamatokat automatizálja, hatékonyabbá teszi. 

Webhely:
  * https://gulpjs.com/ (2021)


===== Áttekintés =====

  - A Node.js és a Gulp telepítése.
  - npm projekt készítése
  - npm modulok telepítése.
  - gulpfile.js készítése
  - Bővítmények betöltése.
  - Feladatok készítése.
  - Feladatok futtatása.

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

Kell egy globális csomag:
  npm install --global gulp-cli

A telepítés után kapunk egy ''gulp'' nevű parancsot.

Ellenőrzés:
  gulp --version


==== Windows útvonal ====

Windowson a <nowiki>--global</nowiki> kapcsoló a következő helyre telepíti a csomagokat:
<code>
c:\Users\admin\AppData\Roaming\npm\
</code>



A gulp például:
Telepítés:
<code>
npm install --global gulp-cli
</code>



<code>
c:\Users\admin\AppData\Roaming\npm\node_modules\gulp\
</code>

A ''C:\Users\admin\AppData\Roaming\npm\'' könyvtárban is létrejön egy gulp.cmd fájl.

A telepítés működik PowerShellben is, de használni már nem tudjuk csak cmd-ben.
===== Projekt készítése =====

  mkdir projekt1
  cd projekt1


  npm init

Helyben szükséges a gulp csomag telepítése:
  npm install --save-dev gulp


===== Gulp fájl =====

A következő példában a defaultTask nevet adjuk a függvényünknek,
és ezt adjuk oda az exports.default tulajdonságnak.

<code javascript gulpfile.js>
function defaultTask(cb) {
  // ide jön az alapértelmezett feladat kódja
  cb();
}

exports.default = defaultTask
</code>

A cb egy callback függvény, ami paraméterként érkezik.
A cb() függvény hívásával tudatjuk, hogy a folyamat
befejeződött, és  Gulp folytathatja a következő lépéssel.


Teszteléshez:
  gulp

A lehetséges kimenet:
<code>
gulp                       
[14:26:46] Using gulpfile ~/dev/app01/gulpfile.js
[14:26:46] Starting 'default'...
[14:26:46] Finished 'default' after 3.55 ms
</code>



==== Általános használat ====

Ha más feladatok is vannak, azokat soroljuk fel a gulp parancs után:
  gulp <task1> <taskn> <...>

==== Alapértelmezés névtelen függvénnyel ====

<code javascript gulpfile.js>
exports.default = function(cb) {
    // ide jön az alapértelmezett feladat kódja
    cb();
}
</code>


Írjunk valamit az alapértelmezett kimenetre:

<code javascript gulpfile.js>
exports.default = function(cb) {
    console.log('működik');
    cb();
}
</code>

==== Feladatok ====

Kétféle faladat (task) létezik:
  * publikus - exportált függvény, a gulp paranccsal futtatható
  * privát - belső felhasználású függvény; általában a series() vagy parallel() használja

<code javascript gulpfile.js>
function feladat1() {
    console.log('privát feladat');
}

function feladat2(cb) {
    feladat1();
    console.log('publikus feladat');
    cb();
}

exports.fel1 = feladat2;
exports.default = function(cb) {
    console.log('Használat: gulp fel1');
    cb();
}

</code>

Futtatás:
  gulp fel1

==== Feladatok összeállítása ====

Két függvény:
  * series() - sorrendben történő végrehajtáshoz
  * parallel() - párhuzamos végrehajtáshoz

A két függvény használata a "Kötegelt feladatok" fejezetben található.

===== Az src és a dest =====

A gulp-t általában azért használjuk, hogy fájlokon valamilyen változtatást hajtsunk 
végre a projekten belül.


Az src és a dest függvényt használata általánosan:
<code javascript>
const { src, dest } = require("gulp");

function feladatNeve(cb) {
    src('forrás-fájlok')
    .pip(egyGulpBővítmény)
    .pipe(dest('célkönyvtár'));
    cb();
}    
</code>

Legyen egy egyszerű projekt, ami egy src könyvtárban tartalmaz egy index.html fájlt:

<code>
app01/
  |-node_modules/
  |-src/
  |  `-index.html
  |-gulpfile.js
  |-package-lock.json
  `-package-json
</code>
Hozzuk létre a projektet:
<code>
mkdir app01
cd app01
npm init -y
npm install gulp --save-dev
</code>




Írjuk meg a gulfile.js-t:

<code javascript gulpfile.js>
const { src, dest } = require("gulp");

function generateHTML(cb) {
    console.log('HTML generálás ...');
    src('src/*.html')
    .pipe(dest('public'));
    cb();
}

exports.html = generateHTML;

</code>

Végrehajtás:
  gulp html

A feladat az src könyvtárban található összes HTML fájlt a public könyvtárba másolja. 
Az alkönyvtárak nem kerülnek másolásra.


Tegyük fel, hogy vannak alkönyvtárak az src könyvtárban:
<code>
app01/
  |-node_modules/
  |-src/
  |  |-vmi/
  |  |  `-data.html
  |  `-index.html
  |-gulpfile.js
  |-package-lock.json
  `-package-json
</code>




Ha az alkönyvtárakat és tartalmukat is szeretnénk másolni az src() függvényben
írjuk át:
<code>
src('src/**/*.html')
</code>


===== CSS fájlok =====

Az előző fejezet projektjét folytatjuk.

<code>
app01/
  |-node_modules/
  |-src/
  |  |-css/
  |  |  `-style.css
  |  `-index.html
  |-gulpfile.js
  |-package-lock.json
  `-package-json
</code>

  mkdir app01
  cd app01
  npm init -y
  npm install gulp --save-dev


Legyen egy egyszerű style.css fájl:
<code css style.css>
body {
    color: blue;
}
</code>


Szeretnék a .css kiterjesztésű fájlokat a css könyvtárból a public könyvtárba másolni, könyvtárastul.

A Gulp Clean-CSS bővítményét használjuk. Telepítsük:
  npm install --save-dev gulp-clean-css


<code javascript>
const cleanCss = require('gulp-clean-css');
...
function generateCSS(cb) {
    console.log('CSS generálás ...');
    src('src/css/*.css')
    .pipe(cleanCss())
    .pipe(dest('public/css'));
    cb();    
}

...

exports.css = generateCSS;
</code>



A teljes fájl:
<code javascript gulpfile.js>
const { src, dest } = require("gulp");
const cleanCss = require('gulp-clean-css');

function generateHTML(cb) {
    console.log('HTML generálás ...');
    src('src/**/*.html')
    .pipe(dest('public'));
    cb();
}

function generateCSS(cb) {
    console.log('CSS generálás ...');
    src('src/css/*.css')
    .pipe(cleanCss())
    .pipe(dest('public'));
    cb();    
}

exports.html = generateHTML;
exports.css = generateCSS;
</code>

Használat:
  gulp css

Nézzük meg az eredményt a public/css könyvtárban:

<code css>
body{color:#00f}
</code>


===== Átnevezés =====

Telepítsük a gulp-rename bővítményt:
  npm install --save-dev gulp-rename 

Használat:
<code javascript>
const rename = require('gulp-rename');
...
function generateCSS(cb) {
    console.log('CSS generálás ...');
    src('src/css/*.css')
    .pipe(cleanCss())
    .pipe(rename({extname: ".min.css"}))
    .pipe(dest('public/css'));
    cb();    
}

</code>


==== Átnevezés lehetőségek ====

Átnevezés során, a következő tulajdonságokat lehet megadni:
  * dirname -- célútvonal megadása
  * basedir -- új fájlnév megadása
  * prefix  -- mivel kezdődjön a fájl neve
  * suffix  -- mire végződjön a fájlnév
  * extname -- mi legyen a fájl kiterjesztése

<code javascript gulpfile.js>
const { src, dest } = require('gulp');
const rename = require('gulp-rename');

function streamTxt() {
    return src("src/**/*.ts")
    .pipe(rename({
        dirname: 'datas',
        basename: 'fruit',
        prefix: 'the-',
        suffix: '-south',
        extname: '.txt'
    }))
    .pipe(dest('dist'));
}

exports.default = streamTxt;
</code>


===== JavaScript fájlok =====

<code>
app01/
  |-node_modules/
  |-src/
  |  |-css/
  |  |  `-style.css
  |  |-js/
  |  |  `-app.js
  |  `-index.html
  |-gulpfile.js
  |-package-lock.json
  `-package-json
</code>

Készítsünk egy egyszerű JavaScript fájlt:
<code javascript js/app.js>
/*
    Több soros 
    megjegyzés
*/

function doit() {
    console.log('működik');
}

</code>


<code javascript>
...
function generateJS(cb) {
    console.log('JavaScript generálás ...');
    src('src/js/*.js')
    .pipe(uglify())
    .pipe(rename({extname: ".min.js"}))
    .pipe(dest('public/js'));
    cb();    
}
...
exports.js = generateJS;
</code>

Futtatás:
  gulp js


===== HTML fájlok átírása =====

A HTML fájlokat írhatjuk a **gulp-replace** és a **gulp-cheerio** bővítményekkel.

A gulp-replace segítségével a fájlok szabályos kifejezésekkel írhatók. 
A gulp-cheerio bővítménnyel a HTML fájlok tageken keresztül írhatók.
Mit itt most a gulp-cheerio bővítményt fogjuk használni.

A public könyvtárban található HTML állomány most rossz CSS és JavaScript fájlokra mutat.
Át kell írni a link és a script fájlokat. 


Emlékeztetőül a könyvtárszerkezet:
<code>
app01/
  |-public/
  |  |-css/
  |  |  `-style.min.css
  |  |-js/
  |  |  `-app.min.js
  |  `-index.html
  |-src/
  |  |-css/
  |  |  `-style.css
  |  |-js/
  |  |  `app.js
  |  `-index.html
  |-gulpfile.js
  `-package.json
</code>

A style.css át lett nevezve style.min.css-re az app.js pedig app.min.js-re.



A Gulp Cheerio bővítményét fogjuk használni, telepítsük:
  npm install --save-dev gulp-cheerio



<code javascript>
...
const cheerio = require('gulp-cheerio');
...
function generateHTML(cb) {
    console.log('HTML generálás ...');
    src('src/**/*.html')
    .pipe(cheerio(function($) {
        $('link').remove();
        $('script').remove();
        $('head').append('<link rel="stylesheet" href="style.min.css">');
        $('body').append('<script src="app.min.js"></script');
    }))
    .pipe(dest('public'));
    cb();
}
</code>

A teljes gulpfile.js:

<code javascript gulpfile.js>
const { src, dest } = require("gulp");
const cleanCss = require('gulp-clean-css');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const cheerio = require('gulp-cheerio');

function generateHTML(cb) {
    console.log('HTML generálás ...');
    src('src/**/*.html')
    .pipe(cheerio(function($) {
        $('link').remove();
        $('script').remove();
        $('head').append('<link rel="stylesheet" href="style.min.css">');
        $('body').append('<script src="app.min.js"></script');
    }))
    .pipe(dest('public'));
    cb();
}

function generateCSS(cb) {
    console.log('CSS generálás ...');
    src('src/css/*.css')
    .pipe(cleanCss())
    .pipe(rename({extname: ".min.css"}))
    .pipe(dest('public/css'));
    cb();    
}

function generateJS(cb) {
    console.log('JavaScript generálás ...');
    src('src/js/*.js')
    .pipe(uglify())
    .pipe(rename({extname: ".min.js"}))
    .pipe(dest('public/js'));
    cb();    
}

exports.html = generateHTML;
exports.css = generateCSS;
exports.js = generateJS;
</code>


===== Watch és browser-sync =====

Vegyük fel a watch függvényt a gulpfile.js-ben:
<code javascript>
const { src, dest, watch } = require('gulp');
const sync = require("browser-sync").create();
</code>


A teljes gulpfile.js:

<code javascript gulpfile.js>
const { src, dest, watch } = require('gulp');
const sync = require("browser-sync").create();
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const cheerio = require('gulp-cheerio');

function streamHtml() {
    return src('src/*.html')
        .pipe(cheerio(function ($) {
            $('script').remove();
            $('body').append('<script src="js/script.min.js"></script>\n')
        }))        
        .pipe(dest('public'));
}

function streamJS() {
    return src('src/js/*.js')
        .pipe(uglify())
        .pipe(rename({ extname: '.min.js'}))        
        .pipe(dest('public/js'));
}

function server() {
    sync.init({
        server: {
            baseDir: "./public"
        }
    });
    watch("./src/**/*.*").on("change", function() {
        sync.reload();
        streamHtml();
        streamJS();
    });
}

exports.streamHtml = streamHtml;
exports.server = server;
exports.streamJS = streamJS;
exports.default = function() {
    watch('src/*.html', streamHtml);
    watch('src/js/*.js', streamJS);
}

</code>



===== Függelék =====

==== Browser-sync szerver ====

Az eddig használt lite-server helyett, most a browser-sync szervert fogjuk használni.

Telepítsük a browser-sync csomagot:
  npm i browser-sync --save-dev


Bővítsük a gulpfile.js állományt az alábbiak alapján:

<code javascript gulpfile.js>
const { src, dest, watch } = require('gulp');
const sync = require("browser-sync").create();

function streamHtml() {
    return src('src/*.html').pipe(dest('public'));
}

function server() {
    sync.init({
        server: {
            baseDir: "./public"
        }
    });
    watch("./src/**.html").on("change", sync.reload);
    watch("./src/**.html").on("change", streamHtml);
}

exports.server = server;
exports.default = function() {
    watch('src/*.html', streamHtml);
}

</code>

Ha csak azt írom: gulp, végrehajtódik a változások másolása. 
  gulp

Ha azt írom gulp server, a változásra végrehajtódik a public-ba másolás és a böngésző újratöltése is.
  gulp server


==== Fájlok változása és figyelés ====


<code>
app01/
  |-node_modules/
  |-src/
  |  |-css/
  |  |  `-style.css
  |  `-index.html
  |-gulpfile.js
  |-package-lock.json
  `-package-json
</code>

  mkdir app01
  cd app01
  npm init -y
  npm install gulp --save-dev


Készítsünk egy gulp fájlt, ahol használjuk az src, dest és watch függvényeket:
<code javascript gulpfile.js>
const { src, dest, watch } = require('gulp');

function streamHtml() {
    return src('src/*.html').pipe(dest('public'));
}

exports.default = function() {
    watch('src/*.html', streamHtml);
}
</code>
 


Írunk egy streamHtml() függvényt, amelyet futtatunk, ha változik az src könyvtárban egy HTML oldal.

Hozzuk létre a HTML oldalt az src könyvtárban:

<code html src/index.html>
<!DOCTYPE html>
<html lang="hu">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Valami</h1>
</body>
</html>
</code>

A gulp fájlban most van egy default nevű feladat. Ezt el tudjuk indítani. 
Indítsuk a gulp parancsot:
  gulp

A gulp nem adja vissza a várakozási jelet, mert figyeli a megadott fájlok változását. 

A gulp segítségével feladatokat határozunk meg, angolosan: taskokat. Az elérhető feladatokat listázhatjuk a következő paranccsal: 
  gulp --tasks


Bővíthetjük a figyelt és másolt fájlokat:
  src('src/*.{html,js}'
A watch() függvényben is vegyük fel a js kiterjesztést.

A public könyvtáron, most már egy külön parancssorban lehet futtatni egy élő szervert.

Például a lite-server, ha telepítve van:
  lite-server --baseDir=./public

<code>
app01/
  |-node_modules/
  |-public/
  |  |-index.html
  |  `-script.js
  |-src/
  |  |-index.html
  |  `-script.js
  |-gulpfile.js
  `-package.json
</code>


===== Források =====
  * https://gulpjs.com/docs/en/getting-started/quick-start/ (2021)
  * https://www.npmjs.com/package/gulp-rename (2021)