北在北方

太白枝头看,花开不计年,杯中浮日月,楼外是青天。

导航

Grunt的使用

Posted on 2014-12-11 21:02  CN.programmer.Luxh  阅读(430)  评论(1编辑  收藏  举报

  在Node环境下。需要预先安装好Node。

1、安装grunt-cli

[root@Luxh-01 ~]# npm install -g grunt-cli

 

2、创建一个目录test

[root@Luxh-01 ~]# mkdir test

 

3、进入test目录,创建一个package.json文件,内容如下:

{
  "name": "grunt_test",
  "description": "this is a demo",
  "author": "Luxh"
}

 

4、安装grunt,只需安装到开发环境依赖中。

[root@Luxh-01 test]# npm install grunt --save-dev

  安装完成,package.json文件如下:

{
  "name": "grunt_test",
  "description": "this is a demo",
  "author": "Luxh",
  "devDependencies": {
    "grunt": "^0.4.5"
  }
}

 

5、这里我要是有grunt完成:clean(清除文件)、copy(复制文件)、coffee(coffee编译成js)三个功能,所有我需要安装三个grunt插件:

[root@Luxh-01 test]# npm install grunt-contrib-clean --save-dev
[root@Luxh-01 test]# npm install grunt-contrib-copy --save-dev
[root@Luxh-01 test]# npm install grunt-contrib-coffee --save-dev

  安装完成后:package.json文件如下:

{
  "name": "grunt_test",
  "description": "this is a demo",
  "author": "Luxh",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-clean": "^0.6.0",
    "grunt-contrib-coffee": "^0.12.0",
    "grunt-contrib-copy": "^0.7.0"
  }
}

 

6、编写Grunt的配置文件:Gruntfile.js 内容如下:

module.exports = function(grunt) {

  grunt.initConfig({
   clean:{
    main:{
      src:'dest'  //清除dest目录
    }
   },
   copy: {
     main: {
       expand: true,
       cwd: 'src/',  //指定源文件目录
       src: ['**','!**/*.coffee'],  //不复制coffee文件
       dest: 'dest/'    //复制到dest目录下
    }
   },

  coffee:{
    main:{
     expand:true,
     cwd:'src',
     src:['**/*.coffee'],  //src目录下的coffee文件编译到dest目录
     dest:'dest',
     ext:'.js'
    }
  }
  });

  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-coffee');

  grunt.registerTask('default', ['clean:main','copy:main','coffee:main']);

};

 

7、在test目录下创建src目录,在里面编写coffee。

 

8、执行grunt命令,将会依次执行 clean、copy、coffee,如果只需要执行clean,则允许 grunt copy