gulp-css gulp 패키지 처리 css

순서
도대체 Gulp-css 플러그인이 있을까요?정답: yes.하지만 css를 포장하는 데는 필요하지 않습니다.상세한 조작은 다음 문장을 보십시오!
gulp 기본 설치
node가 설치되어 있습니다.js+npm+git-bash의 window x64 시스템 컴퓨터 설치 명령:

$ npm i -g gulp
$ mkdir css-project && cd css-project
$ npm init -y
$ npm i -D gulp

@ 소백: 자세한 설치 팁은gulp 설치와 입문을 보십시오
gulp 단순 패키지 css
개발 종속 설치

$ npm install --save-dev gulp-cssmin gulp-rename gulp-concat

gulpfile.js 배열은 다음과 같습니다
주의: 리퀘스트 () 방법을 사용하는 곳은 모두 설치해야 합니다. (예를 들어 fs)

const gulp = require('gulp')
const cssmin = require('gulp-cssmin')
const rename = require('gulp-rename')
const concat = require('gulp-concat')

//gulp   ：src    ->pipe    ->dest    
gulp.task('css', function () {
    return gulp.src('./src/style/*.css') //     css    （gulp    ）
        .pipe(concat('style.css')) //  concat css         style.css   
        .pipe(cssmin()) //  cssmin         style.css       ，        
        .pipe(rename({
            suffix: '.min' //rename             styles.css    style.min.css
        }))
        .pipe(gulp.dest('./dist/css')) //dest          style.min.css   “./dist/css”   （gulp    ）
})

패키지 명령

$ gulp css //        gulp  gulp.task('css'...)    

gulp 패키지 css 호환 주요 브라우저
gulp-autoprefixer 플러그인을 통해 css 파일에 호환 처리가 필요한 부분을 브라우저 수식 접두사(예를 들어 -webkit-,-ms-,-o-)를 자동으로 추가합니다.
개발 종속 설치

$ npm install --save-dev gulp-cssmin gulp-rename gulp-concat gulp-autoprefixer

gulpfile.js 배열은 다음과 같습니다

const gulp = require('gulp')
const cssmin = require('gulp-cssmin')
const rename = require('gulp-rename')
const concat = require('gulp-concat')
const autoprefix = require('gulp-autoprefixer')

//gulp   ：src    ->pipe    ->dest    
gulp.task('css-autoprefix', function () {
    return gulp.src('./src/style/*.css') //     css    （gulp    ）
        .pipe(concat('style.css')) //  concat css         style.css   
        .pipe(cssmin()) //  cssmin         style.css       ，        
        .pipe(autoprefix({ //  autoprefix                ，  -webkit-，-o-
            browsers: ['last 2 versions'], //    2   
            cascade: false
        }))
        .pipe(rename({
            suffix: '.min' //rename             styles.css    style.min.css
        }))
        .pipe(gulp.dest('./dist/css')) //dest          style.min.css   “./dist/css”   （gulp    ）
})

패키지 명령

$ gulp css-autoprefix

지식의 확대
If you use other PostCSS based tools, like cssnano, you may want to run them together using gulp-postcss instead of gulp-autoprefixer. It will be faster, as the CSS is parsed only once for all PostCSS based tools, including Autoprefixer. 만약 cssnano와 같은 PostCSS 기반 도구를 사용한다면,gulp-PostCSS를 사용하지 않고gulp-autoprefixer를 사용하길 원할 수도 있습니다.CSS는 Autoprefixer 포함 PostCSS 기반 도구에 대해 한 번만 해석되기 때문에 더 빠를 것입니다.
우정 링크:gulp-cssmin gulp-rename gulp-concat gulp-autoprefixer gulp-sourcemaps gulp-cssnano
구독해 주셔서 감사합니다.