gulp的使用(三)之把gulp运用到项目实战中

在了解了上面的gulp(一)(二)以后,我们就可以开始在项目中具体使用了,具体使用流程如下:

1. 创建一个project文件夹,然后里面首先创建一个src文件夹,里面放置开发要用到的文件夹:

2. 在project下打开git命令窗口(也可以windows自带的命令行):

3. 输入命令:

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

实现全局安装gulp;( 只需要执行一次，如果已经执行过了，就不需要再去执行。Gulp -v 有版本号，代表已经执行过了)

在项目中输入命令: npm init –f 实现切换到项目目录,此时会生成package.json文件

然后输入命令: npm install gulp --registry=https://registry.npm.taobao.org

生成node_modules文件夹,这个文件夹是项目依赖包

(以上的操作都是基于安装了node,配置好了nvm和npm环境的基础下的):

截图代码如下:

生成的文件夹如下所示:

4. 在项目目录下创建一个叫gulpfile.js文件: 这个文件是用于自动化管理项目的(即gulp任务管理清单),里面自己可以写一些图片压缩,代码丑化,less自动编译的功能. 这里我们直接拿别人编写好的使用即可(在第二篇的时候可以直接把代码拷贝下来):

5. 拿出封装好的less文件(比如字体rem转换文件,一般做webApp开发的时候公司都会提供的两个公共less文件),然后在index.less下用@import的方式导入进去:

6. 使用bower下载angular(前提是你得安装了bower,安装的命令是 npm install -g bower,也可以检查你是否安装了bower: bower -v)

u输入命令安装angular: bower install angular anglar-ui-router

7. 安装好了以后,就执行命令gulp,会生成如下文件,并且会自动打开浏览器实现无刷新自动更新内容: (这个步骤其实可以放在前面执行,只是一开始src没有创建文件体现不出效果)

其中,由于gulpfile.js的自动构建功能,

build文件夹是浏览器执行的文件,里面包含了less编译好的css文件等,所有index.html中导入的外部文件的路径,都是要参考build文件下的,而不是src文件下的. 经过gulpfile.js文件的自动化管理,所有的导入的外部less文件,最后都会变成一个index文件.

dist文件夹是发布文件,

src文件是开发的文件夹,经过gulp命令执行后,都会把文件整合到build文件夹下.所有的代码都是写在src下的,运行的文件都是build文件夹下的

下图是经过gulp命令执行后的buid文件:

8. 参照build下面的文件夹,在src文件夹中的index.html文件导入相关css,js等外部文件:

因为浏览器上运行的是build文件夹

9. 然后可以在src中的js文件夹,css文件夹中任意再创建文件夹,并在新创建的文件中添加文件,因为反正最后经过gulp自动化管理以后,都会自动变成一个index文件:

10. 另外,可以在编译器中直接使用命令行,有时候页面或者build文件夹没有刷新的时候,可以输入命令: gulp;

如果使用webstorm开发,里面有自带的命令行;