使用gulp进行项目构建--1

主要步骤：下载安装 nodejs > 全局安装gulp >  项目安装gulp及需要的插件 >  配置gulpfile.js  >  运行gulp

---

安装nodejs 的教程请自行百度，在这里我们默认已经安装好了nodejs，检查一下本地的nodejs 版本：

 

检查nodejs及npm版本

全局安装gulp然后检查gulp版本：

其中 -g 参数代表 将此包安装在全局 这个操作是为了以后可以直接运行gulp

 

安装全局gulp

 

检查gulp 版本

进入到需要重构的项目目录下：

 

进入项目

初始化项目（创建package.json）:

 

使用npm初始化项目

填上必要的项目信息，一直往下走。完成之后我们会发现项目中多了一个文件:package.json,打开它，会发现都是我们之前输入的项目信息：

为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install --production只下载dependencies节点的包）。

 

 

 

 

 

接下来我们为该项目安装本地的gulp：

这个操作是为了可以调用gulp插件的功能。

其中  --save  是将保存配置信息至package.json（package.json是nodejs项目配置文件）；

-dev  是指将配置信息安装到 package.json 下的devDependencies节点，不指定-dev将保存至dependencies节点；

 

 

完成后我们会发现项目中多了一个文件夹：

这个文件夹用于存储所需要的模块插件

 

 

新建一个gulpfile.js文件，编写：

 

 

 

接下来运行gulp：

其中 使用命令提示符执行gulp 任务名称

如果直接输入gulp 则会执行 default 任务 

注：可以使用webstorm 运行gulp：

 

 

 

执行过后，发现项目目录里多了一个文件夹，内容为：

build --css --mycss.css  

和我们在gulpfile.js 中定义的一样。