Gulp Command Run Never Finish

Question

I have bought template MaterialPro from wrappixel website. After I got the template package already, I have followed getting started installation from document attached with template as the following:

1. Install Node.js From https://nodejs.org/en/download/
2. Open terminal navigating to material-pro/
3. Install npm: npm install --global npm@latest
4. Install yarn: npm install --global yarn
5. Install gulp: npm install --global gulp-cli
6. Copy gulp: gulp copy

The gulpfile.js inside root template is like this:

//gulpfile.js
console.time("Loading plugins"); //start measuring
const gulp = require('gulp'),
    minifyCSS = require('gulp-clean-css'),
    uglify = require('gulp-uglify'),
    rename = require("gulp-rename"),
    sass = require('gulp-sass'),
    npmDist = require('gulp-npm-dist');
console.timeEnd('Loading plugins');

const sassFiles = 'src/assets/scss/*.scss',
    cssDest = 'dist/css/';

//compile scss into css
function style() {
    return gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
}

//This is for the minify css
async function minifycss() {
    return gulp.src(['dist/css/*.css', '!dist/css/**/*.min.css'])
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(minifyCSS())
        .pipe(gulp.dest(cssDest));
}

// This is for the minifyjs
async function minifyjs() {
    return gulp.src(['dist/js/custom.js','dist/js/app.js', '!dist/js/custom.min.js',  '!dist/js/app.min.js'] )
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
}

// Copy dependencies to ./public/libs/
async function copy() {
    gulp.src(npmDist(), {
            base: './node_modules'
        })
        .pipe(gulp.dest('./src/assets/libs'));
};

async function watch() {
    gulp.watch(['src/assets/scss/**/*.scss'], style);
    gulp.watch(['dist/css/style.css'], minifycss);
    gulp.watch(['dist/js/**/*.js', '!dist/js/**/*.min.js'], minifyjs);
}


gulp.task('default', watch);

exports.style = style;
exports.minifycss = minifycss;
exports.minifyjs = minifyjs;
exports.copy = copy;
exports.watch = watch;

After all, I made some changes to the template scss file, and run gulp command. At this point, the gulp command run never finished unitl now with output on terminal like this

Loading plugins: 539.410ms
[17:01:03] Using gulpfile ~/Documents/documentation/materialpro-bootstrap-latest/material-pro/gulpfile.js
[17:01:03] Starting 'default'...
[17:01:03] Finished 'default' after 18 ms

What was going wrong with this? Please kindly help, thanks.

P.S: Pls apologized if my question is incomplete or something, if I will try to add some more detail if suggested.

Answer 1

Your gulp code is fine. Made some change on your scss or js file it will show some changes.

Exaplantion

1. Your default command is gulp.task('default', watch);
2. when you run gulp it starts to watch your scss, css, js code. If there is new change it will execute the command.

Suggestion. Use like this.

async function watch() {
    gulp.watch(['src/assets/scss/**/*.scss'], style, minifycss);
    gulp.watch(['dist/js/**/*.js', '!dist/js/**/*.min.js'], minifyjs);
}