Gulp - Gyorskezdés

Szerző: Sallai András
Copyright © 2024, Sallai András
Licenc: CC BY-SA 4.0
Web: https://szit.hu

Projekt készítése

mkdir app01
cd app01
npm init -y

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

npm install --save-dev browser-sync gulp gulp-uglify gulp-clean-css

A gulfile.js

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

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

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

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

A package.json

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"
  }
}