gulp.js的大致理解:
gulp.js-基于流的自動化構建工具;
gulp是基于Nodejs的自動任務運行器;
實現上,它借鑒了Unix操作系統的管道(pipe)思想,前一級的輸出,直接變成后一級的輸入,使得在操作上非常簡單;
.pipe 可以視為流的“管道/通道”方法,任何類型的流都會有這個 .pipe 方法去成對處理流的輸入與輸出。
gulp 安裝順序:
安裝nodejs -> 全局安裝gulp -> 項目安裝gulp以及gulp插件 -> 配置gulpfile.js -> 運行任務
dir列出文件列表;
ls清空命令提示符窗口內容。
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節點,不指定-dev將保存至dependencies節點;一般保存在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放入其他文件夾下亦可)。
命令提示符執行gulp 任務名稱;
命令提示符執行gulp testLess;
當執行gulp default或gulp將會調用default任務里的所有任務[‘testLess’,’elseTask’]。
gulp中最常用的插件:
gulp必用引入插件: gulp-htmlmin 壓縮html;
gulp-imagemin 壓縮常見的圖片格式,還能壓縮SVG;
gulp-uglilf 專業壓縮 js文件;
gulp-clean-css 壓縮css;
gulp-concat 合并文件(減少網絡請求);
gulp-rename 修改文件名稱(重命名) ;
gulp-autoprefixer 給css增加前綴,解決某些css屬性不是標準屬性,有各個瀏覽器前綴的情況,非常有用;
關于gulp中vinyl-source-stream這個插件的用法
雖然gulp是通過管道流來輸入輸出的,但不能直接輸入流,如下解釋:
gulp.src( ) 返回的一個vinyl文件(也就是說gulp插件期望的輸入時Vinyl文件對象),不能直接將一個可讀流作為輸入的函數(插件)相連,(如果非要用吧一個可讀流作為輸入的函數需要引入vinyl-source-stream(也可以起到加速打包的效果),必須通過這個插件來轉成vinyl)
gulp中用來處理錯誤的插件stream-combiner2;
stream-combiner2 整合streams來處理錯誤
gulp中刪除文件的插件
刪除文件或文件夾 npm install --save-dev gulp del 如下圖: