mkdir gulp-sample
cd gulp-sample
yarn init -y
yarn add gulp --dev
/*
gulp构建过程的核心工作原理
读取流======>转换流=====>写入流
*/
# gulp中提供了专门用于创建读取流和写入流的api,相比于底层node的api更强大,也更容易使用;对于负责文件加工的转换流,都是通过独立的插件来提供
const {src,dest} = require('gulp')
// 其中src为gulp提供的读取流方法,dest为gulp提供的写入流方法
exports.default = ()=>{
return src('src/*.css') //读取src下面的所有文件
.pipe(dest('dist')) //只需要指定写入目录
}
/*
yarn gulp
测试成功,dist目录下就会多出一些.css文件
*/
# 样式文件的压缩转换
yarn add gulp-clean-css
# 对处理的文件重命名
yarn add gulp-rename
gulpfile.js
const fs = require('fs')
const {Transform} = require('stream')
exports.default = ()=>{
// 文件读取流
const read = fs.createReadStream('normalize.css')
// 文件写入流
const write = fs.createWriteStream('normalize.min.css')
// 文件转换流
const transform = new Transform({
transform:(chunk,encoding,callback)=>{
// 核心转换过程实现
// chunk => 读取流中取到的内容
const input = chunk.toString() // chunk拿到的是字节数组
const output = input.replace(/\s+/g,'').replace(/\/\*.+?\*\//g,'') // 先把空白字符全部替换掉,然后替换掉代码中的css注释
callback(null,output) //callback是一个错误优先的函数,第一个参数为错误对象,如果没有发生错误传入null
}
})
read
.pipe(transform)
.pipe(write)
return read
}
/*
构建过程的核心工作原理
读取流======>转换流=====>写入流
*/
######################2
const {src,dest} = require('gulp')
const cleanCss =require('gulp-clean-css')
const rename = require('gulp-rename')
// 其中src为gulp提供的读取流方法,dest为gulp提供的写入流方法
exports.default = ()=>{
return src('src/*.css') //读取src下面的所有文件
.pipe(cleanCss())
.pipe(rename({extname:'.min.css'})) //转换的文件重命名
.pipe(dest('dist')) //只需要指定写入目录
}
/*
yarn gulp
测试成功,dist目录下就会多出一些.css文件
*/