gulpflux ⚡

A tiny Gulp 4 build setup for front-end projects: minifies CSS/JS/HTML, optimizes images, writes sourcemaps in dev, and cleans build folders.

✨ Features

• CSS: autoprefix + minify (.min.css)
• JS: terser minification + sourcemaps
• HTML: minify (collapse whitespace, remove comments)
• Images: optimize PNG/JPG/SVG/GIF/WEBP
• Clean task
• Watch mode for fast local dev
• Prod/Dev modes via NODE_ENV

📁 Structure

src/                 # HTML sources → dist/
assets/scss/         # your .css files (or switch to assets/css/)
assets/css/dist/     # generated CSS
assets/javascript/   # source JS
assets/javascript/dist/ # generated JS
assets/images/       # source images
assets/images/dist/  # optimized images
dist/                # minified HTML

Using real SCSS? Add a Sass compile step. (See “SCSS add-on” below.)

🚀 Getting Started

# 1) install
npm i

# 2) dev mode (watches & writes sourcemaps)
npm run dev

# 3) one-off production build (minified, no dev sourcemaps)
npm run build

Scripts

• npm run dev → watch & build on changes
• npm run build → clean + build (NODE_ENV=production)
• npm run clean → remove dist folders

🔧 Config

• Target browsers → package.json → "browserslist"
• Paths & globs → edit in gulpfile.js under paths

🧩 Optional: SCSS add-on

If you actually write .scss, install:

npm i -D sass gulp-sass

Then, in gulpfile.js:

import dartSass from "sass";
import gulpSass from "gulp-sass";
const sass = gulpSass(dartSass);

export function styles() {
  return gulp
    .src("assets/scss/**/*.scss", { sourcemaps: !isProd })
    .pipe(sass().on("error", sass.logError))
    .pipe(autoprefixer({ cascade: false }))
    .pipe(cssnano())
    .pipe(rename({ suffix: ".min" }))
    .pipe(gulp.dest("assets/css/dist", { sourcemaps: "." }));
}

🧯 Tips

• Commit only source files; dist folders are re-buildable.
• For Windows, use cross-env to set NODE_ENV.
• Use gulp-if to branch logic for dev/prod (already wired for sourcemaps).

---

Made with ❤️ by you. PRs welcome!