Gulp와 함께 Postcs를 사용하는 방법

postcss and gulp : CSS 처리를위한 강력한 조합

이 튜토리얼은 효율적인 CSS 처리를 위해 GULP와 PostCS를 활용하는 방법을 보여줍니다. 프로젝트 설정, 플러그인 설치, 여러 플러그인 처리, 실행 순서 이해 및 일반적인 문제 해결을 다룰 것입니다. Gulp에 대한 사전 친숙 함이 가정됩니다 프로젝트 설정

GULP가 설치된 프로젝트 폴더가 있는지 확인하십시오

두 개의 하위 폴더를 만듭니다.

install
1. :

폴더 구조는 다음과 비슷해야합니다
2. 플러그인 설치 및 사용량

   initial : final로 시작하겠습니다

3. 설치 :

   gulp-postcss

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

   update
:

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

를 만들어 를 만들어냅니다

running 는 : 를 생성합니다

여러 플러그인으로 작업 postcss-short-color 생산성 향상을 위해서는 여러 플러그인을 활용하십시오. ,

및

: 를 추가합시다

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

설치 :

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

플러그인 실행 순서

배열의 플러그인 순서가 중요합니다. 잘못된 주문은 예상치 못한 결과로 이어질 수 있습니다. 최적의 순서를 찾기 위해 실험 및 테스트 결론 initial/style.css

이 튜토리얼은 Gulp와 함께 PostCS를 사용하기위한 토대를 제공합니다. CSS 워크 플로를 향상시키기 위해 광대 한 PostCSS 플러그인 생태계를 탐색하십시오. 최적의 결과를 위해 플러그인 실행 순서를 신중하게 고려해야합니다.

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

(원래 요청에 따라 이미지가 여기에 삽입됩니다. 이미지를 표시 할 수 없으므로 원래 입력의 이미지 URL이 출력에 사용됩니다.) gulp css final/style.css

위 내용은 Gulp와 함께 Postcs를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!