Question

我正在尝试设置gulp任务来自动处理rem单元并添加像素后备。这是我的gulfile.js：

 // 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

由于gulp-pixrem，任务现在正在运行并将rems转换为像素回退。我似乎无法启用的是切换默认根值。 .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%))工作正常。

结束修改

Answer 1

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

gulp postcss rem让像素回落

1 个答案: