Grunt任务分为两部分，一部分是任务，即Grunt要执行的代码，找到对应功能的插件就成。所以等会要下载grunt-contrib-less包，这个插件便是把less文件编译成能直接使用的css。另一部分是配置，即传给grunt.initConfig方法的对象。
步骤一：在终端安装插件
同样使用到了node.js里的包管理器npm，在终端里执行下述命令：
npm install grunt-contrib-less --save-dev–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都只会打包到一个文件中。
1. Package.Json{
"name": "xxx",
"version": "0.0.1",
"author": "xxx",
"devDependencies": {
"grunt": "~0.4.4",
"load-grunt-tasks": "~0.4.0",
"grunt-contrib-uglify": "~0.5.1",
"grunt-contrib-cssmin": "~0.10.0"
}
}
2. Gruntfile.Js
module.exports = function (grunt) {
// 构建任务配置
grunt.initConfig({
//读取package.json的内容，形成json数据
pkg: grunt.file.readJSON('package.json'),
// 压缩所有js并生成source map
uglify: {
my_target: {
options: {
sourceMap: true
},
files: [
// 可以直接作用于文件夹下所有文件
{
expand: true,
cwd: 'app/js',
// 排除.min的文件
src: ['*.js', '!*.min.js'],
// 输出和输入在同一目录
dest: 'app/js',
ext: '.min.js'
},
// 也可以指明具体一一对应的文件
{
// core
'core/jsCompare.min.js': 'core/jsCompare.js',
'core/jsHelper.min.js': 'core/jsHelper.js',
'core/jsShare.min.js': 'core/jsShare.js',
// dijia
'app/dijia/dijia.min.js': 'app/dijia/dijia.js',
'app/dijia/location.min.js': 'app/dijia/location.js'
}
]
}
},
// 压缩所有css
cssmin: {
minify: {
expand: true,
cwd: 'resources/css/',
src: ['**/*.css', '**/!*.min.css'],
dest: 'resources/css/',
ext: '.min.css'
}
}
})
// 加载指定插件任务
grunt.loadNpmTasks('grunt-contrib-cssmin')
grunt.loadNpmTasks('grunt-contrib-uglify')
// 默认执行的任务
grunt.registerTask('default', ['uglify', 'cssmin'])
}
