Grunt--Less

摘要：

　　之前介紹了自動構建工具Grunt，其中有一個模塊是"grunt-contrib-less"，下面是配置Grunt自動編譯less文件。

安裝：

　　Grunt是基於node，功能模塊化。你可以將grunt-contrib-less配置在package.json中然后npm install就完成安裝了，也可以通過下面命令安裝

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

注意： grunt-contrib-less是開發依賴包，所以安裝到devDependencies中。

配置任務：

 下面是一個簡單的例子

less: {
  // 開發環境
  development: {
    options: {
      paths: ["assets/css"]  // @import 加載文件的路徑
    },
    files: {
      "path/to/result.css": "path/to/source.less"  // 將path/to/source.less編譯為path/to/result.css
    }
  },
  // 線上環境
  production: {
    options: {
      paths: ["assets/css"],  // @import 加載文件的路徑
      cleancss: true,     // 壓縮css文件
      modifyVars: {   // 重新定義全局變量
        imgPath: '"http://mycdn.com/path/to/images"',
        bgColor: 'red'
      }
    },
    files: {
      "path/to/result.css": "path/to/source.less"
    }
  }
}

 

 

加載模塊：

　　從node_module中加載less模塊，如下：

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

 定義任務

// 開發環境
grunt.registerTask('lessDev', ['less:development']);
// 線上環境
grunt.registerTask('lessPro', ['less:production']);

 執行任務：

　　在命令窗口中執行 grunt lessDev或者grunt lessPro。

完整如下：

Gruntfile.js：

module.exports = function (grunt) {
    'use strict';

    grunt.initConfig({
        less: {
          // 開發環境
          development: {
            options: {
              paths: ["assets/css"]  // @import 加載文件的路徑
            },
            files: {
              "path/to/result.css": "path/to/source.less"  // 將path/to/source.less編譯為path/to/result.css
            }
          },
          // 線上環境
          production: {
            options: {
              paths: ["assets/css"],  // @import 加載文件的路徑
              cleancss: true,     // 壓縮css文件
              modifyVars: {   // 重新定義全局變量
                imgPath: '"http://mycdn.com/path/to/images"',
                bgColor: 'red'
              }
            },
            files: {
              "path/to/result.css": "path/to/source.less"
            }
          }
        }
    });

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


    // 開發環境
    grunt.registerTask('lessDev', ['less:development']);
    // 線上環境
    grunt.registerTask('lessPro', ['less:production']);
    
};

 

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

　　意義：標記，編譯之后文件頂部標記