Cara menggunakan postcss dengan gulp

postcss dan gulp: gabungan kuat untuk pemprosesan CSS

Tutorial ini menunjukkan cara memanfaatkan postcss dengan Gulp untuk pemprosesan CSS yang cekap. Kami akan merangkumi persediaan projek, pemasangan plugin, mengendalikan pelbagai plugin, memahami perintah pelaksanaan, dan menangani cabaran biasa. Kebiasaan sebelum dengan Gulp diandaikan.

Persediaan Projek

1. Pastikan anda mempunyai folder projek dengan dipasang Gulp.

2. Buat dua subfolder: initial (untuk CSS mentah) dan final (untuk CSS diproses).

3. Pasang

   : gulp-postcss

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

struktur folder anda harus menyerupai ini:

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

pemasangan dan penggunaan plugin

mari kita mulakan dengan

: postcss-short-color

1. Pasang:

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

2. UPDATE

   : gulpfile.js

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

create

dengan: initial/style.css

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

running

akan menjana gulp css: final/style.css

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

Bekerja dengan pelbagai plugin

Untuk produktiviti yang dipertingkatkan, gunakan pelbagai plugin. Mari tambahkan

, postcss-short, dan postcss-cssnext: autoprefixer

1. Pasang:

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

2. Ubah suai

   : 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>

Pesanan pelaksanaan plugin

Perintah plugin dalam array adalah penting. Pesanan yang tidak betul boleh menyebabkan hasil yang tidak dijangka. Percubaan dan ujian untuk mencari urutan yang optimum.

Kesimpulan

Tutorial ini menyediakan asas untuk menggunakan PostCSS dengan Gulp. Terokai ekosistem plugin PostCSS yang luas untuk meningkatkan aliran kerja CSS anda. Ingatlah dengan teliti mempertimbangkan pesanan pelaksanaan plugin untuk hasil yang optimum.

(imej akan dimasukkan di sini, mengikut permintaan asal. Oleh kerana saya tidak dapat memaparkan imej, URL imej dari input asal akan digunakan dalam output.)

Atas ialah kandungan terperinci Cara menggunakan postcss dengan gulp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!