css - Gulp sourcemaps + 不同的 CSS 预处理器？

Question

这是我正在使用的任务的简化版本:

g = require 'gulp'
$ = require('gulp-load-plugins')()

g.task 'vendor:styles', ->
    sass_filter = $.filter('*.scss')
    less_filter = $.filter('*.less')

    g.src(['vendor/font-awesome-4.2.0/scss/font-awesome.scss', 'vendor/bootstrap-3.2.0/less/bootstrap.less'])
        .pipe $.sourcemaps.init()
        .pipe(sass_filter).pipe($.sass()).pipe(sass_filter.restore())
        .pipe(less_filter).pipe($.less(strictMath: true)).pipe(less_filter.restore())
        .pipe $.concat('vendor.css')
        .pipe $.sourcemaps.write('./maps')
        .pipe g.dest('.tmp/styles/vendor')

(这是Coffeescript，但Javascript几乎一模一样，如果上面难以解析，我可以提供JS。)

运行上面的代码时，gulp-sourcemaps 抛出:

gulp-sourcemap-write: source file not found:/Users/pikeas/Documents/code/pypjs/crypto/front/merged/vendor/font-awesome-4.2.0/scss/normalize.less
...(repeated x20, for print.less, carousel.less, etc)

换句话说，它在 Font Awesome 目录中寻找 Bootstrap 的文件。我试过使用 gulp-if 而不是 gulp-filter，但同样的错误也失败了。

写这个任务的正确方法是什么？

Answer 1

我设法编写了一个 gulpfile.js 来处理我的元素包含的任何样式(.scss、.less、.css)。所有必需的文件都被编译成 css，然后自动添加前缀、最小化并连接到 1 个文件中。都有他们的 sourcemaps。

const sass = require('gulp-sass');
const less = require('gulp-less');
const gulpIf = require('gulp-if');
const browserSync = require('browser-sync').create();
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
const cssnano = require('cssnano'); 
const autoprefixer = require('autoprefixer');
const concat = require('gulp-concat');

gulp.task('styles', function() {
  return gulp.src(['assets/libs/**/*.less', 'assets/libs/**/*.scss', 'assets/libs/**/*.css', '!assets/libs/all.css'])
    .pipe(sourcemaps.init())
    .pipe(gulpIf('**/*.less', less().on('error', onErrorLogContinue), gulpIf('**/*.scss', sass().on('error', onErrorLogContinue))))
    .pipe(postcss([
        autoprefixer({browsers: ['last 2 versions']}),
        cssnano(),
    ]))
    .pipe(concat('all.css',{newLine: ''}))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('assets/libs'))
    .pipe(browserSync.reload({ 
      stream: true
    }));
});