CSS 활용을위한 PostCSS 자습서

PostCSS를 사용하면 타사 개발자가 만든 다양한 PostCSS 플러그인으로 CSS를 변형 할 수 있습니다 .

이 플러그인은 다음과 같은 다양한 작업을 처리 할 수 ​​있습니다.

• 향후 CSS 구문
• 폴백
• CSS 언어 확장
• 그림 물감
• 이미지 및 글꼴
• 그리드
• 최적화

자유롭게 수백 가지 플러그인을 사용할 수 있으므로 JavaScript 작업 러와 쉽게 통합 할 수 있으며 PostCSS를 통해 모두 사용할 수 있습니다.

프로젝트 시작하기

우리는 일을 단순하게 유지하고 모든 유형의 프레임 워크 (CSS 또는 JS)를 사용하지 않을 것입니다. PostCSS와 Gulp를 설치하기 위해 Nodejs가 필요할 것입니다.

Nodejs가 없으면 Nodejs.org를 방문하여 Downloads 섹션을 방문하십시오. OS에 따라 적절한 설치 프로그램을 다운로드하고 기본 설치 옵션을 따르십시오. 콘솔이나 명령 줄이 이미로드되어 있으면 다시로드하십시오. 그러면 잘 수행 할 수 있습니다.

다음으로 콘솔 / 명령 줄을 열고 새 프로젝트 폴더를 만듭니다.

> mkdir pcss && cd pcss

다음  명령을 실행하여 프로젝트 종속성을 저장하기위한 package.json 파일을 작성합니다 .

> npm init -y

이제 Node Package Manager (NPM)와 함께 Gulp 및 PostCSS를 설치합니다.

> npm install gulp gulp-postcss --save-dev

참고 :  PostCSS는 다른 Task Runners와 함께 사용할 수도 있습니다 . 자세한 내용 은 Github 페이지 를 체크 아웃 하십시오.

작업 러너 설정

코드 편집기를 열고  프로젝트 루트 폴더에 gulpfile.js 를 만듭니다 . 다음 내용을 붙여 넣으십시오.

var postcss = require('gulp-postcss');
var gulp = require('gulp');

gulp.task('serve', ['css'], function() {
    gulp.watch("./css/*.css", ['css']);
});

gulp.task('css', function() {
    var plugin = [
        // PostCSS Plugins Here
    ];
    return gulp.src('./css/*.css')
        .pipe(postcss(plugin))
        .pipe(gulp.dest('./dest'));
});

gulp.task('default', ['serve']);

현재 PostCSS 플러그인을 실제로 포함하고 있지 않으므로 아무 것도하지 않습니다. 우리는 곧 그 부분에 도달 할 것입니다.

하지만 먼저 main.css  파일이 들어 있는 / css  폴더를 만듭니다 . 일단 그렇게하면 다음 단계로 넘어갈 수 있습니다.

PostCSS 플러그인 사용하기

여기에서 모든 PostCSS 플러그인을 찾아 볼 수 있습니다. 요구 사항은 프로젝트에 따라 다릅니다.

브라우저 프리픽스에 대해 걱정하지 않으려한다고 가정 해 봅시다. 이 작업 에는 자동 접두어 가 있습니다 . PostCSS 플러그인 중 하나로 표시됩니다.

설치하려면 먼저 콘솔로 이동하여 다음을 실행하십시오.

> npm install autoprefixer --save-dev

그런 다음 우리의 /gulpfile.js 로 돌아가서  맨 위로 가져옵니다.

// postcss & gulp vars removed for brevity

var autoprefixer = require('autoprefixer');

그런 다음 플러그인  배열 내에 추가합니다 .

    var plugin = [
        autoprefixer()
    ];

그게 전부 야. 그게 전부입니다.

이를 테스트하기 위해 autoprefixer github 페이지 에서이 플러그인이하는 것을 보여주는 예제 중 하나를 사용하여 /css/main.css  파일  안에 붙여 넣으십시오 .

:fullscreen a {
    display: flex;
}

다음으로 콘솔로 가서 다음을 실행하십시오.

> gulp

코드 편집기로 돌아 가면 /css/main.css  파일  의 자동 접두어 버전을 포함하는 새 CSS 파일이 있는 새 / dest폴더 가 있음을 알 수 있습니다.

:-webkit-full-screen a {
    display: -webkit-box;
    display: flex;
}
:-moz-full-screen a {
    display: flex;
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex;
}
:fullscreen a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

단순한!

다중 PostCSS 플러그인 사용

지금은 하나의 플러그인 만 사용하고 있습니다. 그러나 물론, 우리는 동시에 많은 무리를 사용할 수 있습니다. CSSNano 는 프로덕션 사용을 위해 CSS를 최적화하는 꽤 인기있는 플러그인 팩입니다.

autoprefixer를 실행하면 CSSNano가 실행됩니다. 프로세스는 이전과 완전히 동일합니다.

콘솔로 이동하여 설치하십시오.

> npm i cssnano --save-dev

/gulpfile.js 파일 의 맨 위로 가져 오기 :

// other vars removed for brevity

var cssnano = require('cssnano');

그런 다음 플러그인  배열에 추가하십시오 .

    var plugin = [
        autoprefixer(),
        cssnano()
    ];

큰. gulp  명령을 다시 실행하십시오 .

> gulp

이제 /dest/main.css  파일은 다음과 같이 보입니다.

:-webkit-full-screen a{display:-webkit-box;display:flex}: