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都只会打包到一个文件中。