css - Gulp CSS 任务不会覆盖现有的 CSS

Question

var paths = {
 css: './public/apps/user/**/*.css'
}

var dest = {
 css: './public/apps/user/css/'
}

// 缩小并连接所有 css 文件

gulp.task('css', function(){
 return gulp.src(paths.css)
  .pipe(concatCSS('style.css'))
  .pipe(minifyCSS({keepSpecialComments: 1}))
  .pipe(rename({
        suffix: '.min'
    }))
  .pipe(gulp.dest(dest.css))
});

当我第一次运行该任务时，它可以正常编译并且所有更改都在那里。在我更改某些内容并再次运行后，它不会覆盖现有的缩小 css 文件。如果我要删除缩小的 css 并再次运行任务，一切都会完美。有什么见解吗？

Answer 1

尝试设置确切的路径，而不是变量。并不是说它不是一个好习惯，只是尝试不使用它。

此外，在'use strict';您的任务中添加一个，这样您就可以确保您的设置没有严重错误。如果有任何错误，它将为您提供正确类型的错误。

而且，我可以问你为什么在生产构建之前连接你的 CSS 吗？

每个文件连接、缩小等都应该在'build'任务中执行。

Answer 2

在缩小 css 之前，您必须删除缩小版的 css。

为此，您可以使用 gulp-clean

将 gulp-clean 安装为 npm install gulp-clean

var gulp = require('gulp'),
    concat = require('gulp-concat'),
    cleanCSS = require('gulp-clean-css'), // this is to minify css
    clean = require('gulp-clean'), //this is to delete files
gulp.task('del-custom-css', function(){
  return gulp.src('./static/custom/css/custom.min.css',{force: true})
  .pipe(clean())
});
gulp.task('minify-custom-css', ['del-custom-css'], function(){
  return gulp.src(['./static/custom/css/*.css'])
  .pipe(concat('custom.min.css'))
  .pipe(cleanCSS())
  .pipe(gulp.dest('./static/custom/css'))
});

希望能帮助到你。