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

====== Gulp - Kezdés ES modullal ======

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

===== Projekt készítése =====

<code>
mkdir app01
cd app01
npm init -y
</code>

===== Függőségek telepítése =====

<code>
npm install --save-dev browser-sync gulp gulp-minify gulp-clean-css
</code>


Ha állományban akarunk szöveget cserélni, és/vagy szöveget összefűzni:
<code>
npm install --save-dev gulp-replace gulp-concat
</code>


Ha TypeScriptet is használunk:

<code>
npm install --save-dev gulp-typescript
</code>

===== Példa gulpfile.js =====

<code javascript gulpfile.js>

import {src, dest, parallel} from 'gulp';
import cleanCss from 'gulp-clean-css';
import replace from 'gulp-replace';
import minify from 'gulp-minify';
import concat from 'gulp-concat';

import {create as bsCreate} from 'browser-sync';
const browserSync = bsCreate();
 
function genHTML(cb) {
    src('src/**/*.html')
    .pipe(replace(/app.js/g, 'app-min.js'))
    .pipe(dest('public'))
    cb();
}
 
function minifyJS(cb) {
  src([
    'src/**/*.js', 
    'node_modules/bootstrap/dist/js/bootstrap.js'
  ])
    .pipe(replace(/import .*/g, ''))
    .pipe(replace(/export .*/g, ''))
    .pipe(concat('app.js'))
    .pipe(minify())
    .pipe(dest('public'));
  cb();
}

function minifyCSS(cb) {
  src([
    'src/**/*.css', 
    'node_modules/bootstrap/dist/css/bootstrap.css'])
    .pipe(cleanCss())
    .pipe(dest('public'));
  cb();
}

function build(cb) {
  parallel(genHTML, minifyJS, minifyCSS)(cb);
}

export default build


</code>


===== TypeScript használat példa =====

<code javascript gulpfile.js>

import {src, dest, parallel} from 'gulp';
import cleanCss from 'gulp-clean-css';
import replace from 'gulp-replace';
import minify from 'gulp-minify';
import concat from 'gulp-concat';
import ts from 'gulp-typescript';

import {create as bsCreate} from 'browser-sync';
const browserSync = bsCreate();
 
function genHTML(cb) {
    src('src/**/*.html')
    .pipe(replace(/app.js/g, 'app-min.js'))
    .pipe(dest('public'))
    cb();
}
 
function minifyJS(cb) {
  src([
    'src/**/*.js', 
    'node_modules/bootstrap/dist/js/bootstrap.js'
  ])
    .pipe(replace(/import .*/g, ''))
    .pipe(replace(/export .*/g, ''))
    .pipe(concat('app.js'))
    .pipe(minify())
    .pipe(dest('public'));
  cb();
}

function minifyCSS(cb) {
  src([
    'src/**/*.css', 
    'node_modules/bootstrap/dist/css/bootstrap.css'])
    .pipe(cleanCss())
    .pipe(dest('public'));
  cb();
}

function build(cb) {
  parallel(genHTML, minifyJS, minifyCSS)(cb);
}

function tsc(cb) {
  src('src/**/*.ts')
    .pipe(ts({
      outFile: 'output.js'
    }))
    .pipe(dest('public'));
    cb();
}
export { tsc }
export default build


</code>