Grunt學習使用

 

原文地址：Grunt學習使用必看

grunt簡介神馬的很少說，處處一大堆。

我只說說我已經實現了的代碼。

按照官方的教程 相信已經配置好了，接下來講 package.json 和 Gruntfile.js這2個文件，package.json是爲了告訴grunt咱們用哪些插件，這些插件的版本是多少，以及我這個項目的一些信息。

那有人說我怎麼知道我須要什麼插件，我怎麼寫這個文件？請看官方的例子：

 

 1 {
 2 "name": "my-project-name",
 3 "version": "0.1.0",
 4 "devDependencies": {
 5 "grunt": "~0.4.5",
 6 "grunt-contrib-jshint": "~0.10.0",
 7 "grunt-contrib-nodeunit": "~0.4.1",
 8 "grunt-contrib-uglify": "~0.5.0"
 9 }
10 }

那麼咱們只須要在最初的文件中寫上

{
"name": "my-project-name",
"version": "0.1.0"
}

這裏要注意版本的寫法，必須是0.1.0，的格式，否則會報錯。​

Gruntfile.js文件如今不用管它，執行npm install，你能夠發現運行結果以下，提示你沒有寫什麼什麼的，可有可無。。。

 

當咱們須要用什麼插件的時候，再利用npm install <插件名> --save-dev 命令便可下載到你項目的node_modules文件夾下，而且自動添加到package.json文件中，這樣就能夠不用擔憂這個文件會不會寫了。

接着配置Gruntfile.js文件，官方也有解釋流程，點這裏 ，接着看咱們這個文件

 1 module.exports = function(grunt) {
 2 //配置任務，全部插件的信息
 3 grunt.initConfig({
 4 pkg: grunt.file.readJSON('package.json'),
 5  
 6 // 一、聲明插件的配置
 7  
 8 }),
 9 //二、加載咱們的插件
10  
11 //三、註冊並告訴grunt咱們要運行這個插件
12  
13 };

 

就是這樣一個流程配置，好比咱們要使用grunt-contrib-uglify插件，這個插件是用來壓縮js文件。

 

首先咱們得安裝這個插件npm install grunt-contrib-uglify --save-dev

能夠發現咱們的package.json中多了這樣的語句

 

"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-uglify": "~0.5.0"
}

 

這裏的grunt確定是要必須安裝的唄，grunt都沒有你還用什麼插件。。。

 

接着配置咱們的插件，你能夠到官方文檔中找到相應的插件並查看怎麼用。按照上面說的流程依次寫入便可。

 

接着是二、3步

 

最後再執行grunt命令，便可查看到生成的壓縮文件，項目的目錄結構是：

 

還有不少不少插件，須要咱們本身去發現並使用。

 

參考網址：

grunt官網

Grunt教程