gulp.js的大致理解:
gulp.js-基于流的自動化構(gòu)建工具炊邦;
gulp是基于Nodejs的自動任務(wù)運行器;
實現(xiàn)上瓤逼,它借鑒了Unix操作系統(tǒng)的管道(pipe)思想礼华,前一級的輸出,直接變成后一級的輸入戏售,使得在操作上非常簡單侨核;
.pipe 可以視為流的“管道/通道”方法,任何類型的流都會有這個 .pipe 方法去成對處理流的輸入與輸出灌灾。
gulp 安裝順序:
安裝nodejs -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運行任務(wù)
dir列出文件列表搓译;
ls清空命令提示符窗口內(nèi)容。
npm(node package manager)nodejs的包管理器锋喜,用于node插件管理(包括安裝些己、卸載、管理依賴等)
npm安裝插件嘿般;
npm install <name> [-g] [--save-dev]段标;
<name>:node插件名稱。例:npm install gulp-less --save-dev炉奴;
--save:將保存配置信息至package.json(package.json是nodejs項目配置文件)
-dev:保存至package.json的devDependencies節(jié)點逼庞,不指定-dev將保存至dependencies節(jié)點;一般保存在dependencies的像這些express/ejs/body-parser等等
本地安裝gulp插件(less)
npm install --save-dev
npm install gulp-less --save-dev
新建gulpfile.js文件(重要)
gulpfile.js是gulp項目的配置文件瞻赶,是位于項目根目錄的普通js文件(其實將gulpfile.js放入其他文件夾下亦可)往堡。
命令提示符執(zhí)行g(shù)ulp 任務(wù)名稱械荷;
命令提示符執(zhí)行g(shù)ulp testLess;
當(dāng)執(zhí)行g(shù)ulp default或gulp將會調(diào)用default任務(wù)里的所有任務(wù)[‘testLess’,’elseTask’]虑灰。
gulp中最常用的插件:
gulp必用引入插件: gulp-htmlmin 壓縮html吨瞎;
gulp-imagemin 壓縮常見的圖片格式,還能壓縮SVG穆咐;
gulp-uglilf 專業(yè)壓縮 js文件颤诀;
gulp-clean-css 壓縮css;
gulp-concat 合并文件(減少網(wǎng)絡(luò)請求)对湃;
gulp-rename 修改文件名稱(重命名) 崖叫;
gulp-autoprefixer 給css增加前綴,解決某些css屬性不是標(biāo)準(zhǔn)屬性拍柒,有各個瀏覽器前綴的情況心傀,非常有用;
關(guān)于gulp中vinyl-source-stream這個插件的用法
雖然gulp是通過管道流來輸入輸出的拆讯,但不能直接輸入流脂男,如下解釋:
gulp.src( ) 返回的一個vinyl文件(也就是說gulp插件期望的輸入時Vinyl文件對象),不能直接將一個可讀流作為輸入的函數(shù)(插件)相連种呐,(如果非要用吧一個可讀流作為輸入的函數(shù)需要引入vinyl-source-stream(也可以起到加速打包的效果)宰翅,必須通過這個插件來轉(zhuǎn)成vinyl)
gulp中用來處理錯誤的插件stream-combiner2;
stream-combiner2 整合streams來處理錯誤
gulp中刪除文件的插件
刪除文件或文件夾 npm install --save-dev gulp del 如下圖: