Gulp sourcemaps + различные препроцессоры CSS?

Вот упрощенная версия задачи я использую:Gulp sourcemaps + различные препроцессоры CSS?

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, если выше трудно разобрать.).

При выполнении указанных выше, Глоток-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)

другими словами, он ищет файлы Bootstrap в в Потрясающие каталоге шрифтов. Я пробовал использовать gulp-if вместо gulp-filter, но это также терпит неудачу с той же ошибкой.

Каков правильный способ написать эту задачу?

источник

2014-10-14 knite

Почему вы смешивания SCSS и меньше? Поскольку у Font-Awesome и Bootstrap есть как scss, так и менее доступные, было бы проще выбрать один препроцессор. –

Упрощенный пример. Другие инструменты поставщика предоставляют только один или другой. – knite

есть ли у вас рабочее решение? разные продавцы именно поэтому я тоже хочу этого –

Мне удалось написать 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 
 
    })); 
 
});

источник

2017-03-31 23:54:27

Gulp sourcemaps + различные препроцессоры CSS?

ответ

Смежные вопросы