前端專案從開發到部署上線，中間通常要做一些額外的處理。比如程式碼壓縮、合併、css預編譯、巨集替換等。對於一個成熟的專案，這些通常都是通過指令碼自動完成的。本文結合專案實踐，介紹grunt在web前端持續整合中的應用。

    1、開發一個專案前，首先需要制定專案的文件結構。一個結構合理、層次清晰的文件結構更有利於團隊成員間的協作。我們的專案結構如下圖所示：

        dist：存放最終打包好的專案檔案。可直接部署到伺服器中。

        node_modules：存放node模組檔案。

        report：存放專案的檢測報告。

        router：存放php等服務端指令碼。 

        script：存放專案的js指令碼。業務邏輯程式碼都放在這裡。

        test：存放單元測試檔案。

        theme：存放樣式檔案、字型檔案。

        view：存放html、php等檔案。

        配置檔案一般放在根目錄下。

    2、dist目錄

    dist目錄只儲存專案釋出所必需的所有檔案。基本上對應著開發目錄中的檔案結構。如下圖所示：

    3、report目錄

    report目錄儲存專案有關的統計報表，包括覆蓋率報告、程式碼風格檢查報告、js程式碼靜態檢查報告、單元測試報告。如下圖所示：

    4、script目錄

    script目錄儲存專案的業務程式碼。由於我們的專案採用seajs模組化開發，所以script目錄也按照一個模組一個目錄的形式存放。業務程式碼都放在script/module目錄下，通用程式碼、第三方程式碼一般放在script\common目錄下。每個模組的模板檔案放在該模組目錄的tpl子目錄下。如下圖所示：

    5、test目錄

    test目錄儲存單元測試程式碼，基本上與script目錄結構一致。如下圖所示：

    6、theme目錄

    theme目錄儲存專案的樣式、字型、圖片等檔案，按風格存放。如下圖所示：

    7、view目錄

    view目錄存放專案的html、php檔案。如下圖所示：