windows下搭建前端开发IDE（maven + grunt + tomcat + cmd + sublime）

dgbm 9年前

那些年用过的IDE

很有幸，在做前端工程师之前我是一名全栈开发人员，所以接触了目前主流的用于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在开发中往往伴随这一些问题，所以了解各种工具并搭建属于自己的最适用于项目的开发环境，应当是每一位开发者追求高效开发的必经之路。这篇抛砖引玉的文章也正是出于此目的~