How to make minifying and concating different css files only after converting scss to css using gulp?

Question

Im trying to converting my scss files to css file using gulp. After writing scss its easily convering to css. Now i want to minify this css and want to save on some other folder, lets say 'min' folder. Inside min folder there are other css files too. Now i want to concatinate those css file to single file and want to save on 'dist' folder. Everything is well performing but while runing gulp. But while using concatinated css file to my html page all css are not coming there. So i have checked my compiled css from scss but latest wring code come there but not in minified and concatinated file. At the end i have noticed that minified and concating performing first and scss compling is at last. So there is lack in final css code. Is there any way to making this right?

My gulp code is like this

var gulp = require("gulp");
var sass = require("gulp-sass");
const cleanCSS = require('gulp-clean-css');
var concat = require('gulp-concat');
var browserSync = require('browser-sync').create();

gulp.task('sass', function () {
    return gulp.src('./app/sass/style.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./app/css'));
});

gulp.task('minify-css', () => {
  return gulp.src('./app/css/*.css')
    .pipe(cleanCSS({compatibility: 'ie9'}))
    .pipe(gulp.dest('./app/css/min'));
});

gulp.task('cssConcat', function() {
  return gulp.src('./app/css/min/*.css')
    .pipe(concat('all-style.min.css'))
    .pipe(gulp.dest('./app/dist/css'));
});
gulp.task('jsConcat', function() {
  return gulp.src(['./app/js/library/jQuery-3.4.1.min.js', './app/js/*.js', './app/js/script/script.js'])
    .pipe(concat('all-js.min.js'))
    .pipe(gulp.dest('./app/dist/js'));
});
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./app"
        }
    });
});

gulp.task('run', gulp.parallel('sass', 'minify-css', 'cssConcat', 'jsConcat', 'browser-sync'));

gulp.task('watch', function () {
    gulp.watch('./app/sass/*.scss', gulp.series('sass'));
    gulp.watch('./app/css/*.css', gulp.series('minify-css'));
    gulp.watch('.app/css/min/*.css', gulp.series('cssConcat'));
    gulp.watch('./app/js/*.js', gulp.series('jsConcat'));
    gulp.watch('./app', gulp.series('browser-sync'));

});

gulp.task('default', gulp.parallel('run', 'watch'));

I have attached screen shoot of gulp running and fininishing time too

Answer 1

I think your css task (sass, minify-css and cssConcat) should not run in parallel. The same applies for JS as well

Try changing this part

gulp.task('run', gulp.parallel('sass', 'minify-css', 'cssConcat', 'jsConcat', 'browser-sync'));

to

gulp.task('cssTask', gulp.series('sass', 'minify-css', 'cssConcat'));
gulp.task('run', gulp.parallel(cssTask, 'jsConcat', 'browser-sync'));

gulp.task('watch', function () {
    gulp.watch('./app/sass/*.scss', gulp.series('cssTask'));
    gulp.watch('./app/js/*.js', gulp.series('jsConcat'));
    gulp.watch('./app', gulp.series('browser-sync'));

});