1

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);

しかし、繰り返しますが、このコードをどこに置くのでしょうか?

4

2 に答える 2

3

autoprefixer次のコマンドを実行するには、autoprefixer をグローバルにインストールする必要があります。

sudo npm install -g autoprefixer
autoprefixer -i
于 2013-10-24T16:32:41.523 に答える
2

これで、Autoprefixer をグローバルにインストールしなくても、プロジェクト フォルダーから Autoprefixer バイナリを使用できるようになりました (grunt-autoprefixer を v0.4.1 に更新することを忘れないでください)。

ここbrowsersにオプションの説明があります。オプションはターゲット固有またはタスク固有にすることができ、ターゲット固有のオプションはタスク固有をオーバーライドできます。

于 2013-11-13T11:31:35.640 に答える