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配製如下

注意：凡是用到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.
如果您使用其他基於PostCSS的工具，比如cssnano，您可能希望使用gulp-PostCSS來運行它們，而不是使用gulp-autoprefixer。它將更快，因爲CSS對於所有基於PostCSS的工具（包括Autoprefixer）只被解析一次。

友情鏈接:
gulp-cssmin
gulp-rename
gulp-concat
gulp-autoprefixer
gulp-sourcemaps
gulp-cssnano

---

謝謝關注，歡迎點贊：）