利用gulp來對less編譯成css（操作教程圖解）
本文旨在介紹藉助
gulp這個打包工具來將less預編譯語言編譯成我們正常的css語言的整個基本操作流程。其中還提及到部分底層原理並避開了百度上部分雜七亂八的不完整答案
1.我們需要明白什麼是gulp，什麼是less，編譯又是什麼意思，這樣做的意義在於哪裏，對我們有什麼幫助（請先安裝好了node.js，需要這個環境）
（1）我們需要知道gulp是啥，它是一個擁有很多功能的東西，例如壓縮圖片啊，檢驗js書寫是否正確啦，但是這裏介紹的是，它的其中一個功能就是用於編譯less。
（2）好，接下來設計到另一個詞，這裏的編譯時什麼意思，我們或許可以理解成“翻譯”，相當於有個機器將英文翻譯成中文那樣子，並且是實時是那種，這個過程我們叫做編譯。
（3）接着，less又是什麼呢？它是一種語言，它有它的書寫方式，整體架構跟CSS差別不會太大，但是，它卻可以快速提高書寫的效率，至於怎麼的一種語法可以讓它快速書寫呢？大致情況如下：
它的使用大概就是像上面截圖的那個樣子了，就是加了一些算法和方便的技巧進去，可能有人覺得這約麼就是方便了一點點而已，有這個必要嗎？其實很有必要，寫代碼最怕的就是亂，這個可以在大工程裏面幫助到你很多的，至少你書寫會很方便，這點優處等你用了之後你才能切身感受到，你要做到的就是去用就行了。
（4）知道什麼是less之後，剩下的就是css了，這個應該不用作過多的解釋了。
2.瞭解了什麼是什麼之後，接下來真槍實彈地開幹了
（1）先全局安裝gulp，對於全部這個概念相當重要，如果想有更進一步的理解，可以百度。去到你要建立工程的文件夾下，右鍵，選擇gitbash，輸入命令行
$ npm install gulp -g #全局安裝gulp原則上任意位置都是可以輸入這個命令行的，以爲-g代表的就是全局安裝，去哪都一樣，但是之所以選擇這個目錄，是因爲接下來還得安裝一次本地的gulp。 接下來，輸入
$ npm gulp -v #其實套路都一樣，檢測版本號（2）接下來，我們在工程文件夾裏面新建一個 package.json文件，代碼如下：
{
"name": "test", //項目名稱（必須）
"version": "1.0.0", //項目版本（必須）
"description": "This is for study gulp project !", //項目描述（必須）
"homepage": "", //項目主頁
"repository": { //項目資源庫
"type": "git",
"url": "https://git.oschina.net/xxxx"
},
"author": { //項目作者信息
"name": "surging",
"email": "[email protected]"
},
"license": "ISC", //項目許可協議
"devDependencies": { //項目依賴的插件
"gulp": "^3.8.11",
"gulp-less": "^3.0.0"
}
}當然上面都是菜鳥的操作，高手像下面圖示這樣用命令行來操作，新手咋一看，哇，這還不如我自己新建一個文件直接輸入來得快的呢！其實等你真正操作你就知，用命令行打，甚至比你複製粘貼還要快，就是那麼快，所以，毋庸置疑，最終，還是得輸入命令行來執行這一步。
（3）接下來安裝本地gulp，你可能會問，剛纔不是安裝了全局gulp了嗎？不是全局都能使用嗎？還裝啥本地項目gulp呢？全局安裝gulp是爲了執行gulp任務，本地安裝gulp則是爲了調用gulp插件的功能
$ npm install gulp --save-dev #注意後面的--save-dev了，相當重要，因爲這個把gulp保存在pacgage.json上面，以後可以打包發送給別人，不然，發給別人就會不完善（4）接下來，安裝本地的插件，我們要安裝的是less的相關插件
$ npm install gulp-less --save-dev #後面的--save-dev和上面同理
（5）新建gulpfile.js文件，這是一個配置文件，裏面的內容，每一條代碼都要學會自己寫出來，詳情見圖的解釋，慢慢看，肯定能懂。
（6）然後輸入指令運行
$ gulp #這個直接輸入的時候就是代表默認狀態的指令，當然也可以在gulp後面添加具體 的任務名字指定去執行某個任務，gulp等同於gulp default（7）來，接下來看效果，這個時候less和css是會同時變化的，但是記得命令臺一定要一直開着，纔會有這個效果，關了之後它們兩者就關聯不起來了，也就是說，輸入命令的那界面不可以關閉。
3.流程總結
流程基本講完了，其實就是五分鐘的事，但是如果看了凌亂的百度的相關資料的話，有可能會走上很多彎路，並且重重複復不知道問題出現在哪裏，這裏只是用來編譯less這個單一的功能的，沒有其他的整套功能。不過如果僅僅是想學習這個的話，還是看這篇文章寫得比較有邏輯性，並且在邏輯上和順序上是合理的，沒有那麼多和那麼亂。