Gulp 4 to compile SASS to CSS, minify + bundle JS script files & generate RTL CSS

Gulp 4 to compile SASS to CSS, minify + bundle JS script files & generate RTL CSS

const gulp              = require('gulp');
const sourcemaps        = require('gulp-sourcemaps');
const sass              = require('gulp-sass');
const concat            = require('gulp-concat');
const uglify            = require('gulp-uglify');
const postcss           = require('gulp-postcss');
const autoprefixer      = require('autoprefixer');
const cssnano           = require('cssnano');
const replace           = require('gulp-replace');
const notify            = require('gulp-notify');
const plumber           = require('gulp-plumber');
const rtlcss            = require('gulp-rtlcss');
const rename            = require('gulp-rename');

/*
===========================================================
=
= Change these constants according to your need
=
====================================================
*/

// 1# Script files path
const scriptpath = {

    script_src: [

        'assets/src/js/vendor/*.js',    
        'assets/src/js/libraries/*.js',
        'assets/src/js/custom/*.js'
    ],

    script_dist: "assets/dist/js/",
}
const output_js_file_name = "bundle.js"; // what would you like to name your minified bundled js file

// 2# SASS/SCSS file path
const sasspath = {

    sass_src: "assets/src/scss/**/*.scss",
    sass_dist: "assets/dist/css/",
}
const compiled_sass_css_file_name = "main-style.css"; // what would you like to name your compiled CSS file

// 3# LTR & RTL CSS path
const rtlcsspath = {

    rtlcss_src: "assets/dist/css/" + compiled_sass_css_file_name,
    rtlcss_dist: "assets/dist/css/", // where would you like to save your generated RTL CSS
}

/*
===========================================================
=
= Define task (Almost no chnages required)
=
====================================================
*/

gulp.task('scriptsTask', function() {
    return gulp.src(scriptpath.script_src)
        .pipe(concat(output_js_file_name))
        .pipe(rename({ suffix: '.min' }))
        .pipe(uglify())
        .pipe(gulp.dest(scriptpath.script_dist));
});

gulp.task('sassTask', function(){
     var onError = function(err) {
            notify.onError({
                title:    "Gulp",
                subtitle: "Failure!",
                message:  "Error: <%= error.message %>",
                sound:    "Beep"
            })(err);
        this.emit('end');
    };
    return gulp.src(sasspath.sass_src)
        .pipe(sourcemaps.init()) // initialize sourcemaps first
        .pipe(plumber({errorHandler: onError}))
        .pipe(sass.sync().on('error', sass.logError))
        .pipe(postcss([ autoprefixer('last 2 version'), cssnano() ])) // PostCSS plugins
        .pipe(concat(compiled_sass_css_file_name))
        .pipe(sourcemaps.write('.')) // write sourcemaps file in current directory
        .pipe(gulp.dest(sasspath.sass_dist)); // put final CSS in dist folder
});

// task to convert LTR css to RTL
gulp.task('dortlTask', function() {
    return gulp.src(rtlcsspath.rtlcss_src)
        .pipe(rtlcss()) // Convert to RTL.
        .pipe(rename({ suffix: '-rtl' })) // Append "-rtl" to the filename.
        .pipe(gulp.dest(rtlcsspath.rtlcss_dist)); // Output RTL stylesheets.
});

// just hit the command "gulp" it will run the following tasks...
gulp.task('default', gulp.series('scriptsTask', 'sassTask', 'dortlTask', (done) => {

    gulp.watch(scriptpath.script_src, gulp.series('scriptsTask'));
    gulp.watch(sasspath.sass_src, gulp.series('sassTask'));
    gulp.watch(rtlcsspath.rtlcss_src, gulp.series('dortlTask'));
    done();
}));

{
"name": "public",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^9.8.6",
"browser-sync": "^2.26.12",
"cssnano": "^4.1.10",
"gulp": "^4.0.2",
"gulp-concat": "^2.6.1",
"gulp-notify": "^3.2.0",
"gulp-plumber": "^1.2.1",
"gulp-postcss": "^8.0.0",
"gulp-rename": "^2.0.0",
"gulp-replace": "^1.0.0",
"gulp-rtlcss": "^1.4.1",
"gulp-sass": "^4.1.0",
"gulp-sourcemaps": "^2.6.5",
"gulp-uglify": "^3.0.2",
"node-sass": "^4.14.1"
},
"dependencies": {}
}