Less的安裝,編譯以及高亮

一.安裝less:

二.使用Gulp編譯less:

1.安裝依賴:

首先 npm install ..........如下模塊以供之後require,當然install gulp是大前提啦

2.編寫任務:

在gulpfile.js文件中引入gulp,gulp-less,如下編譯src/less下所有的less文件,

src(params) params = 單個路徑或者[路徑,路徑]或者*

pipe(param) 為編譯的語言類型

pipe(gulp.dest(param)) 為編譯至某個文件夾下

結果如下：bulid/css/....

3.匹配模式:

如下：*為通配符,為所有

編譯結果:

**的作用在於無論多少級子目錄(0或者多層)全部解析

如下將匹配非index或者b.less的所有less文件,這樣我們就可以避開一些提供函數或者color類的less文件進行編譯！

4.壓縮模式:

如下因為一來gulp-sourcemaps所以需要npm install一下

5.觀察者模式:

文件保存就進行同步:

三.使用webpack編譯less:

1.安裝相關插件：

2.編譯less：

3.熱更新：

需要npm install webpack-dev-server --save-dev

在package.json中或者直接命令 webpack-dev-server

在如下網址：可以看到更新情況

四.使用npm編譯less:

需要安裝全局的less~

五.使用koala編譯less:

下載地址： http://www.cr173.com/soft/64143.html

1.切換中文：

點擊齒輪切換天朝語言！

2.添加/路徑：

3.ok搞定：傻瓜式操作就是辣媽簡單

六.sublime高亮less:

然後運行：

原文地址：老牛の博客

喜歡本文的，可以關注通哥 - 知乎，有問題可以加群交流

歡迎大家來「web前端開發」專欄投稿

推薦閱讀：