Grunt構建工具插件篇——之less工具2

Grunt任務分爲兩部分，一部分是任務，即Grunt要執行的代碼，找到對應功能的插件就成。因此等會要下載grunt-contrib- less包，這個插件即是把less文件編譯成能直接使用的css。另外一部分是配置，即傳給grunt.initConfig方法的對象。

關於如何安裝Grunt，建立Gruntfile.js文件本文再也不詳述，能夠參考《用grunt搭建自動化的web前端開發環境》http://developer.51cto.com/art/201506/479127_1.htm

---

在終端安裝插件
一樣使用到了node.js裏的包管理器npm，在終端裏執行下述命令：

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

• 1

• 1

–save-dev」的意思是，在當前目錄安裝grunt的同時，順便把grunt保存爲這個目錄的開發依賴項。要注意安裝的目錄應該是你的項目的 根目錄，並且本地已經裝好了grunt，創建了package.json文件。package.json文件中沒法包含全局安裝的包，所以Grunt包和 任務插件要求在本地安裝Grunt，這樣代碼才能在不一樣設備中正常運行。

在Gruntfile.js文件中加載插件

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

 

配置任務

grunt.initConfig({ less:{ compile:{ file:{ 'build/css/compiled.css':'src/css/layout.css' } } } }); 

終端執行grunt less命令
建議明確指定任務的構建目標，本例中方式爲grunt less：compile。此時在build/css文件夾裏便生成了compiled.css。less對象還有其餘的屬性，你還能夠添加一個compile_mobile目標，編譯移動設備使用的css靜態資源。

---

精確通配模式

通配是一種文件路匹配機制，可使用文件路徑模式來包含或排除文件。下面列出一些有用的通配模式：

['public/*.less', //匹配public文件夾中拓展名爲.less的全部文件 'public/**.*.less', //還能匹配public文件夾的子文件中的文件， //並且嵌套層級多深 '!public/vendor/**/*.less //和第二個做用同樣，不過！符號代表 // 要從結果中排除匹配的文件 ]

有一點須要注意的是，無論多少個less文件，編譯獲得的css都只會打包到一個文件中。