如何将Autoprefixer与Node.js一起使用

时间:2015-08-01 21:16:13

标签: node.js autoprefixer

根据官方文件,这很简单:

用法:

var autoprefixer = require('autoprefixer-core');
var postcss      = require('postcss');

postcss([ autoprefixer ]).process(css).then(function (result) {
    result.warnings().forEach(function (warn) {
        console.warn(warn.toString());
    });
    console.log(result.css);
});

但是,我对确定要与css使用的对象process()的具体操作感到困惑。我尝试使用fs.readfile()的结果,但它似乎并没有起作用。我的服务器模块相当大,在这里省略代码可能会更好。我真的只需要知道如何为流程函数创建css

2 个答案:

答案 0 :(得分:2)

我想我已经解决了你的问题。

您希望将文件读入名为css的变量,并将css传递给process()。问题在于您使用哪种方法来读取文件的内容。

目前,您使用异步的fs.readFile。您正在使用它,就像它是同步的一样。因此,您有两种选择:

按照预期的方式使用fs.readFile,即:异步:

var autoprefixer = require('autoprefixer-core');
var postcss      = require('postcss');

function processCSS(file, cb){

  fs.readFile(file, {encoding: String}, function (err, css) { 
      if (err) throw err;
      postcss([ autoprefixer ]).process(css).then(function (result) {
          result.warnings().forEach(function (warn) {
              console.warn(warn.toString());
          });
          console.log(result.css);
          cb( result.css );
      });
  });

}

如果您决定使用此功能,那么了解promises可能是一个好主意,它可以清除异步代码。

或者代替fs.readFile,您可以使用fs.readFileSync来同步读取文件。根据文件的大小,这不是最好的主意。

var autoprefixer = require('autoprefixer-core'); 
var postcss      = require('postcss');

function processCSS(file, cb){

  var css = fs.readFileSync(file, {encoding: String});
  postcss([ autoprefixer ]).process(css).then(function (result) {
      result.warnings().forEach(function (warn) {
          console.warn(warn.toString());
      });
      console.log(result.css);
      cb( result.css );
  });

}

希望这有帮助!

答案 1 :(得分:0)

答案是:css fs.readFile()的结果。

我的愚蠢错误。我尝试使用它们在文档中显示的函数,并在postcss()函数(异步)完成之前将其结果返回给文件服务器处理。