Question

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

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

gulpfile.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配置中缺少什么指令？我是新手，所以不确定它的所有功能以及如何正确遍历目录。

任何帮助表示赞赏

Answer 1

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

当@import存在时，gulp-less会生成空白的css文件

1 个答案: