maven + grunt + tomcat + cmd + sublime

頗有幸，在作前端工程師以前我是一名全棧開發人員，因此接觸了目前主流的用於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在開發中每每伴隨這一些問題，因此瞭解各類工具並搭建屬於本身的最適用於項目的開發環境，應當是每一位開發者追求高效開發的必經之路。這篇拋磚引玉的文章也正是出於此目的~