Gulp學習版本為3.9.1

1. Gulp特點

任務化
基于流
- 輸入流
- 輸出流

2. API

gulp.src(globs[, options]) 輸入檔案：輸入流
gulp.dest(path[, options]) 輸出檔案：輸出流
gulp.task(name[, deps], fn) 任務化
gulp.watch(glob[, opts], tasks) 監視

3. 目錄結構

|- dist
|- src
    |- js
    |- css
    |- less
|- index.html
|- gulpfile.js
|- package.json
    {
        "name": "gulp_study",
        "version": "1.0.0"
    }

4. 安裝gulp

全局安裝：

npm install gulp -g

局部安裝：

npm install gulp -S

配置編碼

// gulpfile.js
var gulp = require('gulp')
// 注冊任務
gulp.task('任務名', function(){
    // 配置任務的操作
})

gulp.task('default', [])

之後我們可以使用

gulp 任務名

來執行某個特定的任務，或者使用

gulp

來執行預設的任務序列**（gulp4 已棄用）**

5. 常用的gulp插件

sass的編譯（ gulp-sass ）
less編譯（ gulp-less ）
重命名（為壓縮的檔案加’.min’）（ gulp-rename ）
自動添加css字首（ gulp-autoprefixer ）
壓縮css（ gulp-minify-css ）
js代碼校驗（ gulp-jshint ）
合并js/css檔案（ gulp-concat ）
壓縮js代碼（ gulp-uglify ）
壓縮圖檔（ gulp-imagemin ）
自動重新整理頁面（ gulp-livereload ，谷歌浏覽器親測，谷歌浏覽器需安裝livereload插件）
圖檔緩存，隻有圖檔替換了才壓縮（ gulp-cache ）
更改提醒（ gulp-notify ）

6. 合并壓縮js任務

6.1 配置任務

我們在

src/js

檔案夾中建立兩個js檔案，分别對應了兩個方法，我們想要将這兩個js檔案合并為一個檔案，需要在

gulpfile.js

檔案中定義任務流：

gulp.task('js', function() {
    // 深度周遊
    // return gulp.src('src/js/**/*.js') 
    // 淺度周遊
    return gulp.src('src/js/*.js') // 找到目标檔案，将資料讀取到gulp的記憶體中
})

6.2 下載下傳和使用插件

安裝插件

當gulp讀取檔案到記憶體中後，會進行一系列操作，這些操作會用到gulp插件：

cnpm install gulp-concat gulp-uglify gulp-rename --save-dev

引入插件

引入插件：

// gulpfile.js
var concat = require('gulp-concat')
var uglify = require('gulp-uglify')
var rename = require('gulp-rename')

注冊任務

在引入插件之後我們便可以執行鍊式調用來配置任務了，每一個操作用

pipe

方法來進行連接配接：

// gulpfile.js
gulp.task('js', function () {
    return gulp.src('src/js/*.js')
        .pipe(concat('build.js')) // 臨時合并檔案
        .pipe(gulp.dest('dist/js/')) // 臨時輸出檔案到本地
        .pipe(uglify())
        .pipe(rename({ suffix: '.min' })) // 重命名
        .pipe(gulp.dest('dist/js/'))
})

6.3 執行任務

調用已注冊的任務，我們可以得到一個已經合并的檔案

build.js

和一個合并并壓縮的檔案

build.min.js

gulp js

gulp會自動忽略為調用的函數方法

7. 合并壓縮css任務

下載下傳插件

npm install gulp-less gulp-clean-css --save-dev

引入和使用插件

// gulpfile.js
var gulp = require('gulp')
var concat = require('gulp-concat')
var rename = require('gulp-rename')
var less = require('gulp-less')
var cssClean = require('gulp-clean-css')

// 注冊轉換less的任務
gulp.task('less', function () {
    return gulp.src('src/less/*.less')
        .pipe(less()) // 編譯less檔案為css檔案
        .pipe(gulp.dest('src/css')) // 将less編譯為css檔案後存放到css檔案夾中，等待後續統一合并
})

// 合并壓縮css檔案
gulp.task('css', function () {
    return gulp.src('src/css/*.css')
        .pipe(concat('build.css'))
        .pipe(rename({ suffix: '.min' }))
        .pipe(cssClean({ compatibility: 'ie8' })) // 壓縮、設定相容到ie8
        .pipe(gulp.dest('dist/css/'))
})

gulp.task('default', [])

執行任務

> gulp less
[15:18:39] Using gulpfile D:\test\gulp_study\gulpfile.js
[15:18:39] Starting 'less'...
[15:18:39] Finished 'less' after 43 ms

> gulp css
[15:18:46] Using gulpfile D:\test\gulp_study\gulpfile.js
[15:18:46] Starting 'css'...
[15:18:46] Finished 'css' after 48 ms

8. 線性執行任務

// gulpfile.js
... ...
gulp.task('default', ['js', 'less', 'css'])

在用這種方式時，gulp的每個編譯任務是移異步進行的，如果将編寫任務中的

return

去掉，則編譯過程是同步進行的，如：

gulp.task('js', function () {
-   return gulp.src('src/js/*.js')
+   gulp.src('src/js/*.js')
      .pipe(concat('build.js')) // 臨時合并檔案
      .pipe(gulp.dest('dist/js/')) // 臨時輸出檔案到本地
      .pipe(uglify())
      .pipe(rename({ suffix: '.min' })) // 重命名
      .pipe(gulp.dest('dist/js/'))
  })

但是我們不推薦這麼做（占記憶體，速度慢）

當我們需要逐個執行任務的時候，可以在設定任務的第二個參數位置，去設定它的依賴任務，如我們如果需要設定先執行

less

任務，再執行

css

任務，那麼

css

任務的依賴任務就是

less

任務，我們可以進行如下設定：

// gulpfile.js
gulp.task('css', ['less'], function () {
  return gulp.src('src/css/*.css')
    // ... ...
})

9. html壓縮

下載下傳插件

npm install gulp-html --save-dev

引入和使用插件

// glupfile.js
var htmlMin = require('gulp-html')
// ... ...

// 注冊壓縮html的任務
gulp.task('html', function () {
  return gulp.src('index.html')
    .pipe(htmlMin({ collapseWhitespace: true })) // 壓縮html
    .pipe(gulp.dest('dist/')) // 輸出
})

執行任務

gulp html

注意路徑問題，壓縮輸出的 html 換到了另外的一個路徑下，這個是以導出 html 前，必須将路徑配置到 dist 目錄下。

10. 半自動進行項目建構

下載下傳插件

npm install gulp-livereload --save-dev

配置編碼

// 監視任務
gulp.task('watch', ['default'], function () {
  // 開啟監聽
  livereload.listen();
  // 确認監聽的目标以及綁定相應的任務
  gulp.watch('src/js/*.js', ['js']);
  gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css'])
})

在設定完監聽任務後，需要在監聽的任務中再額外增加一個

pipe(livereload())

方法，如：

gulp.task('js', function () {
    return gulp.src('src/js/*.js')
      .pipe(concat('build.js')) // 臨時合并檔案
      .pipe(gulp.dest('dist/js/')) // 臨時輸出檔案到本地
      .pipe(uglify())
      .pipe(rename({ suffix: '.min' })) // 重命名
      .pipe(gulp.dest('dist/js/'))
+     .pipe(livereload())
  })

執行任務

gulp watch

之後當我們編輯監聽中的代碼時，就可以自動打包編譯，之後再手動重新整理浏覽器後就可以浏覽效果，如果想要自動重新整理看下一節全自動建構項目。

11. 全自動建構項目

安裝插件

npm install gulp-connect --save-dev

引入并使用插件

var connect = require('gulp-connect')
// ... ...

// gulpfile.js
// 注冊監視任務（全自動）
gulp.task('server', ['default'], function () {
  // 配置伺服器選項
  connect.server({
    root: 'dist/',
    livereload: true, // 實時重新整理
    port: 5000
  })
  // 确認監聽的目标以及綁定相應的任務
  gulp.watch('src/js/*.js', ['js']);
  gulp.watch(['src/css/*.css', 'src/less/*.less'], ['css'])
})

相似的，在設定完全自動監聽的任務後，需要在監聽的任務中再額外增加一個

.pipe(connect.reload())

方法，如：

gulp.task('js', function () {
    return gulp.src('src/js/*.js')
      .pipe(concat('build.js')) // 臨時合并檔案
      .pipe(gulp.dest('dist/js/')) // 臨時輸出檔案到本地
      .pipe(uglify())
      .pipe(rename({ suffix: '.min' })) // 重命名
      .pipe(gulp.dest('dist/js/'))
+     .pipe(connect.reload())
  })

執行任務

gulp server

12. 擴充

12.1 使用 open 子產品自動打開浏覽器

npm install open --save-dev

// gulpfile.js
var open = require('open')

... ...

// 注冊監視任務（全自動）
gulp.task('server', ['default'], function () {
  ... ...
  open('http://localhost:5000')
})

12.2 使用 gulp-load-plugins 插件

下載下傳：

cnpm install gulp-load-plugins --save-dev

引入：

之後我們便可以直接使用 $ 對象來調用所有的插件方法：

var gulp = require('gulp')
// var concat = require('gulp-concat')
// var uglify = require('gulp-uglify')
// var rename = require('gulp-rename')
// var less = require('gulp-less')
// var cssClean = require('gulp-clean-css')
// var htmlMin = require('gulp-htmlmin')
// var livereload = require('gulp-livereload')
// var connect = require('gulp-connect')
// var open = require('open')
var $ = require('gulp-load-plugins')

// 注冊壓縮html的任務
gulp.task('js', function () {
  return gulp.src('src/js/*.js')
    .pipe($.concat('build.js')) // 臨時合并檔案
    .pipe(gulp.dest('dist/js/')) // 臨時輸出檔案到本地
    .pipe($.uglify())
    .pipe($.rename({ suffix: '.min' })) // 重命名
    .pipe(gulp.dest('dist/js/'))
    .pipe($.livereload())
    .pipe($.connect.reload())
})

命名規則：

使用

對象引入的 gulp 插件必須有其對應的命名方法，其規則為：

忽略連接配接符前的 gulp，直接寫插件名稱，如： gulp-concat 插件對應的引入方法為 $.concat
如果有多個連接配接符，則采用駝峰命名，如： gulp-clean-css 插件對應的引入方法為 $.cleanCss

gulp快速使用指南1. Gulp特點2. API3. 目錄結構4. 安裝gulp5. 常用的gulp插件6. 合并壓縮js任務7. 合并壓縮css任務8. 線性執行任務9. html壓縮10. 半自動進行項目建構11. 全自動建構項目

1. Gulp特點

2. API

3. 目錄結構

4. 安裝gulp

5. 常用的gulp插件

6. 合并壓縮js任務

6.1 配置任務

6.2 下載下傳和使用插件

6.3 執行任務

7. 合并壓縮css任務

8. 線性執行任務

9. html壓縮

10. 半自動進行項目建構

11. 全自動建構項目

12. 擴充

12.1 使用 open 子產品自動打開浏覽器

12.2 使用 gulp-load-plugins 插件

繼續閱讀

gulp插件簡介

gulp入門系列之一：問題記錄

Gulp建構案例

Gulp 入門，就是這麼簡單

gulp 入門

gulp學習筆記0 起因1 簡述2 gulp的API

使用gulp時常用的插件介紹及用法

由于MIME類型未加載樣式表

gulp自動化建構流程什麼是gulp

gulp自動化建構

基于 gulp 的自動化建構之“靜态資源版本管理”--2017年12月"gulp-rev"版本8.1.0

一篇文章讓你搞懂前端自動化建構工具gulp導語1.什麼是gulp，gulp有什麼用2.與其他工具的對比3.gulp的安裝：4.API簡介：尾語

釋出一個npm包

哈啰開源Dora：解析Taro多業務線小程式協作建構工具與前端協作流

gulp 重命名 vue-cli3的釋出檔案

gradle 使用者手冊第一章（嘗試翻譯）