2014-10-31 47 views
1

我想设置一个吞噬任务来自动处理rem单元并添加一个像素后备。 这里是我的gulfile.jsgulp 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%))工作正常。

末编辑

+0

不会从原来的问题相切关闭,但IMO这不是你应该使用taskrunner的。你完全可以,但你使用SASS或更少?为什么不使用为你做的[mixin](http://css-tricks.com/snippets/css/less-mixin-for-rem-font-sizing/)? – aug 2014-11-01 00:38:54

+0

我只是测试一些事情,看看它是否会改善工作流程。我同意用Sass做这件事会更好。编写函数来转换任何css属性值很容易。对于我所理解的,使用Less就必须将其绑定到属性(又名字体大小等)。我不得不在工作中少工作,部分工作是更新尚未用预处理器构建的网站。我也发现,为了这种事情而写CSS而不是mixin是非常自由的。 – 2014-11-02 12:21:18

+0

啊,这是完全有道理的。无论哪种方式感谢分享:) – aug 2014-11-02 19:30:14

回答

0

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