gulp介绍
gulp是基于node平台开发的前端构建工具。
gulp是一个JavaScript程序,并且它的指令使用的也是JavaScript语言,所以gulp通常是前端开发人员自动化处理日常任务的首选工具。
gulp可以处理日常工作流产生的任务(作用):
项目上线时对HTML、CSS、JavaScript文件合并、压缩。
将ES6语法转换为ES5语法以便代码在较旧的浏览器中运行。
gulp允许开发者将机械化的操作编写成任务,在命令行输入相关的任务名称就能执行机械化操作,从而提高开发效率。(用机器代替手工,提高开发效率)
下面将对gulp的安装和gulp的项目构建进行详细介绍:
1.全局安装 gulp-cli
gulp-cli是gulp的命令行工具,它需要全局安装,以便gulp能够在命令提示符中直接运行。gulp-cli是本地gulp的全局的入口,负责把所有参数转发到本地gulp,还有显示项目里安装的本地gulp的版本。全局gulp用于启动各个项目中的本地gulp,换句话说,如果在全局安装了gulp-cli,那么就可以在不同的项目中使用不同的gulp版本。
首先在终端通过npm工具下载gulp-cli
// -g全称为global表示全局安装 @2.3.0表示全局gulp-cli的版本
npm install gulp-cli@2.3.0 -g
// 查看gulp版本,查看是否安装成功
gulp -v
运行结果为:
CLI version: 2.3.0//表明安装成功
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
changed 267 packages in 5s
2.在项目中安装gulp
本地gulp位于本地项目的node_modules目录下,包含了gulpfile所需的所有函数和API。本地gulp作用:
加载和运行gulpfile(gulpfile.js)中的构建指令。
另一个是暴露API供gulpfile使用。
在终端进行局部安装gulp
// 初始化项目
npm init
// 局部安装gulp—--save-dev表示将gulp作为devDependencice(开发依赖)保存到package.json文件中
npm install gulp@4.0.2 --save-dev
// 查看gulp版本,查看是否安装成功
gulp -v
运行结果为:
Local version: 4.0.2//结果为下载的版本号,表明下载成功
3.构建项目
在项目根目录下建立gulpfile.js(不可更改)文件
重构项目的文件夹结构 src目录放置源代码文件 ,dist目录放置构建后文件
在gulpfile.js文件中编写任务.(gulp.task()建立任务…)
在命令行工具中执行gulp任务
如下图: