When attempting to convert my scss files to css files using gulp, I encountered an issue. After writing the scss code, it is easily converted to css. However, I wanted to minify this css and save it in a different folder called 'min'. Within the 'min' folder, there are other css files as well. I then attempted to concatenate these css files into a single file and save it in the 'dist' folder. Everything seemed to be functioning correctly during the gulp run. However, when I used the concatenated css file on my html page, not all the css styles were rendering. Upon checking the compiled css from scss, I noticed that the latest written code was present there but not in the minified and concatenated file. It turns out that the minification and concatenation processes were being performed first, while the scss compiling was done last. This led to inconsistencies in the final css code. Is there a way to correct this issue?
This is an example of my gulp 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', () => {
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 also attached a screenshot of the gulp running and finishing process.