让静态页面开发更简单——Gulp+nginx本地开发

什么是codeEasy?

codeEasy是一个基于Gulp的前端自动化构建工具，它能够帮助前端开发人员更快的编辑代码，通过gulp的监视功能，能够实时监控文件的变化并进行更新。目前codeEasy支持html压缩，css压缩，sass，CSS自动添加前缀、精灵图，js压缩，后续将添加更多新功能，敬请期待...

准备工作

首先你需要在本机安装node.js，安装成功后，你可以去github克隆本项目（地址在这里，感谢大家star）。项目clone完毕后，在项目根目录打开CMD，然后我们将npm转换成淘宝镜像，输入以下命令 

npm install -g cnpm --registry=https://registry.npm.taobao.org 

以后用cnpm 代替npm命令即可。

正式开始

在项目根目录打开cmd，输入cnpm install   即可自动安装本项目的依赖。

安装成功后，输入gulp dev  开始构建，你会发现根目录在生成了build目录，然后 我们最好使用nginx来做为本地开发服务

nginx下载地址

下载好后，解压到磁盘中，打开/nginx/conf/nginx.conf，进行下面的修改

nginx配置

修改完毕后，双击nginx.exe 你会发现界面一闪而过，然后打开浏览器，输入localhost/demo.html，如果看到以下画面  恭喜你，配置成功啦。

hello,codeEasy

一些注意点：

1.目录结构：项目代码放在src下面，html放在view里面，图标放在images里面，支持多级目录，注意引用时应该写build的路径，放入工作项目中只需要把build目录里面的代码放进去即可。

2.gulp会自动检测在src/images/下的图片，并生成精灵图，同时精灵图相关的样式sprite.css在/assets/images/目录下，比如有个图标被命名为‘subBtn’，那么该css类 就是  '.icon-subBtn'，自动生成的类已经定义了图标的宽高，如果你用一个行内元素，那么仅需要再加个类，让它变成block或inline-block即可。（具体可看demo.html）

3.生成的js文件是经过压缩的，会在原来的基础上加上后缀' .min'，引用js的时候需要注意。

4.不需要写厂商前缀，里面已经有插件帮我们做了。

5.如果你需要增加一些新功能，那么请在/gulp/tasks/下载自行编写任务，然后在watch.js,develop.js中添加相应的任务即可。

项目github:  https://github.com/yangzhennupt/codeEasy   欢迎大家star，这是我学了gulp之后自己搭建的第一个脚手架，希望大家多多支持，有任何问题或需要添加的功能请指出，我会持续更新。