提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

初识GRUNT

初识 grunt
2023-09-11 14:16:51 时间

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

 

相关文章