grunt的使用

摘要: grunt的简单入门demo,其实有点类似于java中的maven库管理工具。grunt可以帮助我们做很多工作，js压缩合并、css的压缩，单元测试等。

安装 Grunt命令行（CLI）

sudo npm install -g grunt-cli

到桌面建立自己的工程demo

mkdir gruntLearn

进入gruntLEarn文件夹执行命令初始化工程:

sudo npm init

该命令，讲创建一个package.json文件：

{
"name": "learn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}

安装grunt：

sudo npm install grunt --save-dev

--save-dev的作用是将 该 依赖包 写入 package.json中

分别安装 sass和watch

sass需要本地安装(自行google)

sudo npm install grunt-contrib-sass --save-dev
sudo npm install grunt-contrib-watch --save-dev

然后执行

再次查看package.json

{
"name": "learn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"，
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-sass": "^1.0.0",
"grunt-contrib-watch": "^1.0.0"
}
}

建立grunt的Gruntfile 文件，touch Gruntfile.js，先看看完整的Gruntfile文件：

//wrapper函数
module.exports = function(grunt){

//读取package.json
grunt.file.readJSON('package.json');

//初始化Grunt
grunt.initConfig({

//Sass任务
sass: {
//Sass开发选项
dev: {
options: {
style:"expanded"
},
 
3ff0
;            files: {
'css/main.css':'css/sass/main.scss'
}
},

//Sass发布选项
dist: {
options: {
style:'compressed'
},
files: {
'css/main.css':'css/sass/main.scss'
}
}
},
//监测文件
watch:{
//监测.scss文件
sass: {
files:['css/sass/**.scss'],
tasks:['sass:dev']
},
},
});

//加载任务
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');

//创建默认任务
grunt.registerTask('default',[
'sass:dev',
'watch',
]);

//创建发布任务
grunt.registerTask('dist',[
'sass:dist'//编译Sass的发布设置
]);
};

Gruntfile.js的主要工作：

配置任务在grunt.initConfig中：

//配置sass任务
//Sass任务
sass: {
//Sass开发选项
dev: {
options: {
style:"expanded"
},
files: {
'css/main.css':'css/sass/main.scss'
}
},

//Sass发布选项
dist: {
options: {
style:'compressed'
},
files: {
'css/main.css':'css/sass/main.scss'
}
}
},

并且添加监听，在sass文件保存之后继续，编译sass文件

//监测文件
watch:{
//监测.scss文件
sass: {
files:['css/sass/**.scss'],
tasks:['sass:dev']
},
},

当然，到时可以在这里加上js等文件的监听。

加载任务（把需要用到的任务，加载到grunt中）：

grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');

再创建默认的任务：

grunt.registerTask('default',[
'sass:dev',
'watch',
]);

测试：

在当前文件夹，建立css/sass/main.scss

body {
width: 100%;
}

在工程的根目录运行

sudo grunt

即可，该任务会一直监听，main.scss的变化而重新编译。

对于发布选项的grunt的任务可以通过

sudo grunt sass:dist

进行编译

对于安装命令，很多都需要sudo，不然权限不够而无法安装，或者运行。

demo地址