gulp作為前端構建項目的一個工具，自己理解gulp主要方面的作用：
1.構建本地服務器。
2.快速構建項目。
3.對代碼進行壓縮合并，使代碼簡潔，減少頻繁的請求工作。
gulp學習地址： gulp中文網：http://www.gulpjs.com.cn/。
一、gulp安裝
1.1 全局安裝gulp，前提是必須安裝了node.js/npm;npm install --global gulp
1.2作為項目的開發依賴（需要在項目目錄下）npm install --save-dev gulp
1.3 根據自己的項目需求，安裝其他開發依賴npm install gulp-connect gulp-concat gulp-uglify --save-dev
1.4在項目根目錄創建一個名為gulpfile.js文件，看項目需要依賴哪些開發項，進行依賴注入在gulpfile.js中，并創建gulp任務。
var gulp=require('gulp');var connnect=require('gulp-connect');......gulp.task('kathie',function(){//此任務要做的事情。})；
gulp.task('default',['kathie']);//默認執行的任務
1.5在項目跟目錄創建一個package.json的文件，這個文件是一個嚴格的json文件。主要是項目的配置文件。其中很多屬性可以通過npm-config來生成。
主要信息有以下。其中除了devDependencies之外，可以通過npm init來配置；devDependencies依賴的插件需要通過npm install gulp-connect --save-dev 來安裝。
1.6 package.json 配置詳解：http://www.cnblogs.com/tzyy/p/5193811.html#_h1_27
二、npm中的開發依賴項學習。
2.1 gulp-connect： run a webserver。具體用法：
//1.引入插件： var gulp = require('gulp'); var connect = require('gulp-connect');
//2.創建watch任務去檢測html文件，其定義了一個當html改動之后，去調用一個gulp的taskgulp.task('watch',function(){ gulp.watch(['./www/.html'],['html']);})
//3.使用connect啟動一個web服務器
gulp.task('connect',function(){
connect.server({
root: "www",
livereload : true,
//port:8090, 可以更改本地默認端口號
//host:'gulp.dev'
});});
//4.加載www中的一個主頁面
gulp.task('html',function(){
gulp.src('./www/.html')
.pipe(connect.reload());
});
//5.設置默認任務
gulp.task('default',['connect','watch']);
//6.不要關閉dos命令行，如果沒有修改端口號，直接瀏覽器輸入http://localhost:8080
2.2 browser-sync ：啟動一個本地服務器，配置啟動頁面；同時修改代碼之后能自動刷新頁面，免按F5；browser-sync與gulp一起使用方法。
//1.引入插件： var browserSync=require('browser-sync').create();
//2.創建任務，并使用browserSync創建服務器。gulp.task('serve',function(){ browserSync.init({
server:{
basedir : './'
//初始化項目根目錄為“./”
},
files:[
'www/css/.css',
'www.js',
'www.html',
'www/img/',
'www/fonts/'
] });
gulp.watch(['./www/.html'],['html']); gulp.watch("www*.html").on("change",browserSync.reload);
//3.watch這個api是監控當前文件發生變化時觸發的任務；這里是當html文檔發生變化時，瀏覽器會自動reload。 });
以下為案例：
//引入gulp、gulp插件以及browser-sync
var gulp = require('gulp'),
browserSync = require('browser-sync').create(),
less = require('gulp-less');
//創建一個新的gulp任務
gulp.task('serve',['less'],function(){
//初始化項目跟目錄為'./'（也可以使用代理proxy: "yourlocal.dev"） browserSync.init({
server: './'
});
//創建gulp監聽器，監聽less文件的變化，自動執行'less'任務，編譯less并生成css文件 gulp.watch('./less/.less', ['less']).on('change', function(event){ console.log('File ' + event.path + ' was ' + event.type + ', running tasks...'); });
//監聽html文件的變化，自動重新載入
gulp.watch('./.html').on('change', browserSync.reload); });
//創建自動編譯less的任務，這邊需要return stream以保證browserSync.reload在正確的時機調用
gulp.task('less', function(){
return gulp.src('./less/*.less')
.pipe(less())
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream());});
//默認啟動的gulp任務數組['serve']gulp.task('default', ['serve']);
2.3 gulp-rev and gulp-rev-collector目的是對css和js文件命名進行加密處理；
同時在對應的html中的路徑進行更新。
var gulp = require('gulp');
var concat = require('gulp-concat');
//- 多個文件合并為一個；var minifyCss = require('gulp-minify-css');
//- 壓縮CSS為一行；var rev = require('gulp-rev');
//- 對文件名加MD5后綴var revCollector = require('gulp-rev-collector');
//- 路徑替換gulp.task('cssConcat', function() {
//- 創建一個名為 concat 的 task gulp.src('www/css/*.css')
//- 需要處理的css文件，放到一個字符串數組里 .pipe(minifyCss()) //- 壓縮處理成一行 .pipe(rev())
//- 文件名加MD5后綴 .pipe(gulp.dest('dist/css'))
//- 輸出文件本地 .pipe(rev.manifest()) //- 生成一個rev-manifest.json
.pipe(gulp.dest('./rev')); //- 將 rev-manifest.json 保存到 rev 目錄內});
gulp.task(
'rev',['cssConcat'],function() {
console.log(111)
gulp.src(['./rev/rev-manifest.json', 'dist/index.html']) //- 讀取 rev-manifest.json 文件以及需要進行css名替換的文件
.pipe(revCollector()) //- 執行文件內css名的替換
.pipe(gulp.dest('dist')); //- 替換后的文件輸出的目錄
});
gulp.task('default', [ 'rev']);
