構建工具-Gulp 相關知識

時間  2019-11-10
標籤 構建 工具 gulp 相關 知識 欄目 JavaScript 简体版
原文   原文鏈接

layout: layout
title: 『構建工具-Gulp』相關內容整理
date: 2017-04-26 22:15:46
tags: Gulp
categories: Tools
---javascript

Gulp- 簡介

Automate and enhance your workflow | 用自動化構建工具加強你的工做流程css

Gulp 是什麼？

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

gulp是基於Nodejs的自動任務運行器，它能自動化地完成 javascript、coffee、sass、less、html/image、css 等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。經過本文，咱們將學習如何使用Gulp來改變開發流程，從而使開發更加快速高效。前端

gulp 和 grunt 很是相似，但相比於 grunt 的頻繁 IO 操做，gulp 的流操做，能更快地更便捷地完成構建工做。java

Gulp的核心概念？

流，簡單來講就是創建在面向對象基礎上的一種抽象的處理數據的工具。在流中，定義了一些處理數據的基本操做，如讀取數據，寫入數據等，程序員是對流進行全部操做的，而不用關心流的另外一頭數據的真正流向。流不但能夠處理文件，還能夠處理動態內存、網絡數據等多種數據形式。node

而gulp正是經過流和代碼優於配置的策略來儘可能簡化任務編寫的工做。這看起來有點「像jQuery」的方法，把動做串起來建立構建任務。早在Unix的初期，流就已經存在了。流在Node.js生態系統中也扮演了重要的角色，相似於*nix將幾乎全部設備抽象爲文件同樣，Node將幾乎全部IO操做都抽象成了stream的操做。所以用gulp編寫任務也可看做是用Node.js編寫任務。當使用流時，gulp去除了中間文件，只將最後的輸出寫入磁盤，整個過程所以變得更快。程序員

Gulp的特色?

  • 易於使用:
    經過代碼優於配置的策略，gulp 讓簡單的任務簡單，複雜的任務可管理。
  • 構建快速:
    利用 Node.js 流的威力，你能夠快速構建項目並減小頻繁的 IO 操做。
  • 易於學習:
    經過最少的 API，掌握 gulp 絕不費力，構建工做盡在掌握：如同一系列流管道。
  • 插件高質:
    gulp 嚴格的插件指南確保插件如你指望的那樣簡潔高質得工做。

Gulp- 環境搭建

gulp 是基於 node 實現的，那麼咱們就須要先安裝 node。web

Node是一個基於Google V8 JavaScript引擎創建的一個平臺，能夠利用它實現Web服務，作相似PHP的事。chrome

npm install -g gulp  # 全局安裝gulp 
gulp -v  # 查看gulp是否安裝成功

➜  ~ gulp -v
   [20:17:32] CLI version 3.9.1

Gulp- 構建項目

使用Gulp來構建項目:

mkdir Gulp && cd Gulp && npm init -y && npm install gulp --save-dev
#使用npm初始化項目而且安裝Gulp模塊,可以看到以下的package.json文件中已經包含了Gulp的相關信息。
{
  "name": "Gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

gulpfile.js文件的使用：

gulp也須要一個文件做爲它的主文件，在gulp中這個文件叫作gulpfile.js。shell

建立gulpfile.js文件，與package.json文件同樣放在項目根目錄中，以後須要作的就是在gulpfile.js文件中定義任務了。

在gulpfile.js文件中寫入如下內容：

var gulp = require('gulp');
    gulp.task('default', function() {
      console.log("Gulp OK!");
    });

完成以後在Terminal中運行gulp命令，而後會看到剛纔在task任務中要輸出的內容.

➜  gulp
[00:35:29] Using gulpfile ~/WebStrom-Work/Gulp/gulpfile.js
[00:35:29] Starting 'default'...
Gulp OK!
[00:35:29] Finished 'default' after 141 μs

Gulp- API

gulp.src()

語法：

gulp.src(globs[, options])

輸出（Emits）符合所提供的匹配模式（glob）或者匹配模式的數組（array of globs）的文件。 將返回一個 Vinyl files 的 stream 它能夠被 piped 到別的插件中。

名稱 類型 含義
globs String 或 Array 所要讀取的 glob 或者包含 globs 的數組。
options Object 經過 glob-stream 所傳遞給 node-glob 的參數。

gulp.dest()

語法：

gulp.dest(path[, options])

能被 pipe 進來，而且將會寫文件。而且從新輸出（emits）全部數據，所以你能夠將它 pipe 到多個文件夾。若是某文件夾不存在，將會自動建立它。

  • path 類型： String or Function ,文件將被寫入的路徑（輸出目錄）。也能夠傳入一個函數，在函數中返回相應路徑，這個函數也能夠由 vinyl 文件實例 來提供。

  • options
    類型： Object , 爲一個可選的參數對象，一般咱們不須要用到

gulp.task()

語法：

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

  • name
    類型： String，任務的名字，若是你須要在命令行中運行你的某些任務，那麼，請不要在名字中使用空格。

  • deps
    類型： Array，一個包含任務列表的數組，這些任務會在你當前任務運行以前完成。
    $xslt demo gulp.task('mytask', ['array', 'of', 'task', 'names'], function() { // 作一些事 });
    注意： 你的任務是否在這些前置依賴的任務完成以前運行了？請必定要確保你所依賴的任務列表中的任務都使用了正確的異步執行方式：使用一個 callback，或者返回一個 promise 或 stream。

  • fn
    該函數定義任務所要執行的一些操做。一般來講，它會是這種形式：gulp.src().pipe(someplugin())。

gulp.watch()

語法：

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

gulp.watch()用來監視文件的變化，當文件發生變化後，咱們能夠利用它來執行相應的任務。

  • glob類型： String or Array ,一個 glob 字符串，或者一個包含多個 glob 字符串的數組，用來指定具體監控哪些文件的變更。

  • opts 類型： Object

傳給 gaze 的參數。

  • cb(event)
    類型： Function ,每次變更須要執行的 callback。

參考：Gulp-API

Gulp- 經常使用插件

壓縮JS -> gulp-uglify:

安裝 gulp-uglify:

npm install gulp-uglify --save-dev

示例代碼：

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

gulp.task('javascript',function () { // javascript: 任務名稱
    gulp.src('./src/js/*.js')  // src: 定位到須要壓縮的js文件目錄下
        .pipe(uglify()) // 執行壓縮文件
        .pipe(gulp.dest('./dist/js')); // 輸出到指定目錄
});

API參考：gulp-uglify

壓縮CSS -> gulp-minify-css:

安裝 gulp-minify-css：

npm install gulp-minify-css --save-dev

示例代碼：

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

gulp.task('css',function () {
    gulp.src('./src/css/*.css')
    .pipe(minify())
    .pipe(gulp.dest('./dist/css'));
});

API參考：gulp-minify-css

壓縮圖片 -> gulp-imagemin：

安裝 gulp-imagemin：

npm install gulp-imagemin --save-dev

示例代碼：

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

gulp.task('image',function () {
    gulp.src('./src/images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'));
});

API參考：gulp-imagemin

編譯Less-> gulp-less:

安裝 gulp-less：

npm install gulp-less --save-dev

示例代碼：

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

gulp.task('less',function () {
    gulp.src('./src/less/*.*')
        .pipe(less())
        .pipe(gulp.dest('./dist/less'));
});

API參考：gulp-less

自動刷新-> gulp-livereload：

安裝gulp-livereload：

npm install gulp-livereload --save-dev

示例代碼：

在每一個gulp.task()方法中的gulp.src()方法後追加   .pipe(livereload());    便可。

須要配合谷歌瀏覽器插件 LiveReload插件來使用，實現自動刷新。

API參考：gulp-livereload

Google Chrome Plugin：LiveReload

完整gulpfile.js文件：

var gulp = require('gulp'); // Gulp
var uglify = require('gulp-uglify');  // JavaScript
var minify = require('gulp-minify-css'); // CSS
var imagemin = require('gulp-imagemin'); // Images
var less = require('gulp-less'); // Less
var livereload = require('gulp-livereload') // LiveReload

// 執行全部任務
gulp.task('default', ['javascript','css','less','image']);

gulp.task('javascript',function () { // jsscript: 任務名稱
    gulp.src('./src/js/*.js')  // src: 定位到須要壓縮的js文件目錄下
        .pipe(uglify()) // 執行壓縮文件
        .pipe(gulp.dest('./dist/js')); // 輸出到指定目錄
});



gulp.task('css',function () {
    gulp.src('./src/css/*.css')
        .pipe(minify())
        .pipe(gulp.dest('./dist/css'));
});

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


gulp.task('image',function () {
    gulp.src('./src/images/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./dist/images'));
});

Gulp- 參考資料

常見web項目目錄：

在當前項目的根目錄下執行tree命令，便可看到項目的整個目錄結構，若是沒有tree命令，在Mac系統下可使用brew進行安裝：

➜  Glup tree ../Glup
../Glup

├── build # 項目構建腳本
├── src # 源碼目錄
│   ├── css # CSS文件
│   ├── fonts # 字體文件
│   ├── images # 圖片文件
│   ├── js # js腳本文件
│   ├── less # less文件
│   └── sass # sass文件
├── dist # 編譯出來的發佈版本目錄
│   ├── css 
│   ├── fonts
│   ├── images
│   └── js 
├── docs # 文檔
├── test # 測試腳本
├── gulpfile.js # Gulp工具構建項目的主文件
├── node_modules # npm包存放目錄
├── package-lock.json #npm5.0以上項目依賴文件
├── package.json # npm包管理配置文件
├── LICENSE # 受權協議
└── README.md # 項目說明文件
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程