Node/Grunt - Autoprefixer - 如何将配置添加到我的Gruntfile.js以及如何检查支持的浏

Node/Grunt - Autoprefixer - How to add configuration to my Gruntfile.js & how to check supported browsers?

本文关键字：何检查 检查 支持 js 我的 Autoprefixer Grunt 配置 Node 添加 Gruntfile      更新时间：2023-09-26

我想开始使用名为autoprefixer(https://github.com/ai/autoprefixer(的CSS后处理器。

经过一番杂耍，我实际上得到了这个工作，这对我来说非常惊人，因为我是一个绝对的节点、咕噜声和终端初学者。
在自动前缀文档中，它说可以配置要支持的浏览器，作为解释，给出了以下代码行： 

autoprefixer("last 1 version", "> 1%", "ie 8", "ie 7").compile(css);

但是我把这个代码放在哪里呢？我试图将其粘贴到我的 Gruntfile 底部但没有成功。该文件如下所示：

module.exports = function (grunt) {
    grunt.initConfig({
        autoprefixer: {
            dist: {
                files: {
                    'build/style.css': 'style.css'
                }
            }
        },
        watch: {
            styles: {
                files: ['style.css'],
                tasks: ['autoprefixer']
            }
        }
    });
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

我也尝试像这样添加它：

autoprefixer: {
    options: {
      browsers: ["last 10 version", "> 1%", "ie 8", "ie 7"]
    },
    dist: {
        files: {
            'build/style.css': 'style.css'
        }
 },

这肯定会对 CSS 输出产生影响，但我不确定它是否正确？

另外，当我在命令行中键入autoprefixer -i以检查我的配置时，输出是-bash: autoprefixer: command not found .grunt-autoprefixer -i也是如此.我该如何解决这个问题？我很想看看我支持的版本。
另一种变化是这样做：

inspect = autoprefixer("last 1 version").inspect();
console.log(inspect);

但是，同样，将此代码放在哪里？

您需要全局安装自动前缀程序才能具有autoprefixer命令：

sudo npm install -g autoprefixer
autoprefixer -i

现在你可以使用项目文件夹中的自动前缀二进制文件，而无需全局安装自动前缀器(不要忘记将 grunt-autoprefixer 更新到 v0.4.1(。

在这里您可以找到browsers选项说明。选项可以是特定于目标或任务的，特定于目标的选项可以覆盖特定于任务的选项。

相关文章：