オートプレフィクサーを使う最も簡単な方法は？

Question

私がしたいことは、単純に私のCSSを見たり、自動プレフィックスを付けるツールがあることです。私はpleeease.ioを使用していた以前は、それは後に、私は何をする必要があるか、NPMを通してそれをインストールし、私のような初心者のための非常に簡単であること（.pleeeaserc）、そしてその後

pleeease watch 

を、私はできませんオプションファイルを作成することです私のCSSに焦点を当て、私は自分のCSSファイルに変更するたびに、処理され出力されます。

残念ながら著者が、私は私の新しいサーバー上の

npm install pleeease 

を行うとき、私はエラーの多くを持って、インストールが失敗し、それを維持し停止しているようです。

私はpleeaseがその依存関係の1つとして統合されていると信じているautoprefixerを直接使用する方法を学ぶべき時だと思います。

しかし、私は学習曲線が私にはあまりにも多すぎることがわかります：オートプレフィクサーを使うためには、私はPostCSSを学ぶ必要があります。 PostCSSは通常GruntやGulpで動作します。タスクランナーを使用するには、npmとnode.jについて何か知る必要があります。これらは私の時間を大幅に節約できる便利なツールであることを知っています。私はオートプレフィックス以外にも多くのことを行うことができます。私は後で深く掘り下げていくつもりですが、私の現在のプレッシャーの下では、PostCSSに関するすべての文書や記事を消化することなく、オートプレフィクサーを稼働させるためのプレースメントのようなショートカットが本当に必要です。私はscssフォルダの下に

[postcss|autoprefixer|something else] watch 

ような何かを行うことができることを望むと私は変更を加えるとinput.scssを保存するたびに、output.scssファイルが生成されます。

1）明確にするために、PostCSSとPostCSS-cliの関係は何である：

は、だから私は、できるだけ簡単autoprefixer作業をPostCSSを学んおよび/または得る上で私の努力の一部では、いくつかの質問がありますか？後者は前者に依存しているか、それを含むか？

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

3）私はnpm install -g postcss-cliでしたが、私はまだpostcssコマンドを使用できません。どうしましたか？

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

5）npm install postcssとnpm install grunt-postcssの違いは何ですか？

Answer 1

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

はい、あなたは数分で起動して実行得ることができ、グッと簡単にこれを行うことができます。多くの「開始」ウォークスルーがオンラインにあります。 autocrefixerを使うには、PostCSSについて何も知る必要はありません。以下のこの作業では、.scssファイルを保存するたびに、あなたのすべてのsassをコンパイルし、autoprefixerを実行し、対応する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')); 
    }); 

Answer 2

1）、PostCSSとPostCSS-CLIの間の関係は何ですか？後者は前者に依存しているか、それを含むか？

質問5の答えは、この質問に部分的に答えます。もう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）ファイルの変更を監視し、自動的にコンパイルするために、私はPostCSSとともに兵卒やガルプのようなタスクのランナーを使用する必要があります？

いいえ。

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

あるいは、上記の私の例に見られるようpackage.jsonにスクリプトとして追加します。PostCSS-CLIは、これを行うことができます。次に、あなただけの実行：

npm run watch 

5）postcssをインストールして、うなり声-postcssをインストールNPM NPMの違いは何ですか？

これ以降はギャルプに使用され、前者はgrunt-postcss、postcss-brunchなどをビルドするために使用されます。

あなたはコマンドラインでpostcss-cliでautoprefixer使用するには：

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

これはthe docsに記載されているとフォローするのは簡単です。