初识GRUNT

时间:2023-02-03 04:23:17

什么是GRUNT?

基于任务的命令行工具。能做的事包括:

● 验证html,css, javascript
● 压缩css, javascript
● 编译CoffeeScript, TypeScript, etc
● 编译Less

● 等等

Pacakge.json

描述项目的元数据。

{
"name": "",
"version":"0.1.0",
"devDependencies":{
"grunt": "~0.4.1"
}
}

参考:http://package.json.nodejitsu.com/

Gruntfile.js

用来配置和定义GRUNT任务的文件。

"use strict";
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean:{
options:{
force: true
},
output: ['../Source/*/obj/debug']
}
}); grunt.loadNmpTasks('grunt-contrib-clean'); //加载npm任务用来加载特定的Grunt插件,前提是插件必须事先安装好
grunt.registerTask('efault',['clean']);//设置entiry point
};

运行GRUNT脚本

grunt taskName -v

搭建GRUNT环境

→ 安装Node.js  http://nodejs.org/

→ 安装Node Package Manager, https://npmjs.org/

→ 安装GRUNT cli

npm intstall -g grunt-cli
 
→ 安装GRUNT到本地项目文件夹

导航到项目文件夹输入:npm install grunt --save-dev
  创建完毕项目文件夹里多了一个node_modules文件夹
 
→ 创建项目package.json文件

在项目根文件夹下创建package.json文件

{
"name":"helloGrunt",
"version": "0.1.0",
"devDependencies" : {
"grunt": "~0.4.1"
}
}

→ 安装插件

导航到项目文件夹
npm install grunt-contrib-clean --save-dev

安装完毕,在package.json中有了变化:

{
"name": "helloGrunt",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-clean": "^0.7.0"
}
}

→ 在项目根文件夹下创建Gruntfile.js文件

'use strict';

module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: { //命令行运行的时候,会删除掉ToBeCleaned下的子文件夹
output: ['ToBeCleaned/*']
}
}); grunt.loadNpmTasks("grunt-contrib-clean"); grunt.registerTask("default",['clean']);
}

以上,任务的名称为default, 执行的任务是clean

→ 创建在项目根文件夹下创建ToBeCleaned文件夹,并创建几个文件

→ 导航到项目根目录下

grunt default -v