成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Gulp.js：比 Grunt 更簡單的自動(dòng)化的項(xiàng)目構(gòu)建利器

Lsnsh / 793人閱讀

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

Gulp 是一款基于任務(wù)的設(shè)計(jì)模式的自動(dòng)化工具，能給你的開發(fā)效率來一次飛躍。

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

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

Grunt.js 太復(fù)雜了，復(fù)雜到比使用和配置 Vim 都困難。恰好看到有人推薦 Gulp，打開網(wǎng)站的瞬間就明白：短短 4 段文字就說清安裝和使用方法，沒錯(cuò)就選 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

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

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

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

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

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

// 默認(rèn)任務(wù)
gulp.task("default", function() {
    gulp.run("compass");

    gulp.watch([
        "./scss/**",
        "./img/**"
        ], function(event) {
        gulp.run("compass");
    });
});
4. 運(yùn)行 Gulp

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/87449.html

相關(guān)文章

  • “流式”前端構(gòu)建工具——gulp.js 簡介

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

    ShevaKuilin 評論0 收藏0

  • 前端構(gòu)建工具整理

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

    leo108 評論0 收藏0

  • Gulp 入門指南

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

    yanbingyun1990 評論0 收藏0

  • gulp詳細(xì)基礎(chǔ)教程

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

    xuhong 評論0 收藏0

  • gulp詳細(xì)基礎(chǔ)教程

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

    vibiu 評論0 收藏0

發(fā)表評論

0條評論

Lsnsh

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<