grunt構建前端自動化的開發環境

廢話很少說.直奔主題.

1.安裝node.

別問爲何.若是你不知道,說了你仍是不知道.

別問怎麼安裝,本身去百度.

2.安裝grunt_CLI.

安裝完node,而且安裝成功了,後.下載grunt_Cli.

看到如上界面,說明安裝成功了.

查看grunt版本.

3.在F盤新建grunt目錄

目錄裏面新建以下文件,和文件夾.

npm init 命令行新建package.json

內容以下:

4.安裝grunt.

安裝完成後看一下package.json的devDependencies多了一條配置.

驗證grunt是否安裝成功.

看到這條信息說明安裝成了.咱們首先記住default.後面就會有了.

5.配置Gruntfile.js

看到default沒有.

重新運行一下grunt命令

6.grunt插件:

打開官網看到下面的東西.

帶星號和contrib前綴的是grunt團隊貢獻的,其餘的都是第三方貢獻的.

下面介紹幾個插件.

7.jshint插件(檢查js語法錯誤的).

點開這個插件.

按照指令下載插件.

如今查看一下package.json裏面的內容.

配置插件的信息.

新建.jshintrconfig文件.這是驗證規則.這是我平時經常使用的規則.至於這個規則參數什麼意思,後面再說(jshint配置).

在src裏面新建jsint.js文件.

如今咱們命令行grunt 跑一下.

錯誤一目瞭然.

咱們如今修改jshint.js文件.

在grunt跑一下.

好了錯誤消除.

8.uglify插件(壓縮js代碼)

按照指令下載插件,修改配置文件.

grunt一下後,看一下target目錄下是否是多了一個js文件.

可能你們以爲鬱悶,這個壓縮文件和咱們的源文件相差甚遠啊.

這是驗證的一種規則,由於裏面的變量沒有使用過,壓縮過以後,就沒什麼用了,刪掉了.

修改一下jsint.js文件.

grunt跑一下.

9.watch插件(監視代碼是否修改,真正的自動化.)

下載插件,配置文件.

如今開始修改jsint.js文件,你就會發現代碼會自動壓縮,若是出現語法錯誤,還會提示你有錯誤.

這纔是真正的自動化啊.

10.插件的參數配置命名.

插件中的checkobj,actionobj,action這裏可使用任何字符串代替這些命名.也能夠把這些字符串指向的內容分開來寫,這樣有利於團隊的合做開發,協同開發.

11.插件版本的統一.

咱們作項目開發的時候,這些插件是不須要上傳的代碼託管上去的.那麼問題來了.

並且咱們的這些插件版本迭代的有這麼快,咱們若是來保證咱們團隊的插件的一致性呢.

很簡單,這個時候就發揮了package.json的做用了.

對了很久沒看這個文件了.

咱們如今看一下這個文件.

 

看到沒有,咱們全部的插件,都在這裏做爲一來了.

咱們把這個文件上傳到代碼託管上,你們共享了這個文件就好辦了.

在F盤創建test文件夾

把package.json搞過去,而後在dos中 npm install

查看test文件夾

咱們的插件就都包含在這裏面了.

挨咬,寫累死了.