77      阿裏雲  技術社區[雲棲]

gulp的學習

Gulp Tutorial

Gulp: The streaming build system

gulp是前端開發過程中一種基於流的代碼構建工具，是自動化項目的構建利器；
她不僅能對網站資源進行優化，而且在開發過程中很多重複的任務能夠使用正確的工具自動完成；
使用她，不僅可以很愉快的編寫代碼，而且大大提高我們的工作效率。

項目構建是指項目上線之前對項目源代碼進行一係列處理，使其以最佳的形式運行於線上服務器。
常見處理任包括以下幾方麵：

1. 模塊化開發可以實現功能的複用並解決模塊間的依賴關係，但帶來好處的同時也使得功能代碼的碎片化（若幹文件）程度增加。
2. 使用less、sass等預處理器，可以降低CSS的維護成本，最終需要將這些預處理器編譯成css文件；
3. 對靜態資源（css、js、html、images）壓縮合並可以提升網頁打開速度，提高性能；

以上任務完如果完全靠手動來完成是非常耗時耗力的且容易出錯，實際開發通常借助構建工具來實現。
所謂構建工具是指通過一係簡單配置就可以幫我們實現合並、壓縮、校驗、預處理等一係列任務的軟件工具。
常見的構建工具包括：Grunt、Gulp、F.I.S（百度出品）、webpack等。

Gulp是基於Nodejs開發的一個構建工具，借助gulp插件可以實現不同的構建任務，
其以簡潔的配置和卓越的性能成為目前主流的構建工具。

Introduction

• 官方：https://gulpjs.com/
• 中文官網：https://www.gulpjs.com.cn/
• npm：https://www.npmjs.com/package/gulp
• Github：https://github.com/gulpjs/gulp
• Gitbook：https://wizardforcel.gitbooks.io/gulp-doc/content/2.html

Getting Started

官方文檔：https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

一：Install the gulp command

在項目中使用 gulp 首先需要確保全局有 gulp-cli 環境，如果有就不需要執行下麵的命令了。

# npm install --global gulp-cli
yarn global add gulp-cli

二：Install gulp in your devDependencies

# npm install --save-dev gulp
yarn add -D gulp

三：Create a file called gulpfile.js in your project root with these contents:

var gulp = require('gulp');

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

四：Test it out: Run the gulp command in your project directory:

gulp

API Documentation

官方文檔：https://github.com/gulpjs/gulp/blob/master/docs/API.md

• gulp.task
• gulp.src
• gulp.dest
• gulp.watch

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

作用：定義各種不同的任務

• gulp.task(name, fn)
• gulp.task(name, deps, fn)
• gulp.task(name, fn(cb))
• gulp.task(name, deps, fn(cb))

一：普通任務

gulp.task('a', function () {
  console.log('1 aaa')
})

gulp.task('b', function () {
  console.log('2 bbb')
})

二：任務之間的依賴

gulp.task('a', function (cb) {
  setTimeout(function () {
    console.log('1 aaa')
    cb()
  }, 1000)
})

// b 任務依賴的 a 任務中的回調函數如果不調用，b 任務是不會執行的
gulp.task('b', ['a'], function () {
  console.log('2 bbb')
})

三：gulp 流控製

gulp.task('a', function () {
  // 當任務中是一個 gulp 流的時候則需要通過 return 來保證依賴中的執行順序
  return gulp.src()
    .pipe()
    // ...
})

gulp.task('b', ['a'], function () {
  // doSomething
})

gulp.src(globs[, options])

gulp教程之gulp中文API：https://www.ydcss.com/archives/424

作用：根據路徑（字符串或數組）讀取需要構建的資源

globs

需要處理的源文件匹配符路徑。

類型(必填)：String or StringArray，通配符路徑匹配示例：

• src/a.js 指定具體文件；
• * 匹配所有文件 例：src/*.js (包含src下的所有js文件)；
• ** 匹配0個或多個子文件夾 例：src/**/*.js (包含src的0個或多個子文件夾下的js文件)；
• {} 匹配多個屬性 例：src/{a,b}.js (包含a.js和b.js文件) src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；
• ! 排除文件 例：!src/a.js (不包含src下的a.js文件)；

options.base

options.base：類型：String 設置輸出路徑以某個路徑的某個組成部分為基礎向後拚接，具體看下麵示例：

gulp.src('client/js/*/.js') 
  .pipe(minify())
  .pipe(gulp.dest('build'))  // Writes 'build/somedir/somefile.js'

gulp.src('client/js/*/.js', { base: 'client' })
  .pipe(minify())
  .pipe(gulp.dest('build'))  // Writes 'build/js/somedir/somefile.js'

gulp.dest(path[, options])

作用：構建任務完成後資源存放的路徑

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

監視指定資源的改動，然後可以調用響應的任務處理

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

常用插件

gulp 實戰之：高級寫頁麵

實現 HTML 模板功能，例如公共 HTML 頭部和底部，提供可維護性，
以及實現 HTML 自動壓縮，css 壓縮，js 壓縮，或者合並。

最後更新：2017-11-15 15:34:46

  上一篇：  雙11幕後超級英雄：新一代運維的價值

  下一篇：  FinTech創業的兩大勢力，以及他們各有千秋的數據應用模式 | TCFA紐約年會直擊