grunt:前端自動化構建

Grunt 基於 Node.js ，用JS 開發，這樣就可以藉助 Node.js 實現跨系統跨平臺的桌面端的操作，例如文件操作等等。此外，Grunt 以及它的插件們，都作爲一個 包 ，可以用 NPM 安裝進行管理。

安裝 Grunt

確保已經安裝了 Node.js。實際上，安裝的並不是Grunt，而是 Grunt-cli，也就是命令行的Grunt

npm install -g grunt-cli

生成 package.json 文件

package.json 文件其實是 Node.js 來描述一個項目的文件，JSON 格式。生成這個文件超級簡單，推薦用命令行交互式的生成一下，cd進入項目目錄後：

npm init

安裝 Grunt 和所需要的插件

打算讓 Grunt 幫忙實現下面幾個功能：檢查每個 JS 文件語法、合併兩個 JS 文件、將合併後的 JS 文件壓縮、將 SCSS 文件編譯、新建一個本地服務器監聽文件變動自動刷新 HTML 文件。

根據這些任務需求，需要用到：

• 合併文件：grunt-contrib-concat
• 語法檢查：grunt-contrib-jshint
• Scss 編譯：grunt-contrib-sass
• 壓縮文件：grunt-contrib-uglify
• 監聽文件變動：grunt-contrib-watch
• 建立本地服務器：grunt-contrib-connect

下面我們就要在這個項目中安裝這些插件，執行命令：

npm install grunt --save-dev

打開 package.json 文件看下，是不是多了

"devDependencies": {
  "grunt": "^0.4.5"
}

繼續安裝 Grunt 的插件，當然，不需要一個個的安裝，可以執行以下命令：

npm install --save-dev grunt-contrib-concatgrunt-contrib-jshint grunt-contrib-sass grunt-contrib-uglifygrunt-contrib-watch grunt-contrib-connect

配置 Gruntfile.js 的語法

這是一個 JS 文件，你可以寫任意的 JS 代碼，比如聲明一個 對象來存儲一會要寫任務的參數，或者是一個變量當作開關等等。

然後，所有的代碼要包裹在

module.exports = function(grunt) {
    ...
};

裏面。沒有爲什麼。

裏面的代碼，除去自定義的亂七八糟的 JS，與 Grunt 有關的主要有三塊代碼：任務配置代碼、插件加載代碼、任務註冊代碼。

任務配置代碼

例如下面代碼：

grunt.initConfig({
 pkg:grunt.file.readJSON('package.json'),
 uglify: {
  options: {
   banner: '/*!<%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %>*/\n'
    },
  build: {
   src:'src/<%= pkg.name %>.js',
   dest:'build/<%= pkg.name %>.min.js'
  }
 }
});

可以看出，具體的任務配置代碼以對象格式放在grunt.initConfig 函數裏面，其中先寫了一句 

pkg:grunt.file.readJSON('package.json') 功能是讀取 package.json 文件，並把裏面的信息獲取出來，方便在後面任務中應用

在Uglify 插件下面，有一個 build 任務，內容是把XX.js 壓縮輸出到 xx.min.js 裏面。如果你需要更多壓縮任務，也可以參照 build 多寫幾個任務。

插件加載代碼

這個就比較簡單了，由於上面任務需要用到 grunt-contrib-uglify，當 grunt-contrib-uglify安裝到我們的項目之後，寫下下面代碼即可加載：

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

任務註冊代碼

插件也加載了，任務也佈置了，下面我們得註冊一下任務，使用

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

來註冊一個任務。上面代碼意思是，你在 default 上面註冊了一個 Uglify 任務，default 就是別名，它是默認的 task，當你在項目目錄執行 grunt 的時候，它會執行註冊到 default 上面的任務。

也就是說，當我們執行 grunt 命令的時候，uglify 的所有代碼將會執行。我們也可以註冊別的 task，例如：

grunt.registerTask('compress', ['uglify:build']);

如果想要執行這個 task，我們就不能只輸入 grunt 命令了，我們需要輸入 grunt compress 命令來執行這條 task，而這條 task 的任務是 uglify 下面的 build 任務，也就是說，我們只會執行 uglify 裏面 build 定義的任務，而不會執行 uglify 裏面定義的其他任務。

這裏需要注意的是，task 的命名不能與後面的任務配置同名，也就是說這裏的 compress 不能命名成 uglify，這樣會報錯或者產生意外情況

加上這三塊代碼，我們的示例 Gruntfile.js 就是這樣子的：

module.exports = function(grunt) {
  // Projectconfiguration.
 grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner:'/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd")%> */\n'
      },
      build: {
        src:'src/<%= pkg.name %>.js',
        dest:'build/<%= pkg.name %>.min.js'
      }
    }
  });
  // Load theplugin that provides the "uglify" task.
 grunt.loadNpmTasks('grunt-contrib-uglify');
  // Defaulttask(s).
 grunt.registerTask('default', ['uglify']);
};

配置 Gruntfile.js：實際操作，這個文件手動創建即可

下面的代碼是一個實際的操作代碼

module.exports = function(grunt) {
	
	var sassStyle = 'expanded';
	
	grunt.initConfig({
		pkg: grunt.file.readJSON('package.json'),
		sass: {
			output:{
				options:{
					style:sassStyle
				},
				files:{
					'./style.css':'./scss/style.scss'
				}
			}
		},
		concat: {
			options: {
				separator: '',
			},
			dist: {
				src: ['./src/test_1.js','./src/test_2.js'],
				dest: './global.js',
			},
		},
		uglify: {
			compressjs: {
				files:{
					'./global.min.js':['./global.js']
				}
			}
		},
		jshint: {
			all: ['./global.js']
		},
		watch: {
			scripts: {
				files: ['./src/test_1.js','./src/test_2.js'],
				tasks: ['concat','jshint','uglify']
			},
			sass: {
				files: ['./scss/style.scss'],
				tasks: ['sass']
			},
			livehood: {
				options: {
					livereload: '<%=connect.options.livereload %>'
				},
				files: [
				'index.html',
				'style.css',
				'js/global.min.js'
				]
			}
		},
		connect: {
			options: {
				port: 9000,
				open: true,
				livereload: 35729,
				hostname: 'localhost'
			},
			server: {
				options: {
					port: 9091,
					base: './'
				}
			}
		}
	});

	grunt.loadNpmTasks('grunt-contrib-sass');
	grunt.loadNpmTasks('grunt-contrib-concat');
	grunt.loadNpmTasks('grunt-contrib-jshint');
	grunt.loadNpmTasks('grunt-contrib-uglify');
	grunt.loadNpmTasks('grunt-contrib-watch');
	grunt.loadNpmTasks('grunt-contrib-connect');

	grunt.registerTask('outputcss',['sass']);
	grunt.registerTask('concatjs',['concat']);
	grunt.registerTask('compressjs',['concat','jshint','uglify']);
	grunt.registerTask('watchit',['sass','concat','jshint','uglify','connect','watch']);
	grunt.registerTask('default');

};

• sass指的是配置編譯 Scss 文件的 task。把示例Gruntfile.js結構複製進去：需要先安裝ruby、sass、按順序執行ruby -v，和sass -v。這裏是將 ./scss/style.scss 編譯成 ./style.css 文件。編譯多個的時候，使用類似json的結構在後邊添加即可
• concat指的是把兩個js文件合成一個js文件
• uglify指的是將js文件壓縮成min.js文件
• jshint指的是檢查文件
• watch指的是監聽文件變動
• connect指的是創建本地服務，刷新頁面