gulp是前端开发项目构建构建工具,在开发过程中使用gulp可以避免重复的机械劳动,大大提高开发效率,比如:文件合并,文件拷贝,less编译,css压缩, js压缩,图片压缩等。
gulp官方网站:gulpjs.com
gulp中文网站:www.gulpjs.com.cn
gulp基于node.js,需要配置node环境。
在node.js官网下载最新版node安装包,由于安装包格式为msi,一路确定即可,安装程序会自动配置环境变量。
安装完成在控制台输入指令node -v检测是否安装成功,若出现版本号表示安装已安装成功。
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文件为本项目配置文件。
在控制台输入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,注意文件名为固定,不能随意修改。此时项目根目录的情况是这样的:
到此,基础环境已搭建完成。
网友评论