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

Lsnsh 發(fā)布于2019-08-21 12:07 / 900人閱讀

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

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

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

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

Grunt.js 太復雜了，復雜到比使用和配置 Vim 都困難。恰好看到有人推薦 Gulp，打開網(wǎng)站的瞬間就明白：短短 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. 創(chuàng)建配置文件 gulpfile.js

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

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

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

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

// 創(chuàng)建 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

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

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

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

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

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/87449.html

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

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

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

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

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

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

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

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

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

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

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