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

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


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

 
使用gulp进行项目构建--1
检查nodejs及npm版本

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

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

 
使用gulp进行项目构建--1
安装全局gulp
 
使用gulp进行项目构建--1
检查gulp 版本

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

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

初始化项目(创建package.json):

 
使用gulp进行项目构建--1
使用npm初始化项目

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

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

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

 

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

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

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

其中  --save  是将保存配置信息至package.json(package.json是nodejs项目配置文件);

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

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

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

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

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

新建一个gulpfile.js文件,编写:

 

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

接下来运行gulp:

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

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

注:可以使用webstorm 运行gulp:

 

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

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

build --css --mycss.css  

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