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个文件。全部都有他们的源图。

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

Gulp源图+不同的CSS预处理器？

1 个答案: