我的前端页面开发js简易有效环境
2017-07-31 10:32
302 查看
前端开发主要涉及到html, css(less/sass), javascript这几个方面的知识。真正的快速有效开发,必须实现所谓所见即所得。在构建生产时,可能需要使用gulp/grunt等task runner来将前端所有的任务串联起来,但是在一个简易开发环境中,有以下两种模式快速构建本地静态页面(html+css+js)开发环境。
2. npm 安装
3. 在你需要开发的目录下,启动一个cmd,执行以下命令,开启web server,监视文件变更。
这时,会自动启动一个默认浏览器,打开你的目录,你随便选择文件运行;
4. 对于javascript你可以在代码中随时加一个debugger命令让js引擎运行到这个位置时自动中断运行,以便供你检查运行的stack
这种方案的优点是可以livereload,但是缺点是每次测试前要执行browsersync的命令行命令以便启动browsersync来执行web服务
你只需要在sublime编辑界面右键选择open in sublimeserver就可以直接在web browser中以http://localhost:8080/xxx/yourfile.html的方式来编辑了!
这个方案的优点是非常简便,一切操作直接在sublime中搞定,但是无法实现livereload
还有一种方案是sublime直接集成browsersync但是这个比较傻瓜,因为browsersync是依赖于nodejs的,他把整个package都再安装一遍,太大了!!
综合上面几种方案,我觉得最好的方案是browsersync命令行+sublime修改文件触发livereload,但是如何解决命令行路径的烦人问题呢?
安装一个Terminal的sublime插件,添加如下配置信息:
以后需要在web server中调试一个文件时,直接在sublime text编辑界面, ctrl+shit+t打开terminal,运行以下命令:
即可。但是上面ctrl+shift+t的方式在文件目录为中文目录时可能存在问题不能使用,那么另外一种绕过烦人的一系列cd命令到相应目录的方法是:1.在sublime中右键open containing folder;2.shift+右键;3.选择在此处打开cmd
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
相关文章推荐
- 我的前端页面开发js简易有效环境
- [开发笔记]-页面切图、CSS前端设计、JS
- 安装Sublime+Emmet插件作为前端开发环境,第一个简单页面
- [JS前端开发] js/jquery控制页面动态载入数据 滑动滚动栏自己主动载入事件
- MAC电脑配置node.js环境利用vue.js开发前端webapp详解
- 前端页面开发之Node.js初学者指南
- 构建初级前端页面重构开发环境
- 前端开发:页面构建和js前端不得不说的那点事儿
- 配置移动前端开发调试环境(nodejs+npm+weiner的安装和配置使用)
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件
- 前端搭建Nodejs+npm+gulp开发环境
- iOS与H5交互 H5与App原生交互,一般会是前端页面中的JavaScript与App使用的原生开发语言的交互。技术方案应能达到以下要求: 在js与原生进行交互的时候能保证正常的正向调用逻辑返回
- jsFiddle – 前端集成开发环境
- 前端自动化开发之Node.js的环境搭建教程
- AngularJS + CoffeeScript 前端开发环境配置详解
- nodejs+express搭建电影网站之二 -----具体项目结构 开发环境的建立 测试页面流程跑通
- 构建初级前端页面以及重构开发环境(from 知乎)
- 支持seaJs和requireJs的前端模块开发方案(二):业务页面和入口脚本init.js
- 构建初级前端页面重构开发环境
- [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件