結語參考與擴充套件
接觸gulp不多,感觸卻多。不過一句話:省了好多麻煩。如果你也是做web前端的,並且也想更加便捷高效的去完成自己的專案,那麼可以嘗試使用一下gulp。
首先看看gulp的定義:gulp是乙個基於流的自動化構建工具。大家都明白什麼是自動化 (就是懶人不用動手了唄),構建工具就是說這是乙個工具,並且是用來構建工程用的 。那麼什麼是基於流呢?如果知道unix的管道命令的人就會知道,把上乙個操作的輸出當做下乙個操作的輸入,形成乙個連貫的過程。打個比方就好像是乙個生產汽車的自動化車間,可能首先是生產出乙個輪子,向下傳遞,然後下一道工序是加上車架,然後再下一道工序是噴漆等等。而這個流程線就是所謂的流了。
好吧!管他什麼流呢!反正是自動化的肯定就是能幫我們省很多事的 (不過流這樣的方式的確很便捷、高效)。
gulp是很簡單的 ( 對於已有npm和基礎的nodejs經驗的同學)
$ npm install -g gulpgulp實際上就和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-lessgulpfile.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 的圖示字型,在附...