我的前端页面开发js简易有效环境

前端开发主要涉及到html, css(less/sass), javascript这几个方面的知识。真正的快速有效开发，必须实现所谓所见即所得。在构建生产时，可能需要使用gulp/grunt等task runner来将前端所有的任务串联起来，但是在一个简易开发环境中，有以下两种模式快速构建本地静态页面(html+css+js)开发环境。

browsersync 命令行方式启动server去serve静态页

1. nodejs安装；

2. npm 安装

npm install -g browser-sync

3. 在你需要开发的目录下，启动一个cmd，执行以下命令，开启web server，监视文件变更。

browser-sync start --server --directory --files ./*.*

这时，会自动启动一个默认浏览器，打开你的目录，你随便选择文件运行；

4. 对于javascript你可以在代码中随时加一个debugger命令让js引擎运行到这个位置时自动中断运行，以便供你检查运行的stack

var btn = document.getElementById("btn");
var ret = document.getElementById("ret");
btn.addEventListener('click', function(){
  ret.innerText = 10 + num.value; 
  debugger
  console.log(ret.innerText);
})

这种方案的优点是可以livereload，但是缺点是每次测试前要执行browsersync的命令行命令以便启动browsersync来执行web服务

直接通过sublime来集成一个web server

这种方式的思路是一切操作都在sublime中进行，通过过安装一个插件sublimeServer来实现sublime启动时自动启动内置的web server(默认8080端口）,而该server将serve所有在sublime中打开的文件夹，

你只需要在sublime编辑界面右键选择open in sublimeserver就可以直接在web browser中以http://localhost:8080/xxx/yourfile.html的方式来编辑了！

这个方案的优点是非常简便，一切操作直接在sublime中搞定，但是无法实现livereload

还有一种方案是sublime直接集成browsersync但是这个比较傻瓜，因为browsersync是依赖于nodejs的，他把整个package都再安装一遍，太大了！！

---

 

---

 

---

 

综合上面几种方案，我觉得最好的方案是browsersync命令行+sublime修改文件触发livereload，但是如何解决命令行路径的烦人问题呢？

安装一个Terminal的sublime插件，添加如下配置信息：

"terminal": "C:\\WINDOWS\\system32\\cmd.exe",
"open_terminal_project_folder"
    // commands
    "parameters": ["/START", "%CWD%"]

以后需要在web server中调试一个文件时，直接在sublime text编辑界面， ctrl+shit+t打开terminal,运行以下命令：

browser-sync start --server --directory --files .

即可。但是上面ctrl+shift+t的方式在文件目录为中文目录时可能存在问题不能使用，那么另外一种绕过烦人的一系列cd命令到相应目录的方法是：1.在sublime中右键open containing folder;2.shift+右键；3.选择在此处打开cmd