So verwenden Sie Postcss mit Schluck

Postcss und Gulp: Eine leistungsstarke Kombination für die CSS -Verarbeitung

Dieses Tutorial zeigt, wie sie Postcss mit Gulp für eine effiziente CSS -Verarbeitung nutzen können. Wir werden Projekt -Setup, Plugin -Installation, die Behandlung mehrerer Plugins, das Verständnis der Ausführungsreihenfolge und die Bewältigung gemeinsamer Herausforderungen abdecken. Die vorherige Vertrautheit mit Gulp wird angenommen.

Projekt -Setup

1. Stellen Sie sicher

2. Erstellen Sie zwei Unterordner: initial (für RAW CSS) und final (für verarbeitete CSS).

3. installieren gulp-postcss:

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

Ihre Ordnerstruktur sollte dies ähneln:

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

Plugin -Installation und -verbrauch

Beginnen wir mit postcss-short-color:

1. install:

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

erstellen initial/style.css mit:

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

Auslauf gulp css generiert final/style.css:

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

Arbeit mit mehreren Plugins

Verwenden Sie für verbesserte Produktivität mehrere Plugins. Fügen wir postcss-short, postcss-cssnext und autoprefixer:

hinzu

1. install:

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

2. modifizieren Sie 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>

Plugin -Ausführungsreihenfolge

Die Reihenfolge der Plugins im Array ist entscheidend. Eine falsche Bestellung kann zu unerwarteten Ergebnissen führen. Experimentieren und testen, um die optimale Sequenz zu finden.

Schlussfolgerung

Dieses Tutorial bietet eine Grundlage für die Verwendung von Postcss mit Schluck. Entdecken Sie das riesige Postcss -Plugin -Ökosystem, um Ihren CSS -Workflow zu verbessern. Denken Sie daran, die Plugin -Ausführungsreihenfolge sorgfältig zu berücksichtigen, um optimale Ergebnisse zu erzielen.

(Bild wird hier gemäß der ursprünglichen Anforderung eingefügt. Da ich keine Bilder anzeigen kann, würde die Bild -URLs der ursprünglichen Eingabe in der Ausgabe verwendet.)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Postcss mit Schluck. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!