How to install Gulp 4 with sample project — Developer Diary

Gulp is a cross-platform, streaming task runner that lets developers automate many development tasks. So we will learn how to install Gulp 4 on your machine.

Gulp reads files as streams and pipes the streams to different tasks. These tasks are code-based and use plugins. The tasks modify the files, building source files into production files.

How to install Gulp 4

1. Check node, npm, and npx installed or not

node -v
npm -v

If they are not installed then please use below command

npm install[email protected] -g 
npm install[email protected] -g

2. Install Gulp Globally

npm i gulp-cli -g

Now we are going to create project

Open you command prompt and create folder name : gulp then run next command npm init

This will guide you through giving your project a name, version, description, etc. You will see some text, and the CMD will offer you to add some information about your project. Fill out the fields or press Enter to leave them blank

Press Enter and you will see that the package.json has been created in the root of your project folder. Go to your gulp folder and run the following command

npm i gulp -D

Once above command complete , a folder named node_modules and a file named package-lock.json should appear in the root of your project folder

3. Install Gulp Plugin

Run below command

npm i -D gulp-sass node sass gulp-autoprefixer gulp-cssnano gulp-concat gulp-uglify gulp-rename gulp-imagemin gulp-changed gulp-clean browser-sync

It will install the following plugins locally in your project:

• gulp-sass and node sass: transform Sass into CSS
• gulp-autoprefixer: adds vendor prefixes to CSS rules
• gulp-cssnano: minifies CSS
• gulp-concat: merges several CSS or several JS files
• gulp-uglify: minifies JS
• gulp-rename: adds .min to the name of a minified file
• gulp-imagemin: minifies images
• gulp-changed: detects whether files were changed and excludes unchanged files: every time you run gulp all your files would not be rewritten regardless of whether the source files were changed
• gulp-clean: clears the build directory and deletes everything in it
• browser-sync: provides you with a simple web server and auto-reloads the page in all browsers on all devices

4. Create gulpfile.js file in root folder

const {
    src,
    dest,
    parallel,
    series,
    watch
} = require('gulp');

// Load plugins

const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const cssnano = require('gulp-cssnano');
const concat = require('gulp-concat');
const clean = require('gulp-clean');
const imagemin = require('gulp-imagemin');
const changed = require('gulp-changed');
const browsersync = require('browser-sync').create();

// Clean assets

function clear() {
    return src('./assets/*', {
            read: false
        })
        .pipe(clean());
}

// JS function 

function js() {
    const source = './src/js/*.js';

    return src(source)
        .pipe(changed(source))
        .pipe(concat('bundle.js'))
        .pipe(uglify())
        .pipe(rename({
            extname: '.min.js'
        }))
        .pipe(dest('./assets/js/'))
        .pipe(browsersync.stream());
}

// CSS function 

function css() {
    const source = './src/scss/main.scss';

    return src(source)
        .pipe(changed(source))
        .pipe(sass())
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 2 versions'],
            cascade: false
        }))
        .pipe(rename({
            extname: '.min.css'
        }))
        .pipe(cssnano())
        .pipe(dest('./assets/css/'))
        .pipe(browsersync.stream());
}

// Optimize images

function img() {
    return src('./src/img/*')
        .pipe(imagemin())
        .pipe(dest('./assets/img'));
}

// Watch files

function watchFiles() {
    watch('./src/scss/*', css);
    watch('./src/js/*', js);
    watch('./src/img/*', img);
}

// BrowserSync

function browserSync() {
    browsersync.init({
        server: {
            baseDir: './'
        },
        port: 3000
    });
}

// Tasks to define the execution of the functions simultaneously or in series

exports.watch = parallel(watchFiles, browserSync);
exports.default = series(clear, parallel(js, css, img));

Commands

The commands you will have to use the most often in the CMD:

• gulp: run this command after you change the gulpfile.js file
• gulp watch: run this command to watch the files for changes every time you launch your project

This is the basic setup and installation of gulp. I think this will help you to start. Do you have any question you can feel free contact us.

Originally published at https://www.developerdiary.in on August 24, 2021.