Grunt學習筆記【7】---- grunt-contrib-less插件詳解

本文主要講如何使用Grunt實現less文件壓縮。

一 說明

less是很是經常使用的樣式框架之一，Grunt也提供了能夠編譯和打包less樣式文件的插件：grunt-contrib-less。

實現原理分析：

分析該插件源碼，能夠發現該插件實際只作了對樣式文件的各類處理，真正進行編譯less文件到css文件，實際仍是調用的less庫的less.render方法實現的。

以下是grunt-contrib-less庫源碼：

二 安裝

npm install grunt-contrib-less --save-dev

三 加載任務

grunt.loadNpmTasks('grunt-contrib-less');

四 配置

該插件配置吧比較簡單，下邊只列出做者用到的幾個經常使用屬性：

4.1 files

設置要處理的less文件地址和輸出的css文件地址。

1 files: {
2    'dist/build.css': 'theme/build.less'
3 }

4.2 options

其它各類配置都在options中，具體屬性以下：

paths：

　　類型： String Array Function


　　默認值: 根目錄.

　　意義：定義@import加載文件的路徑。默認值是文件的當前路徑。 若是指定一個函數的源文件路徑將是第一個參數。您能夠返回到使用字符串或路徑的數組。

rootpath：

　　類型：String

　　默認值：「」

　　意義：全部文件都是基於這個路徑

compress：

　　類型：bool

　　默認值：false

　　意義：壓縮編譯以後的css文件，即刪除css文件中的空行和空格

cleancss：

　　類型： bool

　　默認值： false

　　意義： 使用clean-css來壓縮css文件

cleancssOptions：

　　類型： Object

　　默認值： none

　　意義：若是設置cleancss爲true的話，此項才起效果，配置cleancss的選項

ieCompat：

　　類型：bool

　　默認值：true

　　意義：編譯以後的css文件適應於ie8

optimization：

　　類型： Integer

　　默認值：null

　　意義：設置優化等級，數字越小，在樹中建立的節點越少。會影響到調試。

strictImports：

　　類型：bool

　　默認值：false

　　意義：若是設置爲true，less將會以標準的模式來加載@import引用的文件

strictMath：

　　類型：bool

　　默認值：false

　　意義：若是設置爲true，表達式須要用括號括起來

strictUnits：

　　類型：bool

　　默認值：false

　　意義：若是設置爲true，less將會驗證單位是否合法

syncImport：

　　類型：bool

　　默認值：false

　　意義：異步加載經過@import引用的文件

dumpLineNumbers：

　　類型：string(comments, mediaquery,all)

　　默認值：false

　　意義：

relativeUrls：

　　類型：bool

　　默認值：false

　　意義：重寫url爲相對url

customFunctions：

　　類型： Object

　　默認值: none

　　意義：自定義函數，通常是全局功能的。

report：

　　類型： string ('min', 'gzip')

　　默認值：min

　　意義：何種方式來壓縮文件，gzip更消耗時間

sourceMap：

　　類型：bool

　　默認值：false

　　意義：是否使用文件映射

sourceMapFilename：

　　類型：string

　　默認值：none

　　意義：編寫源與給定的文件名映射到一個單獨的文件。

sourceMapUrl：

　　類型：string

　　默認值：none

　　意義：重寫css文件中的源映射。

sourceMapBasepath：

　　類型：string

　　默認值：none

　　意義：設置在源映射中的less文件路徑的基本路徑。

sourceMapRootpath：

　　類型：string

　　默認值：none

　　意義：在map文件中的less文件根目錄

outputSourceFiles：

　　類型：bool

　　默認值：false

　　意義：將less文件放到Map文件中，替換引用。

modifyVars：

　　類型： Object

　　默認值： none

　　意義：重寫全局變量

banner：

　　類型：string

　　默認值： none

　　意義：標記，編譯以後文件頂部標記

五 實戰

下邊是一個實例項目。

5.1 總體項目目錄：

5.2 gruntfile.js文件中配置：

 1 module.exports = function(grunt) {
 2     grunt.initConfig({
 3         // 清理空文件夾
 4         clean: {
 5             foo1: {
 6                 src: ['dist/*']
 7             }
 8         },
 9         less: {
10             css: {
11                 options: {
12                     compress: true,
13                     strictMath: true
14                 },
15                 files: {
16                     'dist/build.css': 'theme/build.less'
17                 }
18             }
19         }
20 
21     });
22 
23     grunt.loadNpmTasks('grunt-contrib-less');
24     grunt.loadNpmTasks('grunt-contrib-clean');
25 
26     // 默認被執行的任務列表。
27     grunt.registerTask('default', [
28         'clean',
29         'less'
30     ]);
31 
32 };

5.3 入口文件build.less代碼很簡單：

@import "a.less";

5.4 核心less文件a.less代碼以下：

1 @width: 80px;
2 @color: 'red';
3 
4 .a-title {
5   color: @color;
6   width: @width;
7   height: 100px;
8   background-color: blueviolet;
9 }

5.5 執行grunt命令後輸出文件build.css以下（下邊是格式化後的）：

1 .a-title {
2     color: 'red';
3     width: 80px;
4     height: 100px;
5     background-color: blueviolet
6 }

六 實戰代碼下載地址

上邊實戰源碼獲取地址：

https://gitee.com/bangbangwa/grunt/blob/master/grunt-contrib-less-test.rar

參考資料&內容來源

Grunt官網：https://www.npmjs.com/package/grunt-contrib-less

博客園：https://www.cnblogs.com/xiyangbaixue/p/4132901.html