What is Gulp.js ?

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"));
});

Watch start

Enter value

Watch finish

Output

read more https://github.com/ayhandasyuvarlar/gulp-tutorial