Gulp.js：比 Grunt 更簡單的自動化的項目構建利器

Lsnsh 發布于2019-08-21 12:07 / 763人閱讀

摘要：是一款基于任務的設計模式的自動化工具，能給你的開發效率來一次飛躍。示例配置實現完整的自動編譯并刷新網頁官方網站使用文檔插件列表

Gulp 是一款基于任務的設計模式的自動化工具，能給你的開發效率來一次飛躍。

在很多場合都會聽到前端工和 node 程師推薦 Grunt 來實現項目的自動化，自動化可以自動完成 javascript/coffee/sass/less 等文件的的測試、檢查、合并、壓縮、格式化、部署文件生成，并監聽文件在改動后重復指定的這些步驟。

得益于 Grunt 基于任務的設計模式，這些步驟可以很好的歸類執行，讓開發效率得到了一次提升，但殺敵 1000，得自損 800 啊，學習曲線有點高。

Grunt.js 太復雜了，復雜到比使用和配置 Vim 都困難。恰好看到有人推薦 Gulp，打開網站的瞬間就明白：短短 4 段文字就說清安裝和使用方法，沒錯就選 Gulp 了。

Gulp 簡明教程：

Gulp 是基于 node.js 的，所以你需要先安裝 node.js http://nodejs.org/download/

1. 安裝 Gulp

npm install -g gulp
npm install --save-dev gulp

2. 安裝插件

npm install gulp-compass --save-dev

3. 創建配置文件 gulpfile.js

在項目的根目錄創建配置文件 gulpfile.js，Gulp 僅有 5 個方法就能組合出你需要的任務流程：task, run, watch, src, dest

來看一個典型的 gulpfile.js 文件，該文件執行 Compass 任務，Compass 包含 SASS 大量定義好的 mixin，函數，以及對 SASS 的擴展：

// 引入 gulp
var gulp = require("gulp");

// 引入 Plugins
var compass = require("gulp-compass");

// 創建 Compass 任務
gulp.task("compass", function() {
  gulp.src("./scss/**")
    .pipe(compass({
        comments: false,
        css: "css",
        sass: "scss",
        image: "img"
    }));
});

// 默認任務
gulp.task("default", function() {
    gulp.run("compass");

    gulp.watch([
        "./scss/**",
        "./img/**"
        ], function(event) {
        gulp.run("compass");
    });
});

4. 運行 Gulp

在項目目錄下執行 gulp 命令就會運行 default 任務：先運行一遍 compass 任務，然后監視 scss 和 img 目錄的變動，如果有改動再執行 compass 任務。

執行 gulp compass 就能運行 compass 任務，非常方便，還有更多高級的配置和使用方法，可以看更詳細的官方文檔。

示例配置：Gulp 實現完整的 SASS 自動編譯并刷新網頁
官方網站：http://gulpjs.com/
使用文檔：https://github.com/wearefract...
插件列表：http://gratimax.github.io/sea...

云服務器 GPU云服務器簡單的asp項目馬斯克：特斯拉自動駕駛系統的目標是比人類比深度學習更強更改過域名的公司

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87449.html

“流式”前端構建工具——gulp.js 簡介

摘要：流式構建改變了底層的流程控制，大大提高了構建工作的效率和性能，給用戶的直觀感覺就是更快。我的看法關于流式構建，短短幾句話無法講清它的來龍去脈，但是在的世界里，確實是至關重要的。 Grunt 一直是前端領域構建工具（任務運行器或許更準確一些，因為前端構建只是此類工具的一部分用途）的王者，然而它也不是毫無缺陷的，近期風頭正勁的 gulp.js 隱隱有取而代之的態勢。那么，究竟是什么使得 g...

ShevaKuilin 2019-08-21 12:12 評論0 收藏0
前端構建工具整理

摘要：常見前端構建工具的分類和對比是附帶的包管理器，是內置的一個功能，允許在文件里面使用字段定義任務在這里，一個屬性對應一段腳本，原理是通過調用去運行腳本命令。前文端技術范圍不斷發展，前端開發不僅限于直接編寫html，css和javascript，Web應用日益龐大，代碼也更加龐大，因此許多新的思想（例如模塊化和工程化等）和框架（React和Vue等），以及新的語言（Es6 TypeSc...

leo108 2019-08-23 10:53 評論0 收藏0
Gulp 入門指南

摘要：簡而言之，任何符合匹配規則的文件發生改變就會運行任務列表中的任務。第二種形式的參數是一個匹配規則，可選的選項對象，和一個可選的回調函數。當事件發生時會運行該回調函數。它獲取任何或其子目錄下的文件，因此，同樣會應用于該任務。參考原文地址： https://scotch.io/tutorials/a... 源碼Github地址：https://github.com/scotch-io...

yanbingyun1990 2019-08-21 17:19 評論0 收藏0
gulp詳細基礎教程

摘要：核心概念流流，簡單來說就是建立在面向對象基礎上的一種抽象的處理數據的工具。類型，設置輸出路徑以某個路徑的某個組成部分為基礎向后拼接。一、gulp簡介 1.gulp是什么？ gulp是前端開發過程中一種基于流的代碼構建工具，是自動化項目的構建利器；它不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用它，不僅可以很愉快的編寫代碼，而且大大提高我們的工...

xuhong 2019-08-28 18:16 評論0 收藏0
gulp詳細基礎教程

摘要：核心概念流流，簡單來說就是建立在面向對象基礎上的一種抽象的處理數據的工具。類型，設置輸出路徑以某個路徑的某個組成部分為基礎向后拼接。一、gulp簡介 1.gulp是什么？ gulp是前端開發過程中一種基于流的代碼構建工具，是自動化項目的構建利器；它不僅能對網站資源進行優化，而且在開發過程中很多重復的任務能夠使用正確的工具自動完成；使用它，不僅可以很愉快的編寫代碼，而且大大提高我們的工...

vibiu 2019-08-21 10:38 評論0 收藏0