grunt基礎

grunt是一個前端自動化工具，用於文件壓縮、合併、錯誤檢查等。

grunt是經過npm管理的，npm是nodejs的包管理器，因此安裝grunt前要確保電腦安裝了nodejs和npm。

安裝過程

ps：經過npm安裝不少系統須要sudo權限。

首先安裝grunt的命令行CLI到全局

npm install -g grunt-cli

grunt-cli的做用是能夠讓多個版本的grunt同時存在(至關於grunt的一個構建工具)

 

grunt的核心就是Gruntfile.js文件的管理

咱們建立一個項目目錄，文件中要有兩個文件

Gruntfile.js就是grunt執行的js，用於配置咱們須要grunt執行哪些操做（js合併、檢錯等等）

package.json至關於一個項目管理文件（用於配置項目名字、版本、一些依賴包等等）

//package.json
{
  "name": "project-name",
  "version": "1.0.0",
  "devDependencies": {

  }
}

建立好項目目錄後，咱們在項目目錄中安裝grunt

npm install grunt --save-dev

這時咱們在項目目錄中會看到多了一個node_modules文件夾，文件夾中多了一個grunt文件夾，說明grunt已經安裝成功

再看package.json中devDependencies對象中多了一條gurnt的配置，這就是-dev的做用（會把安裝依賴包信息寫到package.json中）

 

下面進行Gruntfile.js的配置

ps：再沒有配置的狀況下，終端輸入grunt會有錯誤提示信息

下面先進行一個簡單配置

module.exports = function(grunt){
	grunt.initConfig({
		pkg:grunt.file.readJSON('package.json')
	})
	grunt.registerTask('default',[]);
}

咱們對package.json文件進行了一次read操做，這時候就沒有報錯了

這個過程能夠忽略，下面進行gurnt插件安裝和配置

 

uglify：用於js文件的壓縮

插件安裝：npm install grunt-contrib-uglify --save-dev

先搞一個測試文件：當前目錄建立個src文件夾，文件夾中新建一個testJs.js文件，文件裏隨便寫點js代碼就行

而後配置Gruntfile.js文件

	grunt.initConfig({
		pkg:grunt.file.readJSON('package.json'),
		uglify:{
			options:{
				stripBanners: true,
				banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
			},
			build:{
				src: 'src/testJs.js',
				dest: 'bulid/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
			}
		}
	})
	grunt.loadNpmTasks('grunt-contrib-uglify'); 
	grunt.registerTask('default',['jshint']);

　options中規定容許生成的壓縮文件帶banner，即在生成的壓縮文件第一行加一句話說明

　build中配置了輸入輸出文件的目錄和名字

   插件被安裝後，要在在你的gruntfile.js中執行grunt.loadNpmTasks

　grunt.registerTask是讓插件馬上執行，第二參數是數組，用於gurnt插件的執行順序

最終在目錄中多了一個build文件夾，裏面生產了一個testJS的壓縮文件，內容以下

其餘插件同理，直接放代碼了

	grunt.initConfig({
		pkg:grunt.file.readJSON('package.json'),
		uglify:{
			options:{
				stripBanners: true,
				banner: '/*! <%=pkg.name%>-<%=pkg.version%>.js <%=grunt.template.today("yyyy-mm-dd")%> */\n'
			},
			build:{
				src: 'src/testJs.js',
				dest: 'bulid/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
			}
		},
		jshint:{
			options:{
				jshintrc:'.jshintrc'
			},
			build:['Gruntfile.js','src/*.js']		
		},
		watch:{
			build:{
				files:['src/*.js','src/*.css'],
				tasks:['jshint','uglify'],
				options:{spawn:false}
			}
		}
	})
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.registerTask('default',['jshint','uglify','watch']);

　　其中watch插件用於監聽，當咱們保存代碼時，watch會自動執行（不用每次在終端輸入grunt了）

 

ps

• Contrib-jshint——javascript語法錯誤檢查；
• Contrib-watch——實時監控文件變化、調用相應的任務從新執行；
• Contrib-clean——清空文件、文件夾；
• Contrib-uglify——壓縮javascript代碼
• Contrib-copy——複製文件、文件夾
• Contrib-concat——合併多個文件的代碼到一個文件中
• karma——前端自動化測試工具