gulp+nginx—前端自动化构建工具

什么是codeEasy?

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

准备工作

首先你需要在本机安装node.js(https://nodejs.org/en/download/),安装成功后,你可以去github克隆本项目(https://github.com/yangzhennupt/codeEasy)。项目clone完毕后,在项目根目录打开CMD,然后我们将npm转换成淘宝镜像,输入以下命令

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

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

正式开始

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

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

nginx下载地址 http://nginx.org/en/download.html

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

location / {
root D:\codeEasy\build;
//这里项目填build目录
index index.html index.htm;
}

修改完毕后,双击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中添加相应的任务即可。

6.gulp clean命令能够帮助你删除build目录

项目路径:https://github.com/yangzhennupt/codeEasy 欢迎star

你可能感兴趣的:(gulp)