mkdir?gulp-sample
cd?gulp-sample
yarn?init?-y
?yarn?add?gulp?--dev
?/*?
gulp構(gòu)建過程的核心工作原理
讀取流======>轉(zhuǎn)換流=====>寫入流
*/
#?gulp中提供了專門用于創(chuàng)建讀取流和寫入流的api,相比于底層node的api更強大,也更容易使用;對于負責文件加工的轉(zhuǎn)換流,都是通過獨立的插件來提供
const?{src,dest}?=?require('gulp')
//?其中src為gulp提供的讀取流方法,dest為gulp提供的寫入流方法
exports.default?=?()=>{
????return?src('src/*.css')?//讀取src下面的所有文件
????????.pipe(dest('dist'))?//只需要指定寫入目錄
}
/*?
yarn?gulp
測試成功,dist目錄下就會多出一些.css文件
*/
#?樣式文件的壓縮轉(zhuǎn)換
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')
????//?文件轉(zhuǎn)換流
????const?transform?=?new?Transform({
????????transform:(chunk,encoding,callback)=>{
????????????//?核心轉(zhuǎn)換過程實現(xiàn)
????????????//?chunk?=>?讀取流中取到的內(nèi)容
????????????const?input?=?chunk.toString()?//?chunk拿到的是字節(jié)數(shù)組
????????????const?output?=?input.replace(/\s+/g,'').replace(/\/\*.+?\*\//g,'')?//?先把空白字符全部替換掉,然后替換掉代碼中的css注釋
????????????callback(null,output)?//callback是一個錯誤優(yōu)先的函數(shù),第一個參數(shù)為錯誤對象,如果沒有發(fā)生錯誤傳入null
????????}
????})
????read
????.pipe(transform)
????.pipe(write)
????return?read
}
/*?
構(gòu)建過程的核心工作原理
讀取流======>轉(zhuǎn)換流=====>寫入流
*/
######################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'}))?//轉(zhuǎn)換的文件重命名
????????.pipe(dest('dist'))?//只需要指定寫入目錄
}
/*?
yarn?gulp
測試成功,dist目錄下就會多出一些.css文件
*/
