设置Gulpfile来编译LESS和SASS文件

Question

我想知道是否有人能指出我正确的方向：

我正在尝试使用SASS文件扩展一个Less构造的Bootsrap主题（客户端要求） - 这个想法是随着时间的推移主题模块文件将被转换为Less - 但是为了快速，这是我需要构建的开始。我是Gulp的新手，以前是Grunt的男人。

我网站的结构如下 -

我正在努力学习如何创建gulp文件来编译Less Files和SASS文件 - 到目前为止我已经有了以下内容 -

elixir(function (mix) {
    mix
        .sass(?),
        .less(),

有人能指出我正确的方向吗？

Answer 1

由于gulp如何工作，这是不可能的。

将其视为流。您通过管道传递数据，每个管道将被处理并传递给下一个管道。

那么，这将如何适用于您的案件？答：不会。

想象一下，你得到你的sass文件，将它们编译成css，现在，是什么？

你不能这样做！

所以，一些替代方案：

• 您可以创建两个不同的任务。然后根据您的需要运行异步或同步。为此，创建另一个调用这两个任务的任务。

• 或者您创建一个运行两个编译器的任务。同样，您可以执行此同步或异步。取决于您的需求。

奖金（使用承诺提出的解决方案）：

var Q = require( 'q' );

gulp.task( 'compile', function ( cb ) {
  var lessDefer = Q.defer(),
      sassDefer = Q.defer(),
      deferArray = [ lessDefer, sassDefer ];
  gulp.src( lessSrc )
      .pipe( less( settings ) )
      .on( 'error', function( err ){
        lessDefer.reject( err );
      })
      .pipe( gulp.dest( lessDst ) )
      .on( 'end', function() {
        lessDefer.resolve();
      });
  gulp.src( sassSrc )
      .pipe( sass( settings ) )
      .on( 'error', function( err ){
        sassDefer.reject( err );
      })
      .pipe( gulp.dest( sassDst ) )
      .on( 'end', function() {
        sassDefer.resolve();
      });
  Q.all( deferArray )
    .done( function () {
      // All good, notify task end
      cb();
    })
    .catch( function( err ) {
      // Deal with error
      cb( err );
    });
});