Gulp下的手写笔：全局舍入所有小数

Question

我使用插件 npm gulp-stylus 来生成我的样式表。由于 Internet Explorer 不会低于 3 位小数（编辑 16/11/2015：2 位小数！）我会四舍五入我所有的数字 globally :

// => code output :
width: 83.33%;

使用 gulp-sass 我直接从 Gulpfile.js 文件中添加了一个选项，如下所示：

// Gulpfile.js (code for Sass)
return sass(source + '/Styles', {
      style: 'compressed',
      precision: 2 // it's here
  })

但我不知道如何gulp-in Stylus 因为插件页面不是很明确...我只知道单独做:

.test
  //width (100% / 12 * 10)
  width floor(100% / 12 * 10, 2) // or round(), or ceil()... according to needs

Answer 1

gulp-stylus 中没有这样的设置。但是你可以为它使用 postcss 插件。使用正则表达式模式处理浮点数 /(\d+?.\d{3,})(%|em|px)/gi

// Load the PostCSS module.
var postcss = require('postcss');
var post    = require('gulp-postcss');

// Define the plugin.
var precision = postcss.plugin('postcss-precision', function() {
  var longTest = /(\d+?\.\d{3,})(%|em|px)/gi;

  return function(style) {
    style.eachDecl(function(decl) {


      if (! decl.value || longTest.test(decl.value)) {
        // Grab array of matches.
        var matches = longTest.exec(decl.value + '');

        // We'll assume there's one.
        var value = matches[1];

        // Round two decimal places.
        var rounded = Math.round(parseFloat(value) * 100) / 100;

        // Change the value in the tree.
        decl.value = decl.value.replace(value, rounded.toString());
      }
    });
  };
});

// Make PostCSS aware of this plugin.
postcss().use(precision);

gulp.task('css', function() {
  return gulp.src([
      'src/**/*.css'
    ])
    .pipe(post([precision()]))
    .pipe(gulp.dest('build/css'));
});

gulp.task('default', ['css']);

Gulp下的手写笔：全局舍入所有小数

Stylus under Gulp: round up all decimal globally

gulp

stylus