2015-06-22 6 views
0

Я использую LESS с Gulp. Я также использую Autoprefixer plugin, который добавляет все необходимые префиксы поставщика на основе Browserlist. Это очень приятно при создании всех минитипированных файлов для окончательного экспорта.Меньше CSS - добавление префиксов поставщиков с less.js в среде разработки

Моя проблема: когда я тестирую CSS в среде разработки с использованием less.js добавлены префиксы поставщика. Кажется, что префикс auto доступен только для cli. Есть ли способ добавить префиксы поставщика «на лету» с less.js или еще один подключаемый модуль? Я уже пытался запустить prefixfree после less.js но без везения.

+2

Я бы рекомендовал скомпилировать LESS с Gulp для разработки (просмотрите бездействующие файлы для изменений, перекомпилируйте + автоматически обновить страницу, перезагрузите страницу). Таким образом, вы запускаете своего разработчика без накладных расходов less.js и скомпилированы с той же версией LESS, которая поступит в производство. – pawel

+0

@pawel Думаю, я пойду с этим решением. Может быть, полезно удалить накладные расходы из less.js даже в процессе разработки. Не могли бы вы опубликовать это в качестве ответа? – lampshade

ответ

0

Просто проведите поток от gulp-less до автоподатчика, например.

gulp.task('styles', [], function() { 
    return gulp.src('less/*.less') 
     .pipe(gulplLss()) 
     .pipe(postcss([autoprefixer()])) 
     .pipe(gulp.dest('css/')); 
} 

gulp.task('watch', function() { 
    gulp.watch('less/*.less', 'styles'); 
} 

(Это с помощью autoprefixer через postcss инструмент, который теперь рекомендуемого путь до устаревания его autoprefixer линия whould быть:. .pipe(autoprefixer()))

+0

Я использую его так: 'var plugins = [autoprefix, cleancss];' и затем 'gulp.pipe (less ({plugins: plugins})). Является ли это неправильным или устаревшим, как я это делаю, потому что в настоящее время он отлично работает. :) – lampshade

+0

О, я действительно не знал этого. Я бы предпочел использовать один плагин gulp для одной работы, он дает больше контроля над тем, что происходит. Как это выглядит :) –

0

Существует чистое решение внешнего интерфейса (если это то, что вы ищете для). Autoprefixer может работать в среде браузера. Вам не нужно запускать его как плагин Less.

В estFiddle Я запускаю Autoprefixer после компиляции Меньше в CSS и он работает. (Вы можете увидеть исходный код here.)

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

  • Нет связанных вопросов^_^