1.Gulp是什么
簡單來說Gulp就是一個自動任務(wù)處理器创南，用來幫助前端簡化開發(fā)流程的工具。比如一些和文件相關(guān)的操作峦耘，去把Sass和Less編譯成Css驳概，去合并JavaScript，然后壓縮js.然后自動刷新瀏覽器旷赖，這些操作顺又，Gulp都能幫你完成。
2.Gulp的安裝和使用
一:在全局范圍內(nèi)安裝gulp
sudo npm install -g gulp
二:進入項目目錄杠愧，初始化項目
npm init
期間會問一些問題，比如項目名稱逞壁，版本流济，描述等‰绱常回車即可
三:在項目目錄中安裝gulp
npm install gulp --save-dev
加了--save-dev表示將gulp加入開發(fā)依賴
當(dāng)node_moudles這個目錄不存在時绳瘟，直接運行npm install，會自動將開發(fā)依賴都安裝好
四:創(chuàng)建要執(zhí)行的任務(wù)
在項目跟目錄中姿骏，創(chuàng)建一個文件糖声，gulpfile.js
在gulpfile.js中定義要執(zhí)行的任務(wù)
五:編輯你所需要執(zhí)行的任務(wù)
先require需要的模塊
var gulp = require('gulp');
編輯任務(wù)
gulp.task('hello', funciton(){
console.log('xx')
});
task任務(wù)，有兩個參數(shù)分瘦，前面的參數(shù)為任務(wù)名字hello蘸泻，后面為一個匿名函數(shù)，也就是這個任務(wù)需要做的事情嘲玫。
六:執(zhí)行任務(wù)
gulp hello
直接gulp+任務(wù)名字就好了
還有一種方式悦施，就是把要執(zhí)行的命名都加入default任務(wù)中，
gulp.task('default', ['hello'])
運行gulp命令之后去团，就會執(zhí)行所有的default任務(wù)抡诞。
七:gulp的兩個主要功能
讀取想要處理的文件，把處理好的文件放到指定的地方
gulp.src()找出文件
.pipe 處理文件
.pipe(gulp.dest()) 放到指定目錄
八:將單個文件復(fù)制到另外一個地方
gulp.task('copy-index', function(){
return gulp.src('index,html').pipe(gulp.dest('dist'))
});
九:將多個文件復(fù)制到另外一個地方
gulp.task('images', function(){
return gulp.src('images/*.{png,jpg}').pipe(gulp.dest('dist/images'))
});
十:使用多個globs
gulp.task('data', function(){
return gulp.src(['xml/.xml','json/.json']).pipe(gulp.dest('dist'))
});
多個想要處理的文件土陪，用數(shù)組來包裝起來昼汗，想到排除的文件用!來表示，例如!json/secret-*.json
十一:設(shè)置依賴任務(wù)
gulp.task('bulid', ['copy-index','images','data'],function(){
console.log('編譯成功');
});
在執(zhí)行build任務(wù)之前鬼雀，會先去執(zhí)行[]中三個所依賴的任務(wù)顷窒，三個依賴任務(wù)是同時執(zhí)行的
十二:監(jiān)視文件，在文件變化時源哩，立即執(zhí)行任務(wù)
gulp.task('copy-index', function(){
gulp.watch('index,html', ['copy-index']);
gulp.watch('index,html', ['copy-index']);
gulp.watch('index,html', ['copy-index']);
gulp.watch('index,html', ['copy-index']);
});
指的是文件發(fā)生變化后蹋肮，執(zhí)行后面[]里的任務(wù)
十三:使用插件擴展gulp的功能
編譯sass，自動刷新瀏覽器等
使用方法一般如下：
1.先安裝需要使用的插件璧疗，例如：gulp-sass
sudo npm install gulp-sass --save-dev
2.在gulpfile.js設(shè)置任務(wù)
先把插件require進來
var sass = require('gulp-sass')
編輯任務(wù)
gulp.task('sass', function(){ return gulp.src('stylesheets/**/*.scss').pipe(sass()).pipe(gulp.dest('dist/css')) });
十四:創(chuàng)建本地服務(wù)器
1.先安裝需要使用的插件
sudo npm install gulp-connect --save-dev
2.在gulpfile.js設(shè)置任務(wù)
var connect = require('gulp-connect')
編輯任務(wù)
gulp.task('server', function(){ connect.server({ root: 'dist' }); });
十五:實時刷新瀏覽器
將server方法里的livereload設(shè)置為true
gulp.task('server', function(){ connect.server({ root: 'dist' livereload: true }); });
然后在需要實時刷新瀏覽器的任務(wù)中啟用.pipe(connect.reload());
新建一個任務(wù)坯辩，執(zhí)行g(shù)ulp的時候，自動監(jiān)視和啟動服務(wù)器
glup.task('default', ['server','watch']);
其他插件的用法崩侠，在npm官網(wǎng)上找到相應(yīng)插件漆魔，看說明文檔即可。
