gulp常用插件 -- css打包

gulp的各种插件的作用是执行各种各样的压缩混淆转码任务的
**

1、gulp-cssmin

**
进行压缩css文件：去空格
下载：npm i -D gulp-cssmin //
导入：const cssmin = require(‘gulp-cssmin’) //在gulpfile.js文件中进行导入
导入以后得到一个处理流文件的函数
直接在管道函数里执行就好

用法：
在gulpfile.js文件中进行打包配置
例子：简单的压缩css文件（这是gulp@3 的书写语法）
const gulp = require(‘gulp’);
const cssmin = require(‘gulp-cssmin’);//引入gulp-cssmin插件

//例子：创建css的打包任务

gulp.task('cssHandler', function () {
    gulp
        .src('./src/css/*.css')//找到源文件
        .pipe(cssmin())  //压缩文件
        .pipe(gulp.dest('./dest/css/'))  //将压缩后的文件放入dest文件夹中，没有会进行自己创建
})

在命令行内
$ gulp cssHandler
但是这样写会出现一定的报错，

The following tasks did not complete: cssHandler
[14:27:10] Did you forget to signal async completion?

这是因为gulp也是一种流，只有流的开始没有流的结束，会发生报错，我们需要在gulp前添加return，task就会处理流了
const gulp = require(‘gulp’);
const cssmin = require(‘gulp-cssmin’);//引入gulp-cssmin插件

//例子：创建css的打包任务

gulp.task('cssHandler', function () {
   return gulp
        .src('./src/css/*.css')//找到源文件
        .pipe(cssmin())  //压缩文件
        .pipe(gulp.dest('./dest/css/'))  //将压缩后的文件放入dest文件夹中，没有会进行自己创建
})

下面这个是gulp-4的写法，注意的一定要加上将任务导出，否则会出现错误
//下面这个是gulp-4的写法

const cssHandler = function () {
    gulp
        .src('./src/css/*css')
        .pipe(cssmin())
        .pipe(gulp.dest('./dest/css/'))
}
//将任务导出
module.exports.cssHandler = cssHandler;

在命令行内：
$gulp cssHandler

**

2、gulp-autoprefixer ：

**
自动添加前缀
下载： npm i -D gulp-autoprefixer
导入：const autoprefixer= require(‘gulp-autoprefixer’) //在gulpfile.js文件中进行导入
导入以后得到一个处理流文件的函数
直接在管道函数里执行就好，但是和上一个比较需要传递参数，这个参数是一个对象，对象是数组的形式
gulp-autoprefixer（{browsers:[ ’ 要兼容的浏览器’ ]}）
在压缩之前进行添加（cssmin之前）
例子：
一个创建一个导出相对应

const cssHandler = function () {
    return gulp
        .src('./src/css/*css')
        .pipe(autoprefoxer({browsers:['last 2 versions']}))
        //last 2 versions代表的是最新的两个版本，在cssmin之前
        .pipe(cssmin())
        .pipe(gulp.dest('./dest/css/'))
}
//将任务导出
module.exports.cssHandler = cssHandler;

如果是这样写的化会发生警告，所以我们可以依据警告提示，在package,json中添加
“browserslist”:[
“last 2 wersions”,
… (这里写我们需要兼容的浏览器版本)
]

在我们在package,json中添加了上面这个属性后我们在代码中就可以不用写版本了
完成后：

一个创建一个导出相对应
const cssHandler = function () {
return gulp          //这里要加return
        .src('./src/css/*css')
        .pipe(autoprefoxer()) //<--------------
        .pipe(cssmin())
        .pipe(gulp.dest('./dest/css/'))
}
//将任务导出
module.exports.cssHandler = cssHandler;

我们在命令行中输入 $ npm cssHandler
我们在就可以在css文件中看到我需要添加的兼容浏览器的前缀