What is Gulp.js ?
4 min readDec 27, 2022
Gulp.js is perfect for Front-End developers. It is a Node.js based javascript tool that automates the workflow. With the help of Gulp.js, we can automate the processes that require a lot of effort .
- It is open source javascript tool
- Task runner or task runner.
- Works with nodejs or npm
- Frontend build tool
- Used for repetitive or time-consuming operations
When using gulp, the basic logic is as follows, first a gulpfile.js file is created, this is the page with the operations you will do with gulp. Then you work in src, when your last process is finished, we will present the site to the live model, and you send the final version to the dist folder with gulp.
Gulp download
- one step
npm install -g gulp
- two step
create new folder
mkdir gulp
- three step
- step one => npm init -y
- step two => npm install --save-g gulp
- four step
create ‘gulpfile.js’
// gulp.task => create a of task
// gulp.task => create a of task
// gulp.src => source files
// gulp.test => target directory
// gulp.watch => monitoring and works task
// pipe => modify
gulp 'taskName'
gulp with file and folder transfer process
gulp.task("transferImg", () => {
gulp.src("./img/*").pipe(gulp.dest("./dist/images"));
});
gulp.task("transferHtml", () => {
gulp.src("./src/*.html").pipe(gulp.dest("./dist/public"));
});
Gulp Imagemin
Gulp.js is an open source library that allows us to reduce the size of images.
- Download
npm install --save-dev gulp-imagemi
import imagemin from "gulp-imagemin";
gulp.task("copy", () => {
gulp.src("./*.png").pipe(imagemin()).pipe(gulp.dest("./dist/images"));
})
gulp-uglify
UglifyJS is a JavaScript parser/compressor/beautifier toolkit. It can be used to combine and minify JavaScript assets so that they require less HTTP requests and make your site load faster.
- dowland
npm install --save-dev gulp-uglif
gulp.task("minJs", () => {
gulp
.src("./src/scripts/*")
.pipe(GulpUglify())
.pipe(gulp.dest("./dist/scripts"));
});
Enter value
Output
gulp-clean-css
It minifies (compresses) css files by removing unnecessary spaces, thus minimizing the file size.
- download
npm install gulp-clean-css --save-dev
import GulpCleanCss from 'gulp-clean-css'
gulp.task("cssMin", () => {
gulp
.src("./src/style/*.css")
.pipe(GulpCleanCss())
.pipe(gulp.dest("./dist/style"));
});
Enter value
Output
gulp-concat
gulp-concat combines CSS and JavaScript files and presents them as a single file, while gulp-watch monitors changes in folders and files and performs the specified task(s) in case of changes.
npm install gulp-concat --save-dev
gulp.task("concat", () => {
gulp
.src("./src/scripts/*.js")
.pipe(GulpUglify())
.pipe(gulpConcat("all.js"))
.pipe(gulp.dest("./dist/scripts"));
});
Enter value
Output
gulp-sass
gulp-sass library converts .scss files to .css files
- download
npm install --save-dev gulp-sass
npm install sass
import dartSass from "sass";
import gulpSass from "gulp-sass";
const sass = gulpSass(dartSass);
gulp.task("sass", () => {
gulp
.src("./src/style/scss/*.scss")
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest("./dist/style/"));
});
Enter value
Output
gulp-watch
Allows watching globs and running a task when a change occurs. Tasks are handled uniformly with the rest of the task system.
gulp.task("watch", () => {
gulp.watch("./src/style/**/*.scss", gulp.series("sass"));
});