gulp准备工作（二）

1、准备一个项目

        确定好自己的目录结构，同时你要分开源码和打包后的内容；

目录结构如下：

        项目名称XXX
​		  src	        源码
​			+pages      html文件
​			+css		css文件
​			+js			js文件
​			+sass		sass文件
​			+images	    图片
​			+videos	    视频
​			+audios	    音频	
​			+lib		第三方文件
​			+fonts		字体图标

注意：css和sass二选一即可；

2.准备一个gulpfile.js的文件

该文件是gulp进行打包的依据，每一项个目都需要一个gulpfile.js，我们在这个文件里面进行本项目

的打包配置，gulp在运行的时候会自动读取gulpfile.js文件里面的配置，按照我们在gulpfile.js文件

里面的配置进行打包工作

注意：gulpfile.js直接写在项目的根目录里，和src同级

3.在项目根路线下输入cmd

输入命令行：npm init

npm init

作用：创建package.json文件，监管安装了哪些包，哪些属于开发依赖，哪些鼠疫生产依赖

4.在项目里再次安装gulp

注意：项目里的gulp是以第三方模块的形式出现的，专门提供配置打包流程的api，并且每个项目

都要安装一次

安装指令：npm install gulp -D

npm install gulp -D

5.在gulpfile.js文件中书写配置文件

在该文件书写该项目的打包流程，书写完毕后，安装打包流程去执行gulp指令运行gulpfile.js文件

补充说明：

注意：必须要保证打包前后的目录结构一致：

创建一个叫做src的目录（表示源码）；

创建一个叫做dist的目录（存放打包后的文件）；

gulp说明

gulp分为全局依赖环境和项目依赖环境

全局依赖环境：一台电脑安装一次，以后使用就可以了，在命令行提供gulp xxx的能力；

// 安装全局依赖
npm install --global gulp

项目依赖第三方gulp：每个项目都要安装一次，作为第三方包出现，在你导入以后，可以使用

gulp.xxx()的方法;

//切换到项目目录,安装项目依赖
npm install gulp -D

package.json记录的第三方依赖

        dependencies:

表示你的项目的项目依赖，比如jquery, swiper等，指项目运行时需要用到的内容，将来上线以后也

需要用到的内容；

        devDependencies:

表示你的项目的开发依赖，比如gulp，指项目开发阶段需要用到的内容，将来上线以后不需要用到

的；gulp第三方包最好是放在DevDependencies