extension 加載 lin 邏輯 了解 compile progress 瀏覽器 path

gulp是前端開發過程中對代碼進行自動化構建的利器。它不僅能對資源進行優化，而且在開發過程中能夠通過配置自動完成很多重復的任務，讓我們可以專註於代碼，提高工作效率。

一、API介紹

gulp常用的API只有四個：

gulp.task(),gulp.src(),gulp.dest(),gulp.watch()

1.gulp.src()

輸出（Emits）符合所提供的匹配模式（glob）或者匹配模式的數組（array of globs）的文件。 將返回一個Vinyl files 的 stream 它可以被 piped 到別的插件中。這個東西是用來獲取流的，但要註意這個流裏的內容不是原始的文件流，而是一個虛擬文件對象流(Vinyl files)，這個虛擬文件對象中存儲著原始文件的路徑、文件名、內容等信息。

gulp.src(globs[, options])

2.gulp.dest()

gulp.dest()方法是用來輸出文件的：

gulp.dest(path[,options])

path為寫入文件的路徑
options為一個可選的參數對象，通常我們不需要用到

要想使用好gulp.dest()這個方法，就要理解給它傳入的路徑參數與最終生成的文件的關系。
gulp的使用流程一般是這樣子的：首先通過gulp.src()方法獲取到我們想要處理的文件流，然後把文件流通過pipe方法導入到gulp的插件中，最後把經過插件處理後的流再通過pipe方法導入到gulp.dest()中，gulp.dest()

方法則把流中的內容寫入到文件中，這裏首先需要弄清楚的一點是，我們給gulp.dest()傳入的路徑參數，只能用來指定要生成的文件的目錄，而不能指定生成文件的文件名，它生成文件的文件名使用的是導入到它的文件流自身的文件名，所以生成的文件名是由導入到它的文件流決定的，即使我們給它傳入一個帶有文件名的路徑參數，然後它也會把這個文件名當做是目錄名，例如：

var gulp = require(‘gulp‘);
gulp.src(‘script/jquery.js‘)
    .pipe(gulp.dest(‘dist/foo.js‘));
//最終生成的文件路徑為 dist/foo.js/jquery.js,而不是dist/foo.js
 

3.gulp.task()

gulp.task方法用來定義任務

gulp.task(name[, deps], fn)

name 為任務名
deps 是當前定義的任務需要依賴的其他任務，為一個數組。當前定義的任務會在所有依賴的任務執行完畢後才開始執行。如果沒有依賴，則可省略這個參數
fn 為任務函數，我們把任務要執行的代碼都寫在裏面。該參數也是可選的。

gulp.task(‘mytask‘, [‘array‘, ‘of‘, ‘task‘, ‘names‘], function() { //定義一個有依賴的任務
  // Do something
});

4.gulp.watch()

gulp.watch()用來監視文件的變化，當文件發生變化後，我們可以利用它來執行相應的任務，例如文件壓縮等。

gulp.watch(glob[, opts], tasks)

glob 為要監視的文件匹配模式，規則和用法與gulp.src()方法中的glob相同。
opts 為一個可選的配置對象
tasks 為文件變化後要執行的任務，為一個數組

gulp.task(‘uglify‘,function(){
  //do something
});
gulp.task(‘reload‘,function(){
  //do something
});
gulp.watch(‘js/**/*.js‘, [‘uglify‘,‘reload‘]);

二、插件

• gulp-htmlmin 用來壓縮 HTML。
• gulp-imagemin 除了能壓縮常見的圖片格式，還能壓縮 SVG。
• gulp-minify-css 壓縮 CSS。
• gulp-uglify 壓縮 Javascript。
• gulp-concat 合並文件。
• gulp-autoprefixer 給 CSS 增加前綴。解決某些CSS屬性不是標準屬性，有各種瀏覽器前綴的情況。
• gulp-rename 修改文件名稱。比如有時我們需要把app.js改成app.min.js。

• del / gulp-clean 刪除。俺的使用場景是：JS/CSS 文件都會在壓縮後使用gulp-rev，即文件名被hash，然後再上傳到 CDN，最後俺再使用 刪除插件 把本地壓縮後的文件刪除掉，不用多余保存。
• gulp-rev 把靜態文件名改成hash的形式。
• gulp-rev-replace 配合 gulp-rev 使用，拿到生成的 manifest.json 後替換對應的文件名稱。
• gulp-rev-collector 到線上環境前，我會用來配合gulp-rev使用，替換 HTML 中的路徑
• gulp-rev-append 給頁面引用的靜態文件增加hash後綴，避免被瀏覽器緩存...當然，如果是使用 CDN，這個套路就不行了
• gulp-sourcemaps 處理 JavaScript 時生成 SourceMap；如果你不了解 SourceMap，可以看看這篇阮一峰大神的《Source Map 詳解》
• gulp-load-plugins 幫忙偷懶用的，可以幫我們加載插件，不用require或者import...
• gulp-jshint JavaScript 代碼校驗
• gulp-sass / gulp-less 編譯sass/less文件

• babel JS 語法新特性用起來。這個插件可以讓我們用新的 標準/特性/提案 寫 JavaScript 代碼，然後再向下 轉換編譯，最終生成隨處可用的 JavaScript代碼。更通俗的說話就是：可以用新的規範寫代碼，經過 babel 編譯後生成沒有兼容問題的代碼。
• gulp-flatten 移動指定文件，不想壓縮或者合並的時候，直接用這個插件把對應文件移動到指定文件夾。
• gulp-markdown-pdf 把 Markdown 編譯為 PDF
• gulp-markdown 寫手的福音，可以把 Markdown 轉成 HTML
• gulp-html2md 把 HTML 編譯為 Markdown
• gulp-tinypng 超屌的圖片壓縮工具，使用 Tinypng 引擎。
• sprity 生成雪碧圖。
• gulp-if 可以在 pipe 裏面寫點邏輯。舉例：比如處理 ./pub/*.js，如果文件名稱是 xxx.js，那麽不處理；更可以用來區分當前是開發環境還是生產環境。

三、插件使用

1 自動加載插件

使用gulp-load-plugins
安裝：npm install --save-dev gulp-load-plugins
要使用gulp的插件，首先得用require來把插件加載進來，如果我們要使用的插件非常多，那我們的gulpfile.js文件開頭可能就會是這個樣子的：

var gulp = require(‘gulp‘),
    //一些gulp插件,abcd這些命名只是用來舉個例子
    a = require(‘gulp-a‘), 
    b = require(‘gulp-b‘),
    c = require(‘gulp-c‘),
    d = require(‘gulp-d‘),
    e = require(‘gulp-e‘),
    f = require(‘gulp-f‘),
    g = require(‘gulp-g‘),
    //...
    z = require(‘gulp-z‘);   

雖然這沒什麽問題，但會使我們的gulpfile.js文件變得很冗長，看上去不那麽舒服。gulp-load-plugins插件正是用來解決這個問題。
gulp-load-plugins這個插件能自動幫你加載package.json文件裏的gulp插件。例如假設你的package.json文件裏的依賴是這樣的:

{
  "devDependencies": {
    "gulp": "~3.6.0",
    "gulp-rename": "~1.2.0",
    "gulp-ruby-sass": "~0.4.3",
    "gulp-load-plugins": "~0.5.1"
  }
}

然後我們可以在gulpfile.js中使用gulp-load-plugins來幫我們加載插件：

var gulp = require(‘gulp‘);
//加載gulp-load-plugins插件，並馬上運行它
var plugins = require(‘gulp-load-plugins‘)();

然後我們要使用gulp-rename和gulp-ruby-sass這兩個插件的時候，就可以使用plugins.rename和plugins.rubySass來代替了,也就是原始插件名去掉gulp-前綴，之後再轉換為駝峰命名。
實質上gulp-load-plugins是為我們做了如下的轉換

plugins.rename = require(‘gulp-rename‘);
plugins.rubySass = require(‘gulp-ruby-sass‘);

gulp-load-plugins並不會一開始就加載所有package.json裏的gulp插件，而是在我們需要用到某個插件的時候，才去加載那個插件。
最後要提醒的一點是，因為gulp-load-plugins是通過你的package.json文件來加載插件的，所以必須要保證你需要自動加載的插件已經寫入到了package.json文件裏，並且這些插件都是已經安裝好了的。

2 重命名

使用gulp-rename
安裝：npm install --save-dev gulp-rename
用來重命名文件流中的文件。用gulp.dest()方法寫入文件時，文件名使用的是文件流中的文件名，如果要想改變文件名，那可以在之前用gulp-rename插件來改變文件流中的文件名。

var gulp = require(‘gulp‘),
    rename = require(‘gulp-rename‘),
    uglify = require("gulp-uglify");
 
gulp.task(‘rename‘, function () {
    gulp.src(‘js/jquery.js‘)
    .pipe(uglify())  //壓縮
    .pipe(rename(‘jquery.min.js‘)) //會將jquery.js重命名為jquery.min.js
    .pipe(gulp.dest(‘js‘));
    //關於gulp-rename的更多強大的用法請參考https://www.npmjs.com/package/gulp-rename
});

3 js文件壓縮

使用gulp-uglify
安裝：npm install --save-dev gulp-uglify
用來壓縮js文件，使用的是uglify引擎

var gulp = require(‘gulp‘),
    uglify = require("gulp-uglify");
 
gulp.task(‘minify-js‘, function () {
    gulp.src(‘js/*.js‘) // 要壓縮的js文件
    .pipe(uglify())  //使用uglify進行壓縮,更多配置請參考：
    .pipe(gulp.dest(‘dist/js‘)); //壓縮後的路徑
});

4 css文件壓縮

使用gulp-minify-css
安裝：npm install --save-dev gulp-minify-css
要壓縮css文件時可以使用該插件

var gulp = require(‘gulp‘),
    minifyCss = require("gulp-minify-css");
 
gulp.task(‘minify-css‘, function () {
    gulp.src(‘css/*.css‘) // 要壓縮的css文件
    .pipe(minifyCss()) //壓縮css
    .pipe(gulp.dest(‘dist/css‘));
});

5 html文件壓縮

使用gulp-minify-html
安裝：npm install --save-dev gulp-minify-html
用來壓縮html文件

var gulp = require(‘gulp‘),
    minifyHtml = require("gulp-minify-html");
 
gulp.task(‘minify-html‘, function () {
    gulp.src(‘html/*.html‘) // 要壓縮的html文件
    .pipe(minifyHtml()) //壓縮
    .pipe(gulp.dest(‘dist/html‘));
});

6 js代碼檢查

使用gulp-jshint
安裝：npm install --save-dev gulp-jshint
用來檢查js代碼

var gulp = require(‘gulp‘),
    jshint = require("gulp-jshint");
 
gulp.task(‘jsLint‘, function () {
    gulp.src(‘js/*.js‘)
    .pipe(jshint())
    .pipe(jshint.reporter()); // 輸出檢查結果
});

7 文件合並

使用gulp-concat
安裝：npm install --save-dev gulp-concat
用來把多個文件合並為一個文件,我們可以用它來合並js或css文件等，這樣就能減少頁面的http請求數了

var gulp = require(‘gulp‘),
    concat = require("gulp-concat");
 
gulp.task(‘concat‘, function () {
    gulp.src(‘js/*.js‘)  //要合並的文件
    .pipe(concat(‘all.js‘))  // 合並匹配到的js文件並命名為 "all.js"
    .pipe(gulp.dest(‘dist/js‘));
});

8 less和sass的編譯

less使用gulp-less,安裝：npm install --save-dev gulp-less

var gulp = require(‘gulp‘),
    less = require("gulp-less");
 
gulp.task(‘compile-less‘, function () {
    gulp.src(‘less/*.less‘)
    .pipe(less())
    .pipe(gulp.dest(‘dist/css‘));
});

sass使用gulp-sass,安裝：npm install --save-dev gulp-sass

var gulp = require(‘gulp‘),
    sass = require("gulp-sass");
 
gulp.task(‘compile-sass‘, function () {
    gulp.src(‘sass/*.sass‘)
    .pipe(sass())
    .pipe(gulp.dest(‘dist/css‘));
});

9 圖片壓縮

可以使用gulp-imagemin插件來壓縮jpg、png、gif等圖片。
安裝：npm install --save-dev gulp-imagemin

var gulp = require(‘gulp‘);
var imagemin = require(‘gulp-imagemin‘);
var pngquant = require(‘imagemin-pngquant‘); //png圖片壓縮插件

gulp.task(‘default‘, function () {
    return gulp.src(‘src/images/*‘)
        .pipe(imagemin({
            progressive: true,
            use: [pngquant()] //使用pngquant來壓縮png圖片
        }))
        .pipe(gulp.dest(‘dist‘));
});

gulp-imagemin的使用比較復雜一點，而且它本身也有很多插件，建議去它的項目主頁看看文檔

10 自動刷新

使用gulp-livereload插件，安裝:npm install --save-dev gulp-livereload。
當代碼變化時，它可以幫我們自動刷新頁面
該插件最好配合谷歌瀏覽器來使用，且要安裝livereload chrome extension擴展插件。

var gulp = require(‘gulp‘),
    less = require(‘gulp-less‘),
    livereload = require(‘gulp-livereload‘);

gulp.task(‘less‘, function() {
  gulp.src(‘less/*.less‘)
    .pipe(less())
    .pipe(gulp.dest(‘css‘))
    .pipe(livereload());
});

gulp.task(‘watch‘, function() {
  livereload.listen(); //要在這裏調用listen()方法
  gulp.watch(‘less/*.less‘, [‘less‘]);
});

gulp介紹及常用插件使用方法