Gulp sourcemaps + 不同的 CSS 预处理器？答案

【问题标题】：Gulp sourcemaps + different CSS preprocessors?Gulp sourcemaps + 不同的 CSS 预处理器？
【发布时间】：2014-10-14 01:26:59
【问题描述】：

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

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，但同样的错误也失败了。

编写此任务的正确方法是什么？

【问题讨论】：

你为什么混合scss和less？由于 Font-Awesome 和 Bootstrap 都有 scss 和 less 可用，因此选择一个预处理器会更容易。
简化示例。其他供应商工具仅提供其中一种。
您有可行的解决方案吗？不同的供应商正是我想要的原因

标签： css gulp gulp-less gulp-sass gulp-sourcemaps

【解决方案1】：

我设法编写了一个 gulpfile.js 来处理我的项目包含的任何样式（.scss、.less、.css）。所有必要的文件都被编译成css，然后所有的文件都会自动加前缀，最小化并连接到1个文件中。都有他们的源图。

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
    }));
});

【讨论】：