之前一直使用eclipse来编写前端代码,有很多不方便之处,举两个例子:
1>每次改完代码必须刷新一下界面,有时候html引擎会缓存html内容,刷新后不一定会加载最新的html。
2>有时候更新完代码之后如果后台java代码有错会导致整个项目在本地跑不起来。用起来极度不方便,大大降低工作效率。
工欲善其事,必先利其器。
使用方便快捷的编译器和一些前台工具实现前后端的分离会大大提升工作效率。
1>下载vsCodehttps://code.visualstudio.com/Download(如果下载了vsCode,略过此步骤)
2>nginx使用:
1、下载nginx静态服务器下载地址点击打开链接,假如安装的目录名为nginx-1.6.3
2、在vsCode中打开nginx-1.6.3,在目录nginx-1.6.3\conf\nginx.conf中 修改配置,修改文件下 http =》 server =》 location =》 proxy_pass为后台主机头地址,
这是本地和内网的后台连接。
3、vsCode编辑器终端输入两个指令cd nginx-1.6.3和.\nginx.exe启动nginx解决跨域问题 .
3>node的使用:
这是具体步骤: 点击打开链接
简单使用的办法如下:
1、安装node.js
2、淘宝npm插件镜像安装
vsCode终端输入npm install -g cnpm --registry=https://registry.npm.taobao.org
4>gulp的使用
gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。gulp是基于Nodejs的自动任务运行器, 她能自动化地完成javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。在实现上,她借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级的输入,使得在操作上非常简单。通过本文,我们将学习如何使用Gulp来改变开发流程,从而使开发更加快速高效。
2、这是gulp工具的具体使用http://www.ydcss.com/archives/18这里面包含了步骤3>,因为他基于node.js
3、 如果简单使用仅需一下几步在终端输入:
(1)全局安装gulp #查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装
cnpm install --global gulp
(2)本地安装gulp依赖
cnpm install
(3)更改配置文件
gulpfile为配置文件,更改文件里面ydcfo.build参数 为项目文件夹路径
(4)启动gulp作为静态服务器,主要使用自动刷新同步功能,启动服务器+自动刷新
gulp live
5>整体文件的目录如下: