title: How to make minifying and concating different css files only after converting scss to css using gulp?
body: <p>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? </p>
  
  <h2>My gulp code is like this</h2>
  
  <pre><code>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', () =&gt; {
    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'));
  </code></pre>
  
  <p>I have attached screen shoot of gulp running and fininishing time too</p>
  
  <p><a href="https://i.stack.imgur.com/nGoZb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nGoZb.jpg" alt="enter image description here"></a></p>