Grunt的使用

  在Node環境下。須要預先安裝好Node。npm

一、安裝grunt-clijson

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

 

二、建立一個目錄testgrunt

[root@Luxh-01 ~]# mkdir test

 

三、進入test目錄,建立一個package.json文件,內容以下:this

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

 

四、安裝grunt,只需安裝到開發環境依賴中。spa

[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"
  }
}

 

五、這裏我要是有grunt完成:clean(清除文件)、copy(複製文件)、coffee(coffee編譯成js)三個功能,全部我須要安裝三個grunt插件:code

[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文件以下:blog

{
  "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"
  }
}

 

六、編寫Grunt的配置文件:Gruntfile.js 內容以下:ip

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']);

};

 

七、在test目錄下建立src目錄,在裏面編寫coffee。ci

 

八、執行grunt命令,將會依次執行 clean、copy、coffee,若是隻須要執行clean,則容許 grunt copy

相關文章
相關標籤/搜索