1

私がやりたいことは、css を監視して自動プレフィックスできるツールを用意することだけです。以前はpleeease.ioを使用していましたが、私のような初心者にとっては非常に簡単です.npmを介してインストールした後、オプションファイル（.pleeeaserc）を作成してから実行する必要があります

pleeease watch

その後、CSS に集中できます。CSS ファイルに変更を加えるたびに、処理されて出力されます。

残念ながら、私がそうするとき、作者はそれを維持するのをやめたようです

npm install pleeease

新しいサーバーで多くのエラーが発生し、インストールに失敗しました。

autoprefixer を直接使用する方法を学ぶ時が来たと思います。これは、依存関係の 1 つとして統合されていると思います。

ただし、学習曲線は私には少し多すぎることがわかりました。autoprefixer を使用するには、PostCSS を学ぶ必要があります。PostCSS は通常、Grunt または Gulp で実行されます。タスク ランナーを使用するには、npm と node.js についてある程度知っておく必要があります。これらはすべて、多くの時間を節約できる便利なツールであることを知っています。それらを使用すると、自動接頭辞以上のことができます。後で詳しく説明しますが、現在のプレッシャーの下では、PostCSS に関するすべてのドキュメントや記事を消化することなく、オートプレフィックスを起動して実行するために、pleeease のようなショートカットが本当に必要です。次のようなことができるといいのですが

[postcss|autoprefixer|something else] watch

私のscssフォルダーの下にあり、に変更を加えて保存するたびにinput.scss、output.scssファイルが生成されます。

そこで、PostCSS を学習したり、オートプレフィクサーの作業をできるだけ簡単にしたりするための努力の一環として、いくつか質問があります。

PostCSS1) 明確にするために、との関係は何PostCSS-cliですか? 後者は前者に依存しているか、または前者を含んでいますか?

postcss2) 後者をインストールすると、コマンドライン インターフェイスでコマンドを使用できるようになるだけですか?

3) コマンドを実行しnpm install -g postcss-cliたのにまだpostcssコマンドを使用できません。何が間違っていましたか?

4) ファイルの変更を監視して自動的にコンパイルするには、Grunt や Gulp などのタスク ランナーを PostCSS と共に使用する必要がありますか?

npm install postcss5)との違いは何npm install grunt-postcssですか?

4

2 に答える 2

1

"What I want to do is simply have a tool that can watch and auto prefix my css."

はい、これは gulp を使用して簡単に実行できます。これは数分で起動して実行できます。オンラインには、「はじめに」チュートリアルがたくさんあります。autoprefixer を使用するために、PostCSS について何も知る必要はありません。以下のこのタスクは、すべての sass をコンパイルし、autoprefixer を実行し、.scss ファイルを保存するたびに対応する CSS ファイルを出力します。

gulpfile.js

    var gulp = require('gulp'),
        $ = require('gulp-load-plugins')();


    gulp.task('watch', () => {
        gulp.watch('src/**/*.scss', ['sass']);
    });

    gulp.task('sass', () => {
        return gulp.src('src/**/*.scss')
            .pipe($.sass())
            .pipe($.autoprefixer())
            .pipe(gulp.dest('dest'));
    });
于 2016-07-17T05:36:00.800 に答える
0

1) 明確にするために、PostCSS と PostCSS-cli の関係は何ですか? 後者は前者に依存しているか、または前者を含んでいますか?

質問 5 への回答は、postcss が何に使用されるかについて、この質問に部分的に回答しています。もう 1 つは、コマンド ラインから実行するためのものです。PostCSS-cli はバイナリで、もう 1 つは Javascript で記述された NPM パッケージです。

2) 後者をインストールすると、コマンドライン インターフェイスで postcss コマンドを使用できるようになるだけですか?

はい。

3) npm install -g postcss-cli を実行しましたが、まだ postcss コマンドを使用できません。何が間違っていましたか?

次のようにローカルにインストールすることをお勧めします。

npm i postcss-cli --save-dev

次に、次のように使用できます。

node_modules/postcss-cli/bin/postcss -c config.json

package.jsonまたは、次のようにスクリプトを追加します。

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node_modules/postcss-cli/bin/postcss -c config.json",
    "watch": "node_modules/postcss-cli/bin/postcss -c config.json -w",
    "minify": "node_modules/postcss-cli/bin/postcss -c config-minify.json"
},

注:スクリプト セクションでは、相対パスは必要ありません。のローカル使用法を示すためにそれらを入れましたpostcss-cli。あなたは単に使用することができます：

...
"build": "postcss -c config.json"
...

その後、次を実行できます。

npm run build

4) ファイルの変更を監視して自動的にコンパイルするには、Grunt や Gulp などのタスク ランナーを PostCSS と共に使用する必要がありますか?

いいえ。PostCSS-cli はこれを行うことができます:

node_modules/postcss-cli/bin/postcss -c config.json -w

package.jsonまたは、上記の例で見られるように、スクリプトとして追加します。次に、実行するだけです：

npm run watch

5) npm install postcss と npm install grunt-postcss の違いは何ですか?

後者は gulp に使用され、前者は buildなどgrunt-postcssに使用されます。postcss-brunch

コマンドラインでautoprefixer を使用するpostcss-cliには、次のようにします。

postcss --use autoprefixer --autoprefixer.browsers "> 5%" -o output.css input.css

これはドキュメントにリストされており、従うのは非常に簡単です。

于 2016-08-04T00:29:55.213 に答える