Grunt安裝與入門

1、grunt簡介

grunt是什麼？

    grunt是Javascript世界的構建工具，咱們的項目在建立初期，會很小，但通過不少版本的迭代，愈來愈大，CSS和JS都不太好管理了，這時咱們須要工具來幫助咱們管理，grunt就是作這個的。它主要的工具就是編譯、壓縮、單元測試等，以減小咱們的工做量。

    grunt已有不少可供咱們使用的插件，幫助咱們實現各類工業自動化，那如何使用grunt呢？

2、安裝grunt

grunt和其插件都是經過npm安裝的，因此，系統中必須安裝npm，npm是NodeJS的包管理器。

liuzhendeMacBook-Air:gruntTest liuzhen$ npm -v
2.14.12

安裝grunt以前必須先將grunt-cli安裝到全局中（我這裏使用了sudo命令來安裝）

liuzhendeMacBook-Air:gruntTest liuzhen$ sudo npm install -g grunt-cli
Password:
npm WARN deprecated lodash@2.4.2: lodash@<3.0.0 is no longer maintained. Upgrade to lodash@^4.0.0
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.7)
└── findup-sync@0.1.3 (lodash@2.4.2, glob@3.2.11)
liuzhendeMacBook-Air:gruntTest liuzhen$

安裝好grunt-cli並非安裝了grunt，grunt-cli的做用就是調用與grunfile同目錄的grunt，這樣作的好處就是不一樣的項目裏能夠存放不一樣版本的grunt。

3、package.json和gruntfile

在項目中安裝grunt以前，通常都須要兩個文件，package.json和gruntfile

package.json：

此文件被npm用於存儲項目的元數據，以便將此項目發佈爲npm模塊進入項目目錄，使用npm init命令來建立一   個基本的package.json，在建立完gruntfile以後，就能夠在項目目錄中使用

sudo npm install grunt --save-dev

來安裝項目grunt，也可使用

sudo npm install grunt-contrib-jshint --save-dev

來安裝grunt插件

gruntfile：

此文件可被定義爲gruntfile.js或者gruntfile.coffee，用來配置或定義任務（task），並加載grunt插件。

通常它能夠由如下幾個部分組成：

1.「wrapper」函數，它包含整個grunt配置信息

module.exports = function(grunt) {

}

在這個函數中初始化configuration對象

grunt.initConfig({

});

接下來就能夠從package.json中讀取配置信息，並存入pkg屬性中

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

好了，到目前爲止咱們能夠看到以下的代碼：

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });
}

接下來，咱們就能夠爲每一個任務定義相應的配置。

2.項目與任務配置

首先，咱們來配置concat，也就是文件合併任務，以下代碼：

concat: {
  options: {
    //定義一個用於插入合併輸出文件之間的字符
    separator: ';';
  },
  dist: {
    //將要被合併的文件
    src: ['src/**/*.js'],
    //合併後的JS文件的存放位置
    dest: 'dist/<%= pkg.name %>.js'
  }
}

接下來，咱們配置uglify插件，也就是文件壓縮

uglify: {
  options: {
    //此處定義的banner註釋將插入到輸出文件的頂部
    banner: '/* <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
  },
  dist: {
    files: {
      'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
    }
  }
}

QUnit插件用於測試文件，只要提供文件位置便可

qunit: {
  files: ['test/**/*.html']
},

JShint插件用於檢查JS代碼的合法性，配置也很簡單

jshint: {
  //定義須要檢查的文件的位置
  files: ['gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
  //JSHint默認配置
  options: {
    globals: {
      jQuery: true,
      console: true,
      module: true
    }
  }
}

最後，來配置watch插件，它是用來監視當前文件變化，若是有變化，則grunt會自動執行代碼檢查

watch: {
  files: ['<%= jshint.files %>'],
  tasks: ['jshint', 'qunit']
}

3.加載grunt插件和任務

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

以上的grunt插件須要經過npm進行安裝，如如下代碼：

sudo npm install grunt-contrib-jshint --save-dev

4.自定義任務

最後，咱們須要設置task，重要的是default任務：

//在命令行輸入「grunt test」，test task就會被執行
grunt.registerTask('test', ['jshint', 'qunit']);
//在命令行上輸入「grunt」，就會被執行的default task
grunt.resisterTask('default', ['jshint', 'qunit', 'concat', 'uglify']);

下面，是最終完成的gruntfile文件代碼：

module.exports = function(grunt) {
	//初始化
	grunt.initConfig({
		//讀取配置信息
		pkg: grunt.file.readJSON('package.json'),
		//定義文件合併
		concat: {
			options: {
				separator: ';'
			},
			dist: {
				src: ['src/**/*.js'],
				dest: 'dist/<%= pkg.name %>.js'
			}
		},
		//文件壓縮
		uglify: {
			options: {
				banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
			},
			dist: {
				files: {
					'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
				}
			}
		},
		//文件測試
		qunit: {
			files: ['test/**/*.html']
		},
		//JS代碼檢查
		jshint: {
			files: ['gruntfile.js', 'src/**/*.js', 'test/**/*js'],
			options: {
				//這裏覆蓋JSHint默認配置選項
				globals: {
					jQuery: true,
					console: true,
					module: true,
					document: true
				}
			}
		},
		//文件變化監聽
		watch: {
			files: ['<%= jshint.files %>'],
			tasks: ['jshint', 'qunit']
		}
	});

	//加載插件
	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');

	//設置任務
	grunt.registerTask('test', ['jshint', 'qunit']);
	grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']);
};

未完，待續。。。