码迷,mamicode.com
首页 > 其他好文 > 详细

初识GRUNT

时间:2015-11-25 00:22:44      阅读:253      评论:0      收藏:0      [点我收藏+]

标签:

什么是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

 

初识GRUNT

标签:

原文地址:http://www.cnblogs.com/darrenji/p/4993320.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!