Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:web:nodejs:gulp:gyorskezdes [2024/07/27 18:36] – eltávolítva admin
+++ oktatas:web:nodejs:gulp:gyorskezdes [2024/07/28 11:23] (aktuális) – létrehozva admin
@@ Sor 1: / Sor 1: @@
+[[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>