使用gulp进行项目构建--1
主要步骤:下载安装 nodejs > 全局安装gulp > 项目安装gulp及需要的插件 > 配置gulpfile.js > 运行gulp
安装nodejs 的教程请自行百度,在这里我们默认已经安装好了nodejs,检查一下本地的nodejs 版本:
全局安装gulp然后检查gulp版本:
其中 -g 参数代表 将此包安装在全局 这个操作是为了以后可以直接运行gulp
进入到需要重构的项目目录下:
初始化项目(创建package.json):
填上必要的项目信息,一直往下走。完成之后我们会发现项目中多了一个文件: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 中定义的一样。