Gulp Js Command Line & Package Json

Gulp.js_Command.md

*Complete documentation on Gulp can be found here: https://gulpjs.com/

1. Install the gulp command line utility npm install --global gulp-cli
2. Create a package.json file in your project directory npm init

Create package.json file

{
	"name": "MyProject",
	"version": "1.0.0",
	"description": "My Project HTML Templates",
	"main": "gulpfile.js",
	"author": "websmirno",
	"license": "ISC",
	"devDependencies": {
		"browser-sync": "^2.27.10",
		"del": "^6.1.0",
		"gulp": "^4.0.2",
		"gulp-autoprefixer": "^6.1.0",
		"gulp-clean-css": "^4.3.0",
		"gulp-concat": "^2.6.1",
		"gulp-file-include": "^2.3.0",
		"gulp-htmlmin": "^5.0.1",
		"gulp-notify": "^4.0.0",
		"gulp-plumber": "^1.2.1",
		"gulp-replace": "^1.1.3",
		"gulp-sass": "^5.1.0",
		"gulp-terser": "^2.1.0",
		"sass": "^1.51.0"
	},
	"dependencies": {
		"bootstrap": "^5.0.0-beta3",
		"imagesloaded": "^4.1.4",
		"lazysizes-umd": "^3.0.1",
		"masonry-layout": "^4.2.2",
		"swiper": "^6.5.4"
	}
}

Create Below gulpfile.js

const gulp = require('gulp');
const concat = require('gulp-concat');
const autoprefixer = require('gulp-autoprefixer');
const terser = require('gulp-terser');
const del = require('del');
const browserSync = require('browser-sync').create();
const plumber = require('gulp-plumber');
const notify = require("gulp-notify");
const fileinclude = require('gulp-file-include');
const replace = require('gulp-replace');
const htmlmin = require('gulp-htmlmin');
const cleanCSS = require('gulp-clean-css');
const dartSass =  require('sass');
const gulpSass = require('gulp-sass');
const sass = gulpSass(dartSass);
/*HTML*/
function html(){
	return gulp.src('./src/*.html')
	.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
	.pipe(fileinclude({
		prefix: '@@',
		basepath: '@file'
	}))
	.pipe(gulp.dest('./build/'))
	.pipe(browserSync.stream());
}
function htmlMin(){
	return gulp.src('./build/*.html')
	.pipe(htmlmin({ collapseWhitespace: true }))
	.pipe(gulp.dest('./build/'));
}
/*JS*/
const jsFiles = [
	'./node_modules/swiper/swiper-bundle.js',
	'./node_modules/masonry-layout/dist/masonry.pkgd.js',
	'./node_modules/imagesloaded/imagesloaded.pkgd.js',
	'./src/external/flatpickr/flatpickr.js',
	'./src/js/**/*.js'
];
function js() {
	return gulp.src(jsFiles, { allowEmpty: true })
	.pipe(concat('bundle.js'))
	.pipe(gulp.dest('./build/js'))
	.pipe(browserSync.stream());
}
function jsMin(){
	return gulp.src(jsFiles, { allowEmpty: true })
	.pipe(concat('bundle.js'))
	.pipe(terser({
		keep_fnames: true,
		mangle: false
	}))
	.pipe(gulp.dest('./build/js'))
	.pipe(browserSync.stream());
}
/*CSS*/
function css(){
	return gulp.src([
		'./src/scss/style.scss'
	])
	.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
	.pipe(sass().on('error', sass.logError))
	.pipe(autoprefixer({
		overrideBrowserslist: ['last 1 versions'],
		cascade: false
	}))
	.pipe(gulp.dest('./build/css'))
	.pipe(gulp.dest('./src/css'))
	.pipe(browserSync.stream());
}
function cssMin(){
	return gulp.src([
		'./src/scss/style.scss'
	])
	.pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
	.pipe(sass().on('error', sass.logError))
	.pipe(autoprefixer({
		overrideBrowserslist: ['last 1 versions'],
		cascade: false
	}))
	.pipe(cleanCSS({level: 2}))
	.pipe(gulp.dest('./build/css'))
	.pipe(browserSync.stream());
}
/*Remove Folder*/
function clean(){
	return del(['build/*'])
}
/*File Transfer*/
function fileTransfer() {
	return gulp.src(['./src/**/*', '!./src/js/**/*', '!./src/*.html'])
	.pipe(gulp.dest('./build/'))
	.pipe(browserSync.stream());
}
/*Separate Css*/
function separateCss(done){
	gulp.src("./src/include-separate/**/*.scss")
	.pipe(sass().on('error', sass.logError))
	.pipe(autoprefixer({
		overrideBrowserslist: ['last 1 versions'],
		cascade: false
	}))
	.pipe(gulp.dest(function(file) {
		return file.base;
	}));
	fileTransfer2();
	done();
}
function fileTransfer2() {
	return gulp.src(['./src/include-separate/**/*'])
	.pipe(gulp.dest('./build/include-separate'))
	.pipe(browserSync.stream());
}
function watch(){
	gulp.watch('./src/scss/**/*.scss', css)
	gulp.watch('./src/include-separate/**/*.scss', separateCss)
	gulp.watch('./src/js/**/*.js', js)
	gulp.watch('./src/**/*.html', gulp.series(html)).on('change', browserSync.reload);
	browserSync.init({
		server:{
			baseDir: "./build/"
		}
	});
}
/*Task*/
gulp.task('css', css);
gulp.task('html', html);
gulp.task('js', js);
gulp.task('clean', clean);
gulp.task('fileTransfer', fileTransfer);
gulp.task('separateCss', separateCss);
gulp.task('watch', watch);
gulp.task('build', gulp.series(clean, gulp.parallel(css,js,html,separateCss,fileTransfer)));
/*
	Task
	*Code minimization.
	**For website optimization
*/
gulp.task('htmlMin', htmlMin);
gulp.task('jsMin', jsMin);
gulp.task('cssMin', cssMin);
gulp.task('minAll', gulp.series(htmlMin,jsMin, cssMin));

1. All packages must be installed - 'npm i'
2. The main commands are in the file - gulpfile.js

• To deploy a server - "gulp watch"
• To generate the production version - "gulp build"
• Command for css optimization - "gulp cssMin"
• Command for js optimization - "gulp jsMin"
• Command for html optimization - "gulp htmlMin"
• Command for html, css, js optimization - "gulp htmlMin"