把 less 编译成 css，用的是 grunt-contrib-less 这个插件，它的用法跟我们之前介绍的 grunt-contrib-sass 差不多 ... 下面，我们还是先去安装一下这个插件 ... 打开命令行工具 ... 用 npm install ... 安装的是 grunt-contrib-less ...
npm install grunt-contrib-less --save-dev
完成以后，打开 Gruntfile.js ... 去加载一下这个插件 ... grunt.loadNpmTasks ... 要载入的是 grunt-contrib-less ... 现在我们的项目里就可以使用 less 这个任务去编译 less 文件了 ..
grunt.loadNpmTasks('grunt-contrib-less');
先去创建一个 less 文件 ... 这里我们可以去改造一下 stylesheets 里面的 style.scss ... 先把它重命名成 style.less ... 然后打开这个文件 ... 再用 less 的语法去修改一下这个文件里的内容 ... 在 less 里面变量名字的前面用的是 @ 符号 ...
保存 ... 再回到 Gruntfile.js ... less 的用法跟 sass 差不多 .. 可以直接修改一下 ... 把 sass 换成 less ... 跟 less 任务相关的选项同样放到 options 这个属性里面 .. 这里我不打算使用自定义的选项 ... 先去掉这个 options 属性 ...
files 这个属性里面的东西，就是编译之后的 css 的路径 ，还有要编译的 less 的路径 ... 把这里的 style.scss 换成 style.less ... 意思就是，去把 stylesheets 目录下面的 style.less 这个文件编译成 css ，然后把编译好的 css 放到 dist 目录下面的 stylesheets 这个目录里面，文件的名字是 style.css ...
保存 ... 打开命令行 .. 去执行一下 less 任务 .. 输入 grunt less ... 这样 grunt 会执行所有在 less 任务里定义的目标 ... 我们也可以在后面加上一个冒号 .. 再指定一下要执行的目标 ... 加上一个 dist ...
grunt less:dist
完成以后，回到项目 ... 在 dist 里面，找到 stylesheets ... 这个目录下面的 style.css 就是编译好的 style.less ...
