Gulp的安装以及使用

Lee（小白打怪）

已于 2023-03-21 10:23:33 修改

阅读量1.4k

点赞数

文章标签： gulp 前端 javascript Powered by 金山文档

于 2023-03-20 23:54:15 首次发布

本文链接：https://blog.csdn.net/Lee_Morphine/article/details/129650675

版权

本文详细介绍了如何安装和使用Gulp，包括全局安装gulp-cli、项目中安装gulp、构建项目、压缩HTML、抽离公共代码、转换并压缩CSS（Less到CSS）、转换ES6语法、复制目录以及执行全部构建任务。通过实例演示了如何利用gulp-htmlmin、gulp-file-include、gulp-less、gulp-csso、gulp-babel和gulp-uglify等插件进行自动化构建，提升开发效率。

摘要由CSDN通过智能技术生成

写在前面：如果大家在运行命令时有报错，可以看看我写的这篇文章：https://blog.csdn.net/Lee_Morphine/article/details/129679391，希望能帮助到大家。

什么是gulp

基本介绍：第三方模块 Gulp 是基于node平台开发的前端构建工具。 gulp是一个JavaScript程序，并且它的指令使用的也是JavaScript语言，所以gulp通常是前端开发人员自动化处理日常任务的首选工具

任务（作用）： 1.项目上线时对HTML、CSS、JavaScript文件合并、压缩。 2.将ES6语法转换为ES5语法以便代码在较旧的浏览器中运行。 gulp允许开发者将机械化的操作编写成任务，在命令行输入相关的任务名称就能执行机械化操作，从而提高开发效率。(用机器代替手工，提高开发效率)

提供方法

gulp.src()：获取任务要处理的文件

gulp.dest()：输出文件

gulp.task()：建立gulp任务

gulp.watch()：监控文件的变化

安装第三方模块gulp

3.1 全局安装gulp-cli

什么是全局安装：全局安装指的是将模块安装到一个公共的目录中，所有的项目都可以使用这个模块。

gulp-cli是gulp的命令行工具，它需要全局安装，以便gulp能够在命令提示符中直接运行。gulp-cli是本地 gulp的全局入口，负责把所有参数转发到本地gulp，以及显示项目里安装的本地gulp的版本。

全局gulp用于启动各个项目中的本地gulp，换句话说，如果在全局安装了gulp-cli，那么就可以在不同的项目中使用不同的gulp版本。

安装gulp-cli：

// -g参数全称为global，作用是让npm全局安装这个包  @2.3.0表示全局gulp-cli的版本
npm install gulp-cli@2.3.0 -g

//运行“gulp -v”命令，若安装成功则输出结果如下图

3.2 在项目中安装gulp

什么是本地安装：本地安装指的是将模块下载到当前的项目当中，仅供当前项目使用。

本地gulp位于本地项目的node_modules目录下，包含了gulpfile所需的所有函数和API。本地gulp作用：

加载和运行gulpfile（gulpfile.js）中的构建指令。

另一个是暴露API供gulpfile使用。

安装：

在全局安装时的目录下创建一个文件作为项目根目录。就比如写者我是在“D:\Node.Js框架技术\学习\第二章 Node.js基础\code\Node.js-2\第三方模块“进行全局安装，所以我在第三方模块目录下创建gulp使用文件作为项目根目录

// 初始化项目
npm init
// 局部安装gulp—--save-dev表示将gulp作为devDependencice（开发依赖）保存到package.json文件中
npm install gulp@4.0.2 --save-dev
// 查看gulp版本，查看是否安装成功
gulp -v