gulp

npm install -g gulp-concat 檔案打包
npm install -g gulp-rename 檔案重新命名
npm install -g gulp-imagemin 圖片壓縮
npm install -g gulp-jslint js程式碼校驗 慎用
npm install -g gulp-minify-css css壓縮
npm install -g gulp-minify-html html壓縮
npm install -g gulp-uglify js壓縮

它是一個前端工程化工具，用來實現程式碼部署，css,javascript,html等程式碼的壓縮，es6，less,styls等程式碼的編譯，圖片優化等；
它的實現：是基於UXIx中管道概念，nodejs中有個叫stream流，前一個操作的輸出作為後一個操作的輸入；
壓縮CSS檔案，第一個過程是獲取檔案，將這個檔案轉化成一個stream流，第二個過程將檔案內容進行壓縮，這個檔案內容就是通過一個操作流入過來；第三個過程就是將檔案寫入一個檔案中，可以是一個新的檔案，也可以是當前檔案；
Stream流：nodejs中讀取檔案，得到結果是一個流，這種流中包含檔案的資訊，包括檔名稱、內容、編碼、路徑等等都在流中；
是為了寫入或者更改來實現，使我們操作檔案實現階段化，

gulp的優勢：
1. api簡單：src,dest,task,pipe；
2. 外掛資源豐富，社群龐大,開發外掛也很簡單；

全域性安裝：

npm install gulp -g
檢視是否安裝成功：
gulp -v

專案根目錄下安裝：

配置package.json:
npm init

安裝gulp:
npm install gulp --save-dev

安裝gulp外掛:
npm install gulp-less --save-dev

新建入口檔案：
gulpfile.js， 這個檔案很重要，每個專案都要有這個檔案，這個是當執行gulp會自動執行該檔案，該檔案中我們可以書寫gulp語句，基於js實現，與js語法一樣的；
執行gulp:
gulp 任務名稱

Task方法

用來定義一個任務，
語法gulp.task(name[,deps],fn)
name:表示任務的名稱
deps:表示任務的依賴任務，可選引數；
fn:任務的回撥函式

執行gulp中task用run方法 ：
語法： gulp.run(taskname);
taskname:表示任務的名稱；

在最新的gulp版本中，run方法不建議使用，我們可以通過預設任務來實現
語法：gulp.task('default',deps,fn)
注意預設任務的名稱就是default，不能寫其他的名字，如果寫其他的名字就會被當做普通任務來執行；
deps:依賴的任務集合；
fn:執行回撥函式；

// gulpfile
var gulp = require('gulp');

gulp.task('demo',function(){
    console.log('demo task')
})

gulp.task('default',['demo'],function(){
    console.log('default task')
})

cmd輸出

D:\MyPro\GULP\03default>gulp
[00:15:05] Using gulpfile D:\MyPro\GULP\03default\gulpfile.js
[00:15:05] Starting 'demo'...
demo task
[00:15:05] Finished 'demo' after 267 μs
[00:15:05] Starting 'default'...
default task
[00:15:05] Finished 'default' after 101 μs

依賴的任務要先於當前任務執行；
μs：微秒；
在一個專案中，我們要批量的處理檔案，

gulp.src為我們提供這樣的方法：將檔案轉換成stream流；

語法，gulp.src(filePath,option)
filePath:檔案的路徑,如果多個不同的檔案，我們有兩種方法顯示
    一種是陣列形式['a.js','b.css']
    一種是glops表示式,['*.js'] 表示a.js , b.js , c.js但是一定不能有目錄符號‘/’;

option:一般預設

.pipe，我們可以通過管道方法來處理每個階段的流，這些管道依次排開，前一個管道的輸出作為後一個管道的輸入,對流執行，鏈式呼叫；

語法 .pipe(fn)
fn:通常表示處理方法；
比如我們將一個檔案放到另外一個目錄下：
    gulp.pipe(gulp.dest(path));
    gulp.dest方法表示將檔案寫入某個目錄：
        語法，gulp.dest(path)
            path:路徑，目錄路徑

//讀取js中的index.js檔案
//將index.js檔案放到dest目錄下
//引入gulp模組
var gulp = require('gulp');

//定義一個讀寫index.js的任務
gulp.task('dealIndex',function(){
    //讀取Index檔案
    gulp.src('js/index.js')
    //通過管道操作這個流
    //將檔案內容放到dest資料夾內
    .pipe(gulp.dest('dest'))

})

//啟動預設任務來執行dealIndex任務
gulp.task('default',['dealIndex'])

cmd:

D:\MyPro\GULP\04讀寫>gulp
[00:57:47] Using gulpfile D:\MyPro\GULP\04讀寫\gulpfile.js
[00:57:47] Starting 'dealIndex'...
[00:57:47] Finished 'dealIndex' after 15 ms
[00:57:47] Starting 'default'...
[00:57:47] Finished 'default' after 30 μs

檔案監聽

我們在開發中想邊開發邊釋出，gulp提供了一個方法叫watch來監視檔案變化，來實現實時釋出；
檔案在寫入、修改、刪除時發生一個操作就是儲存檔案；

watch方法的語法
第一種： gulp.watch(globs,fn);
globs: 表示檔案的路徑
* 代表任意字元，除了目錄符號/和擴充名.js .css .html等,可以： .js a.js abc.js
** 代表任意字元，可以包括目錄符號哦，但是不能包括擴充名.js .css等,可以：/a.js
混合使用：/.js 包含所有的js檔案
lib/*/.js lib資料夾下面的所有js檔案
fn:有個參數列示檔案物件，有兩個屬性：
type:操作的型別，changed,deleted,added
path:操作的檔案，D:\MyPro\GULP\05檔案監聽\js\index.js

第二種：gulp.watch(globs,deps);
    golbs:表示檔案的路徑
    deps:表示任務task集合

案例一：
我們監聽js檔案下檔案到demo的輸出

// 監聽Index.js的變化，釋出到demo資料夾下
var gulp = require('gulp');


gulp.task('default')
gulp.watch('js/*.js',function(e){
    console.log(e)
    //將js下面的js檔案放入demo資料夾下
    gulp.src('js/*.js')
    .pipe(gulp.dest('demo'))
})

cmd輸出，下面的物件是console.log(e)

D:\MyPro\GULP\05檔案監聽>gulp
[01:32:54] Using gulpfile D:\MyPro\GULP\05檔案監聽\gulpfile.js
[01:32:54] Starting 'default'...
[01:32:54] Finished 'default' after 158 μs
{ type: 'changed',
  path: 'D:\\MyPro\\GULP\\05檔案監聽\\js\\index.js' }
{ type: 'deleted',
  path: 'D:\\MyPro\\GULP\\05檔案監聽\\js\\demo.js' }
{ type: 'changed',
  path: 'D:\\MyPro\\GULP\\05檔案監聽\\js\\index.js' }
{ type: 'added', path: 'D:\\MyPro\\GULP\\05檔案監聽\\js\\demo.js' }
{ type: 'changed',
  path: 'D:\\MyPro\\GULP\\05檔案監聽\\js\\demo.js' }

案例二

var gulp = require('gulp');
gulp.task('demo',function(){
    console.log('demo task')
})
gulp.task('dealJs',function(){
    gulp.src('js/*.js')
    .pipe(gulp.dest('demo'))
})
gulp.task('default');
gulp.watch('js/*.js',['dealJs','demo'])

gulp

只是一個工具的抽象，它把基本的功能抽取出來，例如，讀取檔案，寫入檔案，建立管道，監聽檔案，建立任務；
但是如何在管道中處理這些stream流，沒有實現，因為操作stream太複雜了，es6變成js,將less變成css，檔案打包，檔案壓縮等等，這些不是一兩個方法就能解決；因此把這些業務邏輯抽取出來作為外掛使用，任何人都可以開發外掛，
好處：外掛多樣性，每個人都可以有自己的一個外掛，這樣使得我們gulp包很小，
問題：想使用一個功能，沒有一個很好的指引，

外掛如何使用

1. 安裝外掛包，npm install -g gulp-rename (修改檔名外掛)，可以複製到自己目錄下；
2. 在gulpfile.js中將該模組引入進來，通過require；
3. 然後通過管道方法pipe使用

例子：重新命名

//將js中的index.js檔案放到demo資料夾中，並且命名為app.js

var gulp = require('gulp');
var rename = require('gulp-rename');

gulp.task('renameJs',function(){
    gulp.src('js/index.js')
    .pipe(rename('app.js'))
    .pipe(gulp.dest('demo'))
})
gulp.task('default',['renameJs'])

js檔案的壓縮

gulp-uglify

1. 安裝外掛
2. 在gulpfile.js引入該模組
3. 在pipe方法中執行該方法

var gulp = require('gulp');
var uglify = require('gulp-uglify');

gulp.task('uglifyJs',function(){
    gulp.src('js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('demo'))
})

gulp.task('default',['uglifyJs'])

css壓縮

gulp-minify-css

var gulp = require('gulp');
var minifyCss = require('gulp-minify-css');

gulp.task('minifyCssNow',function(){
    gulp.src('css/*.css')
    .pipe(minifyCss())
    .pipe(gulp.dest('demo'))
})

gulp.task('default',['minifyCssNow'])

html檔案壓縮

gulp-minify-html

var gulp = require('gulp');
var minifyHtml = require('gulp-minify-html');

gulp.task('miniFy',function(){
    gulp.src('./*.html')
    .pipe(minifyHtml())
    .pipe(gulp.dest('demo'))
})

gulp.task('default',['miniFy'])

Vue專案實戰

1. 將html壓縮
2. 將css壓縮
3. 將js壓縮

//我們要壓縮css js html 依賴三個外掛 
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minifyCss = require('gulp-minify-css');
var minifyHtml = require('gulp-minify-html');

//對三類檔案壓縮並放到壓縮資料夾下

gulp.task('jsUglify',function(){
    gulp.src('10/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('demo/js'))
})

gulp.task('cssMinify',function(){
    gulp.src('10/css/*css')
    .pipe(minifyCss())
    .pipe(gulp.dest('demo/css'))

})

gulp.task('htmlMinify',function(){
    gulp.src('10/*.html')
    .pipe(minifyHtml())
    .pipe(gulp.dest('demo/'))
})

gulp.task('dealImage',function(){
    gulp.src('10/img/**/*.*')
    .pipe(gulp.dest('demo/img'))
})

gulp.task('dealData',function(){
    gulp.src('10/data/*.json')
    .pipe(gulp.dest('demo/data'))
})
gulp.task('default',['jsUglify','cssMinify','htmlMinify','dealImage','dealData'])

檔案打包

開發時我們可能會有幾十個檔案，我們上線時會打包成一個檔案
gulp-concat實現檔案打包，使用方式和uglify一樣，只不過concat方法需要傳遞一個引數，這個參數列示打包後的檔名稱；

//將js資料夾中的js檔案打包
var gulp = require('gulp');
var concat = require('gulp-concat');

//獲取js中的Js檔案並且打包在一起
gulp.task('jsConcat',function(){
    gulp.src('js/*.js')
    .pipe(concat('main.js'))
    .pipe(gulp.dest('demo'))
})

gulp.task('default',['jsConcat'])

js程式碼校驗

gulp-jslint 實現對JS程式碼校驗

圖片壓縮

gulp-imagemin

var gulp = require('gulp');
var imagemin = require('gulp-imagemin');

gulp.task('dealImage',function(){
    gulp.src('img/*.*')
    .pipe(imagemin())
    .pipe(gulp.dest('demo'))
})

gulp.task('default',['dealImage']

可見對Png格式的圖片壓縮效果最好