開始使用Gulp

2021-07-15 12:06:38 字數 2989 閱讀 4255

結語參考與擴充套件

接觸gulp不多,感觸卻多。不過一句話:省了好多麻煩。如果你也是做web前端的,並且也想更加便捷高效的去完成自己的專案,那麼可以嘗試使用一下gulp。

首先看看gulp的定義:gulp是乙個基於流的自動化構建工具。大家都明白什麼是自動化 (就是懶人不用動手了唄),構建工具就是說這是乙個工具,並且是用來構建工程用的 。那麼什麼是基於流呢?如果知道unix的管道命令的人就會知道,把上乙個操作的輸出當做下乙個操作的輸入,形成乙個連貫的過程。打個比方就好像是乙個生產汽車的自動化車間,可能首先是生產出乙個輪子,向下傳遞,然後下一道工序是加上車架,然後再下一道工序是噴漆等等。而這個流程線就是所謂的了。

好吧!管他什麼流呢!反正是自動化的肯定就是能幫我們省很多事的 (不過流這樣的方式的確很便捷、高效)。

gulp是很簡單的 ( 對於已有npm和基礎的nodejs經驗的同學)

$ npm install -g gulp

gulp實際上就和nodejs模組一樣,安裝方式相同,接下來你會發現,實際上這就是乙個模組嘛!

在這裡我們通過npm init初始化乙個專案。

然後在你的工程目錄的根目錄下建立乙個gulpfile.js(檔名可不能變啊) ,寫入如下內容:

var gulp = require('gulp'); // 引入gulp模組

gulp.task('mytask', function

() );

然後我們可以在命令列 (處於gulpfile.js同一目錄下) 中使用gulp mytask這樣的命令執行乙個gulp任務 ( 這裡的mytask就是我們宣告的任務 ) 。好吧!直到這裡感覺就好像是前面宣告了乙個事件,然後在這裡用乙個命令觸發了那個事件那麼簡單。而這個「事件」裡面就是需要自動化處理的內容了。

關於gulp本身我們需要知道幾個東西

具體api請參考:

gulp任務執行後,就會執行一些操作。大多數時候gulp的操作能力是來自gulp外掛程式,我們需要什麼樣的操作就引入什麼樣的外掛程式,然後在gulp任務中按照我們的意願來組織。

外掛程式的引入方式也就是nodejs 模組的引入方式,用require即可。外掛程式的安裝方式也是用npm安裝。

這個外掛程式是用來編譯less檔案的。

安裝此外掛程式:

npm install gulp-less

gulpfile.js中寫入

var gulp = require('gulp');

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

gulp.task('style', function

() );

在根目錄下建立 main.less 這個檔案並寫入一定的less**。然後我們用gulp style執行一下這個style任務。發現我們的main.less 檔案編譯成了乙個css檔案,並且檔案自動生成在我們設定的 ./dist/目錄下,檔名為 main.css 。

autoprefixer可以自動為css中的某些**新增如 -moz- 、 -webkit- 等字首,保證其相容性。autoprefixer會參考can i use **的資料來判定哪些屬性需要新增,又該新增什麼樣的字首。

安裝外掛程式方法不變

npm install gulp-autoprefixer

我們在上一段**的基礎上做出改進

gulpfile.js :

var gulp = require('gulp');

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

// 匯入autoprefixer模組

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

gulp.task('style', function

() );

這樣一來,我們乙個gulp style後發現,這個main.less 檔案除了自動編譯了之外,還自動新增了一些必要的字首,經過這兩道工序後匯出到目標資料夾中。

這就是所謂流式的操作了,要加工乙個東西就一套工序加工完,而不是加工了一道工序,放回去,然後再取出來再加工,不覺得麻煩啊!直接全部加工好了再放回去不就省事兒多了嘛!省去好多拿和放的過程 (在gulp中指與磁碟的讀寫,不用頻繁的讀寫磁碟,自然速度會有所提公升)

這是壓縮css檔案的乙個gulp外掛程式

安裝 :

npm install gulp-minifycss

繼續在上面的**的基礎上更改,繼續我們的流式操作。

gulpfile.js :

var gulp = require('gulp');

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

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

// 匯入minifycss模組

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

gulp.task('style', function

() );

這樣的話我們編譯後生成的css檔案又多了一道壓縮的過程,使得最終的css檔案大小更小。

好吧!這就是gulp的使用示例,其實還是很簡單的,自己需要什麼樣的構建操作就找相應的gulp外掛程式,然後通過同樣簡單的方式就可以插入到我們的構建流當中,自動構建好我們的專案。

gulp中文網 :

gulp plugin search (gulp外掛程式搜尋):

gulp不完全入門教程 (推薦) :

use-gulp (推薦, 東西很全):

gulp入門教程 :

開始使用Unix

本人使用的macbook pro md101,通過mac的終端登入到unix系統。登入unix系統 首先在終端中輸入login,然後終端會顯示login 然後輸入使用者標識,按return後,會顯示password 輸入密碼即可登入,隨後會顯示上次登入的時間以及使用的終端,無論何時,你都要花時間檢查...

MQTT 開始使用

嵌入式 個人開發環境 ubuntu 14.04 mqtt messagequeueing telemetry transport protocol 全稱 訊息佇列遙感傳輸協議,是ibm開發的乙個即時通訊協議。mqtt是面向m2m和物聯網的連線協議,執行在tcp協議棧之上,採用輕量級發布和訂閱訊息傳輸...

Bootstrap 開始使用

bootstrap提供了編譯好的 css 和 js bootstrap.檔案,還有經過壓縮的 css 和 js bootstrap.min.檔案。同時還提供了 css 原始碼對映表 bootstrap.map 可以在某些瀏覽器的開發工具中使用。同時還包含了來自 glyphicons 的圖示字型,在附...