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

====== Gulp - Gyorskezdés ======

  * **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-uglify gulp-clean-css
</code>

===== A gulfile.js =====

<code javascript gulpfile.js>
const { src, dest, series, parallel, watch } = require('gulp');
const uglify = require('gulp-uglify');
const cleanCss = require('gulp-clean-css');
const browserSync = require('browser-sync').create();

function genHTML(cb) {
    console.log('HTML másolás...');
    src('src/**/*.html')
    .pipe(dest('public'))
    cb();
}

function minifyJS(cb) {
  console.log('JavaScript minifikálás ...');
  src('src/**/*.js')
    .pipe(uglify())
    .pipe(dest('public'));
  cb();
}

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

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

function devServe(cb) {
  browserSync.init({
    server: [
      "src",
      "node_modules/bootstrap/dist/css",
      "node_modules/bootstrap/dist/js"
    ]
  });
  watch('src/**/*').on('change', browserSync.reload);
  cb();
}

function prodServe(cb) {
  browserSync.init({
    server: {
      baseDir: './public'
    },
    port: 3500
  });
  watch('public/**/*').on('change', browserSync.reload);
  cb();
}

exports.build = build;
exports.serve = devServe;
exports.serve = prodServe;
exports.default = series(build, devServe);
</code>

<note tip>
Eredetileg szereplet itt a gulp-imagemin csomag is, de a 8.x verziótól csak ES modulként használható.
</note>

A Browser-sync szerver a watch: true beállításával helyettesíthető a watch kezdetű sor:

<code javascript>
function devServe(cb) {
  browserSync.init({
    server: [
      "src",
      "node_modules/bootstrap/dist/css",
      "node_modules/bootstrap/dist/js"
    ],
    port: 3000,
    watch: true
  });
  cb();
}
</code>


===== A package.json =====

<code javascript package.json>
{
  "name": "app01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "npm run dev",
    "dev": "gulp devserve",
    "prod": "gulp prodserve",
    "build": "gulp build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^3.0.2",
    "gulp": "^5.0.0",
    "gulp-clean-css": "^4.3.0",
    "gulp-uglify": "^3.0.2"
  }
}

</code>