三分鐘從零單排gulp-less配置

這周的某個晚上，室友拿着她寫的todolist代碼來找我做review，看到css文件是這個樣子

“爲什麼不用less呢？”，我心痛的問她。

“不會。”

於是我推薦了一款小白級的less入門神器：Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.

安裝之後，只要監聽指定的文件夾就能做到實時編譯，哪怕完全不會編程的同學也可以輕鬆搞定，簡直是不要太容易。

如果只用嵌套和變量這些基本功能，less和sass其實並沒有區別。不過對於win的用戶來說，我比較推薦less，配置簡單好用。原來的sass依賴ruby，而後確實出了node-sass，看起來是很美好的，但是要依賴VS2013，還要裝win8.1SDK，新電腦買回來，就爲了個sass，一言不合16G硬盤就沒了！

“這個Koala真好用，但是用node控制檯來搞less一定麻煩死了吧？”

“不是呀， 其實只要三分鐘就可以搞定”

這是真的，這不是夢...

三分鐘，從零單排gulp-less

首先是安裝Node.js，現在最新的穩定版本是4.4.4，和安裝一切傳統軟件一樣，一路“下一步“點下來就行了，安裝正確的標誌是在控制檯中輸入(以下示例代碼均在cmd控制檯輸入，linux系統自行添加sudo)

node -v

可以看到正確的版本號

（幾天前重裝的電腦居然已經落後了一個版本...）

然後安裝npm，不好意思，這步不需要，因爲npm已經內置在nodejs中了，所以輸入

npm -v

就可以直接看到當前npm的版本

（你知道麼，在中文輸入法狀態輸入npm會出現”你配麼“，表現出了nodejs高冷的一面...）

突然發現本機的npm版本居然還是2.x，趕緊升級一下，3.x版本的npm目錄變得扁平，更加好用，所以我們輸入代碼

npm i npm -g

其中”i“是”install“的簡寫，”-g“代表全局安裝，第二個”npm“是要安裝的包名字，所以npm安裝自己的時候這個指令看起來就有點奇怪。

裝好後我們再檢查一下現在的npm版本號

至此，準備工作全部完成，可以開始配置gulp了。在項目根目錄輸入代碼

npm init

創建一個新的項目

"這些項目都是什麼呢？"

”看得懂的就填，看不懂的就回車...“

現在在項目目錄下可以看到一個多出來的package.json文件，我們爲項目添加兩個必要的依賴

npm i --save-dev gulp gulp-less

“--save”表示把兩個引入的包存入package.json文件中，而“--save-dev”表示這兩個包是用於開發而不用於產品中。顯然gulp只是開發時的輔助工具，所以我們選擇帶有“-dev”後綴的參數。輸入代碼，然後安靜等待30秒，當代碼執行結束之後，你會發現package.json文件變成了

項目已經引入了對gulp和gulp-less的依賴。

現在在根目錄下新建一個gulpfile.js文件，用來配置gulp

cd. >gulpfile.js

(你可以直接在文件夾右鍵新建文件，也可以像我一樣用控制檯裝一下13...)

在gulpfile.js中寫入如下代碼：

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

gulp.task('less', function () {
	return gulp.src('./less/*.less')
	.pipe(less())
	.pipe(gulp.dest('./css'));

});

“gulp.task”幫助我們新建一個任務，任務是流式的，從gulp.src的文件開始，到gulp.dest的文件輸出，中間用less()做處理。直白的翻一下就是：

執行一個叫做less的task，讀入./less文件夾下所有less後綴的文件（*.less表示一切以less爲後綴的文件），然後用less()進行轉換，然後輸出到./css目錄下。

我們在根目錄下新建一個less文件夾，並且新建一個test.less文件，在其中寫一段測試的less代碼，然後在控制檯執行

gulp less

看看配置是不是生效了

我們看到，在根目錄下的css文件夾內自動生成了對應文件名的css文件。

進階

每次編寫完less文件之後都要手動執行一次“gulp less”指令是不現實的，如何配置自動執行呢？這裏要使用"gulp.watch"指令。

可以看到，watch也是gulp自帶的（四個）功能之一（其他三個“task”，“src”，“dest”剛剛已經見過了），它可以監控某個路徑下文件的改變，而自動執行指定的腳本。

看一下稍微改造過的代碼：

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

var paths = {
	less: ['./less/*.less']
};
gulp.task('less', function () {
	return gulp.src(paths.less)
	.pipe(less())
	.pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
	gulp.watch(paths.less, ['less']);
});

添加paths變量管理路徑（這個並不是必要的，你也可以不使用變量）。

在控制檯輸入

gulp watch

之後每一次修改less文件，gulp都會自動幫你編譯到css文件夾。

當你使用的時候還會遇到一個新問題，就是當輸入了錯誤的less代碼點擊保存的時候，監控就停止了。

可能只是寫了前半個括號，順手按下保存，結果就整個監聽就崩潰了，整個人也崩潰了。

這時候我們再來加一個新的插件：plumber

npm install gulp-plumber --save

修改gulpfile.js文件

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

var paths = {
	less: ['./less/*.less']
};
gulp.task('less', function () {
	return gulp.src(paths.less)
	.pipe(plumber())
	.pipe(less())
	.pipe(gulp.dest('./css'));
});

gulp.task('watch', function() {
	gulp.watch(paths.less, ['less']);
});

注意地方要把.pipe(plumber())放在.pipe(less())的前面，才能保證生效。這時候當你再保存錯誤代碼，控制檯會拋出錯誤，然後繼續watch監聽，不會卡住。

gulp還有其他很多豐富的插件，更重要的是，它可以極盡個性化的對開發項目進行配置，從而幫助開發者節約時間，而節約時間就是延長生命。

本文轉自：https://zhuanlan.zhihu.com/p/20903085