Gulp 文件操作API(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中的文件就是我们所需求的
作者：是洋柿子啊
链接：https://juejin.cn/post/7036722908214853645
伪原创工具 SEO网站优化 https://www.237it.com/