gulp-css gulpパッケージ処理css

シーケンス

いったいgulp-cssのプラグインはありますか?答えは「yes」です.しかし、cssをパッケージするには必要ありません.詳細は、下記をご覧ください.

gulp基本インストール

nodeがインストールされています.js+npm+git-bashのwindow x 64システムコンピュータインストールコマンド:

$ 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調製は以下の通りである

注意:require()メソッドを使用する場所はすべてインストールする必要があります(実際には特例があります.例えば、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-autoprefixerではなくgulp-PostCSSを使用して実行する必要があります.CSSは、Autoprefixerを含むすべてのPostCSSベースのツールに対して一度だけ解析されるため、より高速になります.
友情リンク:gulp-cssmin gulp-rename gulp-concat gulp-autoprefixer gulp-sourcemaps gulp-cssnano

ご注目ありがとうございます。