Gulp CSS 任务不会覆盖现有的 CSS答案

【问题标题】：Gulp CSS task not overwriting existing CSSGulp CSS 任务不会覆盖现有的 CSS
【发布时间】：2017-01-26 09:43:06
【问题描述】：

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 并再次运行任务，一切都会完美。有什么见解吗？

【问题讨论】：

如果您尝试删除 rename({ suffix: '.min' } .... 因为它正在重命名您的文件并将 .min ..
看起来它在没有后缀的情况下工作。 :/ 那更奇怪了，有什么解释吗？
因为如果你把后缀它创建一个新文件！ ??????
但它第一次创建带后缀的文件，效果很好，下次它应该覆盖该文件。它不会再次创建新文件：example.min.min.css ... :)

标签： css gulp gulp-concat gulp-minify-css

【解决方案1】：

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

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

请问，为什么要在生产构建之前连接 CSS？

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

【讨论】：

Noup，切换到确切路径而不是变量，仍然没有运气。还有其他想法吗？

【解决方案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'))
});

希望对你有帮助。

【讨论】：