Gulp

文件操作api + 插件的使用

前言

Gulp中为我们创建了读取流和写入流的API，和一些插件，接下来，我们要进入使用环节了

简单的小栗子

通过 src, dest 进行写入和读取流的操作

const { src, dest } = require('gulp')

exports.default = () => {
 return src('normalize.css').pipe(dest('dist'))
}

我们运行一下yarn gulp来进行一下实验，生成成功，莫问题啊

使用通配符进行文件读取

相比于原始的api``gulp的会更加强大一些，因为我们可以在这里使用通配符去匹配批量的文件

const { src, dest } = require('gulp')

exports.default = () => {
 return src('*.css').pipe(dest('dist'))
}

文件转换

当然构建最重要的过程还是文件的转换，我们可以通过gulp-clean-css这个插件，这个插件提供了压缩css代码的转换流 安装

yarn add gulp-clean-css --dev

然后我们再进行一些代码的改造

const { src, dest } = require('gulp')
const cleanCss = require('gulp-clean-css')

exports.default = () => {
 return src('*.css').pipe(cleanCss()).pipe(dest('dist'))
}

再次启动命令之后，我们的dist中生成的两个文件就是压缩之后的代码了

添加更多的操作

当然如果你还在想读取中做更多的操作的话，我们还可以使用pipe继续做更多的操作，例如gulp-rename

yarn add gulp-rename --dev

再次进行改造

const { src, dest } = require('gulp')
const cleanCss = require('gulp-clean-css')
const rename = require('gulp-rename')

exports.default = () => {
  return src('*.css')
    .pipe(cleanCss())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(dest('dist'))
}

运行执行命令yarn gulp之后，我们会发现dist中的文件就是我们所需求的