gulp自动化构建项目（一）——环境搭建

从无聊的重复性过程中解放出来，干点有意义的事。。。

gulp是前端开发项目构建构建工具，在开发过程中使用gulp可以避免重复的机械劳动，大大提高开发效率，比如：文件合并，文件拷贝，less编译，css压缩， js压缩，图片压缩等。

gulp官方网站：gulpjs.com

gulp中文网站：www.gulpjs.com.cn

gulp基于node.js，需要配置node环境。

安装node.js

在node.js官网下载最新版node安装包，由于安装包格式为msi，一路确定即可，安装程序会自动配置环境变量。

安装完成在控制台输入指令node -v检测是否安装成功，若出现版本号表示安装已安装成功。

npm

npm是node.js的包依赖管理工具，类似于java中的maven，前端页面依赖包一般也用bower。

开发者为node.js开发了大量工具包，在npm官网可查看具体包信息，按照说明下载使用。由于官网访问速度慢，用淘宝npm镜像也可，与官网每十分钟同步一次，基本保持一致。

安装node过程中已经自动安装了npm，默认位置为：C:\Program Files\nodejs\node_modules\npm

配置npm的环境变量，通过命令npm -v查看npm是否安装成功

初始化项目文件

接下来我们在E盘根目录创建myweb文件夹，表示项目。进入myweb项目文件夹，在控制台输入npm init初始化，创建package.json配置文件。一路回车即可，直至项目根目录生成package.json文件，表示初始化完成。package.json文件为本项目配置文件。

安装gulp

在控制台输入npm install gulp --save-dev安装项目开发依赖包gulp，--save表示写入配置文件即package.json文件中，-dev表示只在开发阶段依赖。安装完成后项目根目录出现node_modules文件夹。

控制台输入gulp -v检查是否安装成功。出现版本号表示安装成功。

查看package.json文件，多了以下信息：

1 "devDependencies": {

2 "gulp":"^3.9.1"

3 }

此时在项目根目录新建文件gulpfile.js，注意文件名为固定，不能随意修改。此时项目根目录的情况是这样的：

到此，基础环境已搭建完成。

作者：墨鸿
链接：https://www.jianshu.com/p/cbd1fcaedf73