GRUNT 介紹

GRUNT 介紹

- 官方網站：http://gruntjs.com/ 

- the javascript task runner

- task runner: 簡單的說就是自動化，自動化編譯、安裝、測試，以及單元測試(unit testing)、代碼檢測（linting）等

- Grunt相似於Linux中的Makefile，Java中的Ant，Maven等  

配置Gruntfile

#封裝grunt

module.exports = function(grunt) {

#初始化配置

grunt.initConfig({

#從依賴包中初始化包配置

pkg: grunt.file.readJSON('package.json'),

#grunt-contrib-concat定義了包的鏈接方式

#concat 任務鏈接全部src下的js文件 

concat: {

  options: {

    separator: ';'

  },

  dist: {

    src: ['src/**/*.js'],

    dest: 'dist/<%= pkg.name %>.js'

  }

},

#grunt-contrib-uglify壓縮合並javascript 代碼

uglify: {

  options: {

    banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'

  },

  dist: {

    files: {

      'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']

    }

  }

},

#grunt-contrib-qunit自動化測試代碼 

qunit: {

  files: ['test/**/*.html']

},

#grunt-contrib-jshint 代碼正確性檢測

jshint: {

  files: ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],

  options: {

    // options here to override JSHint defaults

    globals: {

      jQuery: true,

      console: true,

      module: true,

      document: true

    }

  }

},

#grunt-contrib-watch 檢測修改，並執行jshint和qunit任務

watch: {

  files: ['<%= jshint.files %>'],

  tasks: ['jshint', 'qunit']

}

});

#加載grunt所須要的npm的引擎

grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.loadNpmTasks('grunt-contrib-jshint');

grunt.loadNpmTasks('grunt-contrib-qunit');

grunt.loadNpmTasks('grunt-contrib-watch');

grunt.loadNpmTasks('grunt-contrib-concat');

 

#創建test任務

grunt.registerTask('test', ['jshint', 'qunit']);

#創建默認任務

grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

 

};

Grunt 安裝和運行

npm install -g grunt-cli 

首先須要到目錄包，改目錄包中須要創建package.json和Gruntfile

npm install 安裝依賴包

grunt 便可運行 

package.json能夠經過grunt-init 或者 npm init來初始化package.json

Jquery 運行

1)  所有運行 cd jquery && npm run build 

2)  自定義運行 grunt custom:-ajax