GULP 4 CONFIGURATIONS
Need for a task runner
Task-runners like gulp and Grunt are built on Node.js rather than npm because the basic npm scripts are inefficient when executing multiple tasks.
Even though some developers prefer npm scripts because they can be simple and easy to implement, there are numerous ways where gulp and Grunt seem to have an advantage over each other, and the default provided scripts.
Grunt runs tasks by transforming files and saves them as new ones in temporary folders, and the output of one task is taken as input for another and so on until the output reaches the destination folder.
This involves a lot of I/O calls and the creation of many temporary files. Whereas gulp streams through the file system do not require any of these temporary locations, decreasing the number of I/O calls thus, improving performance.
Grunt uses configuration files to perform tasks, whereas gulp requires its build file to be coded. In Grunt, each plugin needs to be configured to match its input location to the previous plugin’s output. In gulp, the plugins are automatically pipe-lined.
What is gulp?
-
Automation - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.
-
Platform-agnostic - Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.
-
Strong Ecosystem - Use npm modules to do anything you want + over 3000 curated plugins for streaming file transformations.
-
Simple - By providing only a minimal API surface, gulp is easy to learn and simple to use.
What's new in 4.0?!
- The task system was rewritten from the ground-up, allowing task composition using series() and parallel() methods.
- The watcher was updated, now using chokidar (no more need for gulp-watch!), with feature parity to our task system.
- First-class support was added for incremental builds using lastRun().
- A symlink() method was exposed to create symlinks instead of copying files.
- Built-in support for sourcemaps was added - the gulp-sourcemaps plugin is no longer necessary!
- Task registration of exported functions - using node or ES exports - is now recommended.
- Custom registries were designed, allowing for shared tasks or augmented functionality.
-
Stream implementations were improved, allowing for better conditional and phased builds.
Below are some steps to upgrade your machine and project in Gulp v4:
- Install Node JS v12+
-
Add "C:\Program Files\nodejs" in your Path variable on the "User variable" section of the Environment Variables on the System Paths. Note: Do only If npm is not recognized as an internal or external command
- npm install gulp-cli@latest -g
- npm install gulp@latest -g
-
Go to project repository and do the 'npm install' command as the gulp.js file and package.json are already pushed to the repository.
Note: you can check demo files below.-
To create the package json file follow below steps
- npm init
- This command will ask for several other details and once you are done with all details it will generate the package.json file in repository.
- Install required dependencies as per your requirement. (npm install bootstrap@latest).
- Set all your files paths and output folders path in gulp js file.
-
Then run "gulp" command - this will trigger the gulp process.
GULP JS FILE
// Load plugins
const { src, dest, watch, series, parallel} = require("gulp");
src - Creates a stream for reading the files.
dest - The path of the output directory where files will be written
watch - Allows watching globs and running a task when a change occurs.
series - Combines task functions and/or composed operations into larger operations that will be executed one after another, in sequential order.
Parallel - Combines task functions and/or composed operations into larger operations that will be executed simultaneously.
// Dependency for CSS Files
const cssnano = require("cssnano"); - compress / optimize the files
const postcss = require("gulp-postcss"); - for transforming CSS with JS plugins
const sass = require("gulp-sass"); - it’s a Sass compiler.
const cleanCSS = require('gulp-clean-css'); - Minify CSS files
const sourcemaps = require("gulp-sourcemaps"); - creates source maps for your code
// Dependency for JS Files
const uglify = require("gulp-uglify"); - JavaScript file minifier
const jslint = require('gulp-jslint'); - Show errors
//Dependeny for HTML Files
const htmltidy = require('gulp-htmltidy'); - for checking and generating clean XHTML/HTML.
const htmlhint = require("gulp-htmlhint"); - Static Code Analysis Tool for HTML
// Dependency for image optimizations
const changed = require('gulp-changed'); - checks changed files
const imagemin = require("gulp-imagemin"); - optimize images
const optipng = require('imagemin-optipng'); - FOR PNG images
const mozjpeg = require('imagemin-mozjpeg'); - FOR JPEG/ JPG images
const Gifsicle = require('imagemin-gifsicle'); - FOR GIF images
const svgo = require('imagemin-svgo'); - FOR SVG images
// Common Dependency
const autoprefixer = require("autoprefixer"); - Parse CSS and add vendor prefixes to CSS rules using values from the Can I Use website
const concat = require("gulp-concat"); - combines files
const replace = require("gulp-replace"); - Replace strings in files by using string or regex patterns.
const notify = require("gulp-notify"); - gulp plugin to send messages based on Vinyl Files or Errors to Mac OS X, Linux or Windows using the node-notifier module.
const browserSync = require("browser-sync").create(); - performs the live reload to the page in all browsers whenever files were changed.
const rename = require("gulp-rename"); - Rename files.
// Font Minifications
const fontmin = require('gulp-fontmin'); - Minify font seamlessly
//Source Path
var htnlpath = "./somaiya/views/somaiya_general/*.html";
var fontsPath ='components/fonts/*.{ttf,TTF, svg, SVG, eot, EOT, woff, WOFF, woff2, WOFF2}';
var scssPath ='./assets/somaiya_com/openFiles/css/*.scss';
var jspath = './assets/somaiya_com/openFiles/js/**/*.js';
var imagesPath = './assets/somaiya_com/openFiles/img/**/*.+(png|jpg|jpeg|svg|gif)';
var plugin_css = [
"./node_modules/animate.css/animate.min.css",
"./node_modules/bootstrap/dist/css/bootstrap.css",
"./node_modules/font-awesome/css/font-awesome.min.css",
"./node_modules/aos/dist/aos.css",
"./assets/somaiya_com/openFiles/css/custom.scss"
];
var plugin_js = [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js",
"./node_modules/aos/dist/aos.js",
"./assets/somaiya_com/openFiles/js/custom.js" ];
//Scss Task
function scssTask(){
sequentialCSS = plugin_css.concat(scssPath);
return src(sequentialCSS)
.pipe(sourcemaps.init())
.pipe(sass().on("error", sass.logError))
.pipe(concat('style.css'))
.pipe(dest('./assets/somaiya_com/css'))
.pipe(postcss([
autoprefixer({
browsersbrowserslist: ["> 1%", "iOS 7", "ie >= 10"],
cascade: false
}),
cssnano()
]))
.pipe(cleanCSS({compatibility: 'ie8'}))
.pipe(sourcemaps.write('.'))
.pipe(rename("style.min.css"))
.pipe(dest('./assets/somaiya_com/css'))
.pipe(browserSync.reload({stream: true}))
.pipe(notify({ message: "style.min.css is ready!"}))
};
//JS Task
function jsTask(){
sequentialJS = plugin_js.concat(jspath);
return src(sequentialJS)
.pipe(concat('custom.js'))
.pipe(jslint({ node:true, bitwise:true }))
.pipe(dest('./assets/somaiya_com/js'))
// .pipe(jslint.reporter( 'stylish' ))
.pipe(uglify({
mangle: true
}))
// .pipe(terser()) for es6
.pipe(rename("custom.min.js"))
.pipe(dest('./assets/somaiya_com/js'))
.pipe(browserSync.stream())
.pipe(notify({ message: "script.min.js is ready!" }))
};
//Image Min Task
function imageMinifier(){
return src(imagesPath)
.pipe(changed(imagesPath))
.pipe(imagemin([
optipng({optimizationLevel: 7}),
mozjpeg({quality: 90, progressive: true}),
Gifsicle({optimize:5, interlaced: true}),
svgo({
plugins: [
{removeViewBox: true},
{cleanupIDs: false}
]
})
]))
.pipe(dest('./assets/somaiya_com/img'))
.pipe(browserSync.stream())
.pipe(notify({ message: "Image Minified!" }))
}
//HTML Watcher Task
function htmlWatcher(){
return src(htnlpath)
.pipe(htmltidy
({
doctype: 'html5',
indent: true
})
)
.pipe(htmlhint())
.pipe(htmlhint.reporter())
.pipe(browserSync.stream())
.pipe(notify({ message: "HTML Templates are ready!" }))
}
//Font Minifier Task
function fontMinifier(text){
return src(fontsPath)
.pipe(fontmin({
text: text
}))
.pipe(dest('assets/fonts'))
.pipe(browserSync.stream())
.pipe(notify({ message: "All Fonts Minified!" }))
}
//Watch Task
function watchTask(){
watch([scssPath, jspath, imagesPath, htnlpath, fontsPath],
parallel(scssTask, jsTask, htmlWatcher, fontMinifier),
// parallel(scssTask, jsTask, htmlWatcher, imageMinifier, fontMinifier),
browserSync.init({
server: {
baseDir :'./somaiya/views/somaiya_general/'
}
})
);
}
//Default function
exports.default = series(
parallel(scssTask, jsTask, htmlWatcher, imageMinifier, fontMinifier),
watchTask
)
PACKAGE JSON FILE
To create this file we have use one more command which will initialize the package.json file...
Command : npm init
{
"name": "somaiya",
"version": "1.0.0",
"description": "Building an inclusive society since 1939",
"main": "gulpfile.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "gulp",
"server": "gulp"
},
"author": "Somaiya IT Team",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.8.5",
"cssnano": "^4.1.10",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-fontmin": "^0.7.4",
"gulp-htmlhint": "^3.0.1",
"gulp-imagemin": "^7.1.0",
"gulp-postcss": "^8.0.0",
"gulp-pretty-html": "^2.0.10",
"gulp-replace": "^1.0.0",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"gulp-rename": "^1.2.2"
},
"dependencies": {
"browser-sync": "^2.26.10",
"browserslist": "^4.13.0",
"gifsicle": "^5.1.0",
"gulp-changed": "^4.0.3",
"gulp-clean-css": "^4.3.0",
"gulp-cli": "^2.3.0",
"gulp-htmltidy": "^0.2.4",
"gulp-jslint": "^1.0.10",
"gulp-notify": "^3.2.0",
"gulp-w3c-html-validator": "^2.0.1",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-pngquant": "^9.0.0",
"imagemin-svgo": "^8.0.0",
"jpegtran": "^1.0.6",
"jquery": "^3.6.0",
"mat-icon-import": "^0.1.1",
"optipng": "^2.1.0",
"svgo": "^1.3.2",
"animate.css": "^4.1.1",
"aos": "^2.3.4",
"bootstrap": "^5.1.0",
"font-awesome": "^4.7.0",
"fullpage.js": "^2.9.7",
"gsap": "^3.7.1",
"scrollmagic": "^2.0.8"
},
"keywords": [
"somaiya"
]
}
Refer to below site for more details :
Official Site: https://gulpjs.com/
Reference Link: https://github.com/gulpjs/gulp
Static Site Configurations Video Tutorial:
https://drive.google.com/drive/folders/1kUhBa_LgkgixkIsOAdJJLjG0RIlOUgFT?usp=sharing