javascript - 仅在使用 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 运行和完成时间的屏幕截图

标签： javascripthtmlcsssassgulp

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

});