如何仅在使用 gulp 将 scss 转换为 css 后缩小和合并不同的 css 文件？

Question

我正在尝试使用 gulp 将我的 scss 文件转换为 css 文件。在写完 scss 之后很容易转换为 css。现在我想缩小这个 css 并想保存在其他文件夹中，比方说 'min' 文件夹。在 min 文件夹中还有其他 css 个文件。现在我想将那些 css 文件合并为单个文件并保存在 'dist' 文件夹中。一切都表现良好，但在运行时 gulp。但是，在我的 html 页面上使用连接的 css 文件时，所有 css 都没有出现。所以我已经从 scss 检查了我编译的 css 但最新的 wring 代码在那里但不是在缩小和连接的文件中。最后我注意到缩小和连接首先执行，最后是 scss 编译。因此缺少最终 css 代码。有什么办法可以解决这个问题吗？

我的gulp代码是这样的

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'));

我附上了 gulp 运行的屏幕截图和结束时间

Answer 1

我认为您的 css 任务（sass、minify-css 和 cssConcat）不应运行并行。这同样适用于 JS

尝试更改此部分

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

到

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'));

});

如何仅在使用 gulp 将 scss 转换为 css 后缩小和合并不同的 css 文件？

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

html

javascript

css

sass

gulp

我的gulp代码是这样的