This is a Gulp build system for processing SCSS, JavaScript, and images, and setting up a development server using BrowserSync.
Make sure you have the following dependencies installed:
- gulp
- gulp-sass
- gulp-autoprefixer
- gulp-clean-css
- gulp-terser
- gulp-webp
- imagemin-mozjpeg
- browser-sync
You can install them by running the command:
npm install gulp gulp-sass gulp-autoprefixer gulp-clean-css gulp-terser gulp-webp imagemin-mozjpeg browser-sync --save-devThe compilescss function compiles SCSS files into CSS, applies Autoprefixer, minifies the CSS, and outputs the result to the dist/css directory.
The jsmin function minifies JavaScript files using Terser and outputs the result to the dist/js directory.
The optimizeimg function optimizes images (JPEG and PNG) using imagemin and outputs the optimized images to the dist/images directory.
The webpImage function converts images (JPEG and PNG) to WebP format and outputs the converted images to the dist/images directory.
The liteServer function sets up a development server using BrowserSync. It watches for changes in SCSS, JavaScript, HTML, and image files, triggers the corresponding tasks, and reloads the browser when changes occur.
To start the Gulp build system, run the following command:
gulpThis will execute the default task, which runs all the processing functions and starts the live server.
The BrowserSync configuration is stored in the bs-config.js file. You can modify the configuration options in that file to suit your needs.
This project is licensed under the MIT License.
Feel free to customize the README.md file further based on your specific project requirements.