gulp postcss rem像素回落

我想設置一個吞噬任務來自動處理rem單元並添加一個像素後備。這裏是我的gulfile.js：gulp postcss rem像素回落

// NPM install gulp gulp-less gulp-watch gulp-plumber gulp-livereload gulp-postcss autoprefixer-core css-mqpacker csswring --save-dev 
// explanation task breakdown: http://stackoverflow.com/questions/23953779/gulp-watch-and-compile-less-files-with-import 
var gulp = require('gulp'); 
var less = require('gulp-less'); 
var watch = require('gulp-watch'); 
var plumber = require('gulp-plumber'); 
var livereload = require('gulp-livereload'); 
var path = require('path'); 
var postcss = require('gulp-postcss'); 
var autoprefixer = require('autoprefixer-core'); 
var mqpacker = require('css-mqpacker'); 
var csswring = require('csswring'); 
var pixrem = require('gulp-pixrem'); 

gulp.task('less', function() { 
    var processors = [ 
    autoprefixer({browsers: ["last 8 version", "> 1%", "ie 9", "ie 8", "ie 7", "ios 6"]}), 
    mqpacker, 
    csswring({ 
     preserveHacks: true, 
     removeAllComments: true 
    }) 
    ]; 
    gulp.src('./style.less') // only compile the entry file 
    .pipe(plumber()) 
    .pipe(less({ 
    paths: ['./','./vendors/', './layouts', './partials/', './overrides/'] 
    })) 
    .pipe(pixrem('10px')) 
    .pipe(postcss(processors)) 
    .pipe(plumber.stop()) 
    .pipe(gulp.dest('./')) 
    .pipe(livereload()); 
}); 
gulp.task('watch', function() { 
    gulp.watch('./**/*.less', ['less']); // Watch all the .less files, then run the less task 
}); 

gulp.task('default', ['watch']); // Default will run the 'entry' watch task

任務現在正在運行和轉換REMS像素回退感謝gulp-pixrem。我似乎無法啓用的事情是切換默認的根值。 .pipe(pixrem('10px'))或.pipe(pixrem({rootvalue: '10px'})不會更改基本單位轉換。

.pipe(pixrem({ rootvalue: '10px' }))實際上返回一個錯誤TypeError in plugin gulp-pixrem Cannot read property '1' of null

編輯

不介意我。

.pipe(pixrem(100%))工作正常。

末編輯

來源

2014-10-31 Yannick Schall

不會從原來的問題相切關閉，但IMO這不是你應該使用taskrunner的。你完全可以，但你使用SASS或更少？爲什麼不使用爲你做的[mixin]（http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/）？ – aug 2014-11-01 00:38:54

我只是測試一些事情，看看它是否會改善工作流程。我同意用Sass做這件事會更好。編寫函數來轉換任何css屬性值很容易。對於我所理解的，使用Less就必須將其綁定到屬性（又名字體大小等）。我不得不在工作中少工作，部分工作是更新尚未用預處理器構建的網站。我也發現，爲了這種事情而寫CSS而不是mixin是非常自由的。 – 2014-11-02 12:21:18

啊，這是完全有道理的。無論哪種方式感謝分享:) – aug 2014-11-02 19:30:14

.pipe（pixrem（100％））工作正常

來源

2014-10-31 19:41:44

gulp postcss rem像素回落

回答

相關問題