Gulp sourcemaps + different CSS preprocessors?

Question

Here's a simplified version of the task I'm using:

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')

(This is Coffeescript, but the Javascript is almost identical. I can provide the JS if the above is difficult to parse.)

When running the above, gulp-sourcemaps throws:

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)

In other words, it's looking for Bootstrap's files in the Font Awesome directory. I've tried using gulp-if instead of gulp-filter, but that also fails with the same error.

What's the right way to write this task?

Why are you mixing scss and less? Since both Font-Awesome and Bootstrap have both scss and less available, it would be easier to pick one preprocessr. — Luís Cruz, Oct 22 '14 at 16:24
Simplified example. Other vendor tools provide only one or the other. — knite, Oct 22 '14 at 18:49
do you have a working solution yet? the different vendors are exactly why I want that too — The Vojtisek, Mar 31 '17 at 21:44

score 0 · Answer 1 · answered Mar 31 '17 at 23:54

I managed to write a gulpfile.js that takes care of whatever styles my project contains (.scss, .less, .css). All neccessary files are compiled into css, then all is automatically prefixed, minimalized and concated into 1 file. All with their 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
    }));
});

Gulp sourcemaps + different CSS preprocessors?

1 Answers1