javascript - 如何实现 Punch Autoprefixer 预处理器？

Question

我想实现一个 autoprefixer Punch 的预处理器静态站点生成器。

但是，按照 Punch 的说法，我不确定这是否符合编译器、压缩器等条件。我已经尝试了上述所有方法，但都无济于事。

这是我最近尝试让一切工作:

./autoprefixer.js

module.exports = {
    input_extensions: [".css"],
    force_compile: true,
    compile: function(input, filename, callback){
        return callback(null, "*{color: red;}");
    }
};

---

config.json

...
    "plugins": {
        "compilers": {
            ".css": "punch-sass-compiler",
            ".css": "autoprefixer"
        }
    }
...

---

结果

/home/peter/projects/website/node_modules/punch/lib/asset_bundler.js:62
                        if (compiler && compiler.input_extensions.indexOf(template_extension) > -1)
                                                                 ^
TypeError: Cannot read property 'indexOf' of undefined
  at /home/peter/projects/website/node_modules/punch/lib/asset_bundler.js:62:45
  at /home/peter/projects/website/node_modules/punch/lib/template_handler.js:119:11
  at fs.js:334:14
  at /home/peter/projects/website/node_modules/punch/node_modules/fstream/node_modules/graceful-fs/graceful-fs.js:42:10
  at FSReqWrap.oncomplete (fs.js:95:15)

谁能引导我朝着正确的方向前进？

Answer 1

目前看来，punch 编译器只能从不同的扩展名(比如 .mycss 或 .less)编译。使用它，您就快完成了:

在 module.exports 中，input_extensions: 必须设置为您想要的扩展名(不是 .css)，例如[".mycss"].

"plugins": {
    "compilers": {
        ".css": "punch-sass-compiler",
        ".css": "autoprefixer"
    }
}

真的很奇怪，因为您定义了同一个键两次。删除 punch-sass-compiler 行。如果您想调用另一个编译器，只需在您的编译器代码中require它的模块，调用另一个编译器并根据您的喜好修改提供的输出。

Punch minifiers 不适合您的目标，因为它们只参与生产(使用 punch g)，而不是在开发时。