再探 butterfly.js - grunt.js篇（一）

##再探 butterfly.js - grunt.js篇（一）

####神器 grunt.js

久仰grunt.js的大名，學習grunt.js一直是我todo List的第一位。趁着新春佳節來臨之際（打醬油的日子），就來填了這個坑，完了這個心願。 grunt.js的強大，強大在於它擁有不少用途豐富的插件，和不一樣插件之間的聯動實現更牛逼的功能。 這裏默認你們已經安裝了npm和會用npm install等指令，就不詳細講了。下面講用到grunt-contrib-watch和grunt-contrib-connect實現改動代碼自動刷新瀏覽器，而不用手動按F5或者ctrl+R來刷新瀏覽器。也會將這個酷炫的測試功能應用於butterfly.js的應用開發之中。

grunt-contrib-watch

grunt-contrib-watch，這個插件超級強大，基本上，我見到用grunt.js的應用開發，沒有那個不用到grunt-contrib-watch。其功能就是：監測指定文件的改動包括：html、css、js，當指定的文件有改動（保存後），就會觸發task。

grunt-contrib-connect

grunt-contrib-connect，文檔上面，它給本身的定義就是一個connect web server，因此，這是一個能夠建立服務器的插件。

正片

建立咱們的工程目錄：

myproject
  ┣app
    ┣butterfly
    ┗main
      ┣theme.css
      ┣index.html
      ┗index.js
  ┣package.json
  ┗Gruntfile.js

package.json能夠用npm init來建立，或者本身建立文件。這個屬於npm基礎，不瞭解的本身面壁。在命令行執行如下代碼：

npm install grunt --save-dev
npm install grunt-contrib-connect --save-dev
npm install grunt-contrib-watch --save-dev

上面的--save-dev是兩根--的，不知道爲何被吞了一根，這三行代碼，分別安裝了grunt、grunt-contrib-connect、grunt-contrib-watch。 編輯Gruntfile.js，這個文件是Grunt.js的核心，全部Grunt.js執行的任務都在這裏控制，Grunt.js的原始狀態應該是這樣的：

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

先設置connect模塊：

connect: {
	options: {
		port: 9000,
		hostname: 'localhost',
		livereload: 35729
	},
	server: {
		options: {
			open: {target:'http://localhost:9000/main/index.html'},
			base: ['app']
		}
	}
}

再設置watch模塊：

watch: {
	livereload: {
		options: {
			livereload: true
		},
		files: ['app/main/index.html','app/main/theme.css', 'app/main/index.js']
	}
}

最後設置task

module.exports = function(grunt){
	pkg: grunt.file.readJSON('package.json'),
	grunt.initConfig({
		connect: {
			options: {
				port: 9000,
				hostname: 'localhost',
				livereload: 35729
			},
			server: {
				options: {
					open: {target:'http://localhost:9000/main/index.html'},
					base: ['app']
				}
			}
		},
		watch: {
			livereload: {
				options: {
					livereload: true
				},
				files: ['app/main/index.html','app/main/theme.css', 'app/main/index.js'] //監測文件列表
			}
		}
	});

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

	grunt.registerTask('default', ['connect:server', 'watch'])
}

編輯完成後，在命令行輸入grunt，grunt.js經過grunt-contrib-connect建立一個服務器，localhost:9000（域名和端口在options設置），執行命令後，你會發現瀏覽器自動打開了http://localhost:9000/main/index.html。若是沒有報錯，就算是大功告成了。這時候你能夠改動一下index.html、theme.css或者是index.js。very good。咱們解放了F5這個按鈕了。

其實，這個只是grunt.js的一個小功能，grunt.js強大得很，這裏先挖個坑，後續會和你們分享grunt.js的其餘模塊和更加詳細的Gruntfile.js的配置