maven + grunt + tomcat + cmd + sublime

來自： http://www.baiduhome.net/lib/view/open1438335016238.html

很有幸，在做前端工程師之前我是一名全棧開發人員，所以接觸了目前主流的用于jsp開發的IDE：eclipse和IntelliJ。它們的優點就是集成了很多插件，所以夠智能。
很不幸，eclipse的流暢性極差（經常容易卡死,白瞎了我10G RAM、128G SSD + 256G HD、i3 CPU的筆記本）以及貪得無厭的消耗內存。IntelliJ作為付費產品，其穩定性也是值得吐槽的，經常出現莫名其妙的bug導致項目無法正常部署。
而如果需要開發后端代碼，斷點調試必不可少，除IDE外也無他更好工具，所以談起IDE都是愛恨交織。

項目狀況

現在的項目用jsp開發，屬于前后端“半分離”狀態。
從技術上說，用了freemarker模板，這個東西有點像jsp頁面，會用到一些java代碼，卻又可以寫在html文件中，所以并沒有真正意義上的讓前后端分離。
從結構上說，整個產品有點像cs架構，分為client端的web項目和server端的web項目，client端負責響應瀏覽器請求，返回js、 css、html等，server端負責與數據庫、client端交互。表面上看是一種分離，實際上已是“半分離”狀態，因為如果client端想單獨調試基本不可能，原因很簡單，freemarker填充模板數據失敗報錯404。個人覺得freemarker還是更加適合于jsp全棧開發，用于前后端分離太尷尬。
由于前段開發只需關注client端，所以開始使用Intellij的初衷是通過maven下載打包web項目，啟動tomcat服務器并實時更新修改的前端文件。后來被折磨了幾次，所以決定自己定制化“IDE”。

關于開發工具（題外話）

我覺得最優秀的開發工具需要滿足兩個特點：

1. 定制化
   每個開發者根據自己的使用習慣和項目需求來選擇插件并進行配置。

2. 可擴展
   開發工具本身提供良好的接口，讓各位開發者能參與開發其它插件來不斷強化它。
   令我印象最深的4款編輯器符合這兩個特點：emacs、vim、sublime、atom。簡單的說一說他們的優缺點吧。

• emacs：當之無愧的神之編輯器，學習曲線是最難的，只有大神才可將其用得淋漓盡致，各種ctrl、alt快捷鍵在windows鍵盤下使用相當不適應。

• vim：編輯器之神。最大的特點是可以脫離鼠標很舒服地編輯代碼，與emacs不一樣，它不是ctrl到死的方式使用快捷鍵，而是用esc來切換模式，配合上強大宏以及多種插件，也是相當順手的一件工具。使用它還有一個原因：它跨平臺。linux服務器自帶了vi，掌握了vim，上linux服務器上查看編輯文件再也不用犯愁了。

• sublime：插件豐富，開發者活躍，當下流行，正在使用。

• atom：后起之秀，界面美觀，github強推工具，基本上模仿了sublime，但是流暢性還是做得不夠好，如果這方面加強我會毫不猶豫地轉投github的懷抱。

實現方式

在windows下想把各種工具集成起來，變成一個傻瓜智能甚至是一鍵啟動的軟件，很自然地想到了批處理腳本。所以最終各軟件的調用都是依賴cmd命令來實現的。

基本流程

1. 為了實現一鍵啟動，先清除tomcat緩存和項目代碼以及maven本地緩存的jar文件。

2. 停止grunt和tomcat，防止重復啟動。

3. mvn命令編譯發布項目和下載依賴。

4. 通過grunt拷貝生成的項目到tomcat的webapps目錄下，這里用批處理也可以實現。

5. 啟動tomcat服務器

6. 啟動grunt watch，只要sublime修改完代碼后，grunt即會自動拷貝到對應的web目錄下。

源代碼（出于保密，部分文件路徑略作修改）

批處理腳本
color 0B
rem 設置tomcat安裝路徑
set “tomcat_path=D:\Program Files\apache-tomcat-7.0.56\”
rem 設置代碼路徑
set “code_path=E:\branches\hd-2.0.0\client\”
echo 停止grunt進程
taskkill /F /IM node.exe
echo 停止tomcat進程
D:
cd %tomcat_path%
call bin\shutdown.bat
echo 清除緩存
rd /s/q work
rd /s/q ap
rd /s/q D:\datas.m2\repository\com\hd
echo 編譯并發布代碼
E:
cd %code_path%
call mvn clean package
call grunt
echo 啟動tomcat
D:
cd %tomcat_path%
call bin\startup.bat
echo 監聽并發布代碼
E:
cd %code_path%
grunt watch

gruntfile.js配置文件，如果大家知道grunt-contrib-copy中，文件名如何使用通配符，請發郵件告訴我，必謝~

/*global module*/
module.exports = function (grunt) {
  'use strict';
  grunt.initConfig({
    copy: {
      publish: {
        files: [
          { expand: true, cwd: 'target/client-2.0.0.v20150630', src: ['**'], dest: 'D:/Program Files/apache-tomcat-7.0.56/webapps/ap'}
        ]
      },
      main: {
        files: [
          { expand: true, cwd: 'src/main/webapp', src: ['**'], dest: 'D:/Program Files/apache-tomcat-7.0.56/webapps/ap'},
        ]
      }
    },
    watch: {
      view: {
          files: ['src/main/webapp/**'],
          tasks:['copy:main'],
          options: {livereload:false}
      }
    }
  });
 
  grunt.loadNpmTasks('grunt-contrib-copy');
  grunt.loadNpmTasks('grunt-contrib-watch');
 
  grunt.registerTask('default', ['copy']);
};

總結

其實在開發中，最消耗時間的就是鼠標的點擊和工具的切換。所以現在流行多顯示器開發，讓共工具在不同的屏幕上操作，減少了點擊任務欄、最小化、最大化這種機械操作。另一方面IDE的出現、快捷鍵的使用減少鼠標的點擊。
傳統的IDE在開發中往往伴隨這一些問題，所以了解各種工具并搭建屬于自己的最適用于項目的開發環境，應當是每一位開發者追求高效開發的必經之路。這篇拋磚引玉的文章也正是出于此目的~