PostcssをGulpで使用する方法

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

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

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

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

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

   initial finalインストール

   ：

3. gulp-postcss

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

   npm install gulp-postcss --save-dev

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

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

：から始めましょう

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

1. update

   ：

   npm install postcss-short-color --save-dev

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

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

実行

<

initial/style.css

複数のプラグインを使用して作業します

section {
  color: white black;
}

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

section {
  color: white;
  background-color: black;
}

インストール：

変更postcss-short：postcss-cssnext autoprefixer

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

   npm install autoprefixer postcss-short postcss-cssnext --save-dev

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

2. gulpfile.js結論

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

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

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

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