序
到底有没有一个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