当 CSS 文件存在时，无@import会生成空白的 CSS 文件

Question

我正在尝试使用 gulp 将一个较少的文件编译为 css。我在另一个项目上工作，但没有在这个项目上工作。

我gulpfile.js中的任务如下所示：

古尔普文件.js

var sourceLess = './app/assets/stylesheets/less';
var sourceJs = './app/assets/javascripts';
var targetCss = './public/css2';
var targetJs = './public/js2';    
// Compile my-bootstrap-theme
gulp.task('css', function() {
gulp.src(sourceLess + '/custom/edgc-styles.less')
    .pipe(less())
    .pipe(gulp.dest(targetCss))
    .pipe(minifyCss())
    .pipe(gulp.dest(targetCss));
});

我的edgc-styles.less文件包括一个@import，而又包括一个@import，如下所示：

//my custom stylsheet
@import "../bootstrap/bootstrap.less";
@import "custom-variables.less";
@import "custom-fonts.less";

在bootstrap.less文件中，它的开头是这样的：

// Core variables and mixins
@import "variables.less";
@import "mixins.less";

在我的输出中，我得到的只是 bootstrap.less 文件开头的注释和之后的空白。

我无法弄清楚如何在gulp（在Windows机器上）中记录错误以查看发生了什么，但假设它在尝试导入variables.less时失败。 这是一个有效的文件，与 bootstrap.less 位于同一目录中。

我在 gulp 配置中缺少什么指令？我是 gulp 的新手，所以不确定它的所有功能以及如何正确遍历目录。

任何帮助表示赞赏

Answer 1

您

似乎正在尝试在同一位置同时生成具有相同文件名的可读 CSS 和同一 CSS 文件的缩小版本。 这将导致两个 gulp.dest 函数的输出相互干扰，并且它们的输出无用。 尝试将它们放置在不同的位置或重命名缩小版本，gulp-rename 包可以帮助您更改流中缩小版本的名称。