前端自動構建工具@gulp入門

gulp是一個自動化的前端工具。它能夠利用自身的插件來實現一些功能，如sass、less編譯；瀏覽器自動刷新，文件壓縮、重命名、代碼校驗（我的使用sublime的插件進行校驗）等功能。固然這些功能也能夠經過其餘手段來實現，可是gulp實現的功能比較全面、快速、並且具備選擇性（每一個人均可以利用它來實現本身須要的功能）。

1.gulp安裝

　　1）首先安裝node環境

　　2）node全局安裝gulp（npm install -g gulp），若是安裝不上可以使用淘寶鏡像（cnpm install -g gulp）

2.gulp插件的使用

　　安裝好gulp以後如今就須要使用gulp實現一些功能。

　　例如：實現js壓縮並重命名

　　1）命令行切換到工程目錄下，在工程目錄下安裝gulp（cnpm install gulp --save-dev）

　　2）在工程目錄下安裝gulp-uglify(壓縮js的插件)和gulp-rename（文件重命名插件）。

　　3）而後在項目的根目錄下新建文件gulpfile.js。

　　4）在gulpfile.js中的代碼以下：

 1 //引入gulp 、gulp-rename、gulp-uglify
 2 var gulp = require('gulp'),  
 3     rename = require('gulp-rename'),
 4     uglify = require('gulp-uglify');
 5 //定義任務名稱‘uglify’
 6 gulp.task('uglify',function(){
 7     //選擇文件路徑
 8     gulp.src('script/angular/angular-1.4.6.js')
 9     //使用uglify壓縮
10     .pipe(uglify())
11     //對文件進行重命名
12     .pipe(rename('angular-1.4.6.min.js'))
13     //文件的輸出路徑
14     .pipe(gulp.dest('script/angular'))
15 });

　　5）在命令行中執行guip uglify

 

3.gulp經常使用的api

　　1）gulp.task() 定義一個gulp任務

　　2）gulp.src() 定義文件的路徑

　　3）gulp.dest() 定義文件的輸出路徑

　　4）gulp.watch()對文件進行監聽

4）我的經常使用的gulp插件（後面依次介紹）

　　1）sass編譯（也能夠實現less編譯，只是使用的插件不一樣）

　　2）自動添加瀏覽器前綴（如-webkit、 -ms、-moz、-o 等），貌似根據caniuse的數據來進行瀏覽器前綴的添加。

　　3）html、css、js文件的壓縮、合併重名等

　　4）瀏覽器的自動刷新

等等。。