PostcssをGulpで使用する方法

postcss and gulp：CSS処理の強力な組み合わせ

このチュートリアルは、効率的なCSS処理のためにPostCSSをGULPで活用する方法を示しています。 プロジェクトのセットアップ、プラグインのインストール、複数のプラグインの処理、実行順序の理解、一般的な課題への対処について説明します。 ガルプに精通していないことが想定されています

プロジェクトのセットアップ

Gulpがインストールされたプロジェクトフォルダーがあることを確認してください

1. 2つのサブフォルダーを作成します：
（生のcssの場合）および
2. （処理されたCSSの場合）。

   initial finalインストール

   ：

3. gulp-postcss

   フォルダー構造はこれに似ている必要があります

   <code class="language-bash">npm install gulp-postcss --save-dev</code>

プラグインのインストールと使用

<code>my-project/
├── initial/
│   └── style.css
└── final/
└── gulpfile.js
└── package.json
└── node_modules/</code>

：から始めましょう

インストール：postcss-short-color

1. update

   ：

   <code class="language-bash">npm install postcss-short-color --save-dev</code>

2. gulpfile.jswithを作成します：

   <code class="language-javascript">const gulp = require('gulp');
   const postcss = require('gulp-postcss');
   const shortColor = require('postcss-short-color');
   
   gulp.task('css', () => {
     return gulp.src('initial/*.css')
       .pipe(postcss([shortColor]))
       .pipe(gulp.dest('final'));
   });</code>

実行

initial/style.css複数のプラグインを使用して作業します

<code class="language-css">section {
  color: white black;
}</code>

gulp css生産性が向上するには、複数のプラグインを使用します。 追加しましょう final/style.css

<code class="language-css">section {
  color: white;
  background-color: black;
}</code>

インストール：

変更postcss-short：postcss-cssnext autoprefixer

1. プラグインの実行注文

   <code class="language-bash">npm install autoprefixer postcss-short postcss-cssnext --save-dev</code>

配列内のプラグインの順序が重要です。 誤った注文は、予期しない結果につながる可能性があります。 最適なシーケンスを見つけるための実験とテスト。

2. gulpfile.js結論

   <code class="language-javascript">const gulp = require('gulp');
   const postcss = require('gulp-postcss');
   const autoprefixer = require('autoprefixer');
   const cssnext = require('postcss-cssnext');
   const short = require('postcss-short');
   
   gulp.task('css', () => {
     const plugins = [
       short,
       cssnext,
       autoprefixer({ browsers: ['> 1%'], cascade: false }),
     ];
     return gulp.src('initial/*.css')
       .pipe(postcss(plugins))
       .pipe(gulp.dest('final'));
   });</code>

このチュートリアルは、PostCSSをGulpで使用するための基盤を提供します。 膨大なPostCSSプラグインエコシステムを調べて、CSSワークフローを強化します。 最適な結果を得るには、プラグインの実行注文を注意深く検討することを忘れないでください。

（元のリクエストに従って、画像がここに挿入されます。画像を表示できないため、元の入力からの画像URLは出力で使用されます。

以上がPostcssをGulpで使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。