一威酒、項目構建
- 多個開發(fā)者共同開發(fā)一個項目煌恢，每位開發(fā)者負責不同的模塊骗卜，這就會造成一個完整的項目實際上是由許多的“代碼版段”組成的宠页；
- 使用less、sass等一些預處理程序寇仓，降低CSS的維護成本勇皇，最終需要將這些預處理程序進行解析；
- 合并css焚刺、javascript，壓縮html门烂、css乳愉、javascript兄淫、images可以加速網頁打開速度，提升性能蔓姚；
- 這一系列的任務完全靠手動完成幾乎是不可能的捕虽，借助構建工具可以輕松實現。
- 所謂構建工具是指通過簡單配置就可以幫我們實現合并坡脐、壓縮泄私、校驗、預處理等一系列任務的軟件工具备闲。
- 常見的構建工具包括：Grunt晌端、Gulp、F.I.S（百度出品）恬砂、webpack
二咧纠、gulp
Gulp是基于Nodejs開發(fā)的一個構建工具，借助gulp插件可以實現不同的構建任務泻骤，以其簡潔的配置和卓越的性能成為目前主流的構建工具漆羔。
全局安裝 npm install -g gulp
2.1 gulp基礎
-
本地安裝gulp
進入項目根目錄執(zhí)行npm install gulp --save-dev（添加--save-dev會在package.json記錄依賴關系）。
-
任務清單
在項目根目錄中創(chuàng)建gulpfile.js（這是一個配置文件）
-
定義任務
在gulpfile.js定義構建任務狱掂，如壓縮演痒、合并，Gulp自身并不執(zhí)行任何任務趋惨，是通過調用具體插件來完成的鸟顺。
以編譯LESS為例，安裝npm install gulp-less希柿，如下圖定義任務
//引入gulp var gulp = require('gulp'), //引入編譯less的插件 less = require('gulp-less'); gulp.task('less', function () { return gulp.src('./public/less/*.less') .pipe(less()) .pipe(gulp.dest('./release/public/css')) }); -
執(zhí)行任務
輸入命令 gulp less
這樣我們的LESS文件便會編譯成CSS了诊沪。
2.2 gulp工作原理
通過不同的插件實現構建任務，Gulp只是按著配置文件調用執(zhí)行了這些插件曾撤。
2.3 gulp API
Gulp是基于NodeJS的端姚，通過require可以引入一個NodeJS的包（模塊），其作用類似于瀏覽器中的script標簽引入資源挤悉，被引入的包存放在node_modules目錄下渐裸。
引入gulp包（模塊）后返回一個對象，習慣賦值給變量gulp装悲，通過該對象提供的方法（API）完成任務配置昏鹃。
-
gulp.task() 定義各種不同的任務，如下圖有兩個參數
//less任務名稱诀诊，回調方法里定義任務 gulp.task('less',function(){ //定義任務 });不同任務間存在依賴關系時洞渤，可以指定依賴，如下
//通過數組指定有依賴關系的任務 gulp.task('less',['依賴1','依賴2','依賴3'],function(){ //定義任務 }); gulp.src() 需要構建資源的路徑属瓣，字符串或數組（可以正則方式書寫）
gulp.pipe() 管道载迄，將需要構建的資源“輸送”給插件讯柔。
-
gulp.dest() 構建任務完成后資源存放的路徑（會自動創(chuàng)建）
gulp.task('less',function(){ gulp.src('./pubilc/less/*.less') .pipe(less()) .pipe(gulp.dest('./public/css')); }) gulp.watch()
2.4 常用gulp插件
- gulp-less 編譯LESS文件
- gulp-autoprefixer 添加CSS私有前綴
- gulp-cssmin 壓縮CSS
- gulp-rname重命名
- gulp-imagemin 圖片壓縮
- gulp-uglify 壓縮Javascript
- gulp-concat 合并
- gulp-useref
- gulp-if
- gulp-htmlmin 壓縮HTML
- gulp-rev添加版本號
- gulp-rev-collector內容替換
- gulp-clean清除內容
