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

---

谢谢关注，欢迎点赞：）