gulp工具的安装和使用解析

最新推荐文章于 2023-03-22 12:38:53 发布

苦逼大学牲￥

最新推荐文章于 2023-03-22 12:38:53 发布

阅读量235

点赞数

文章标签： gulp javascript 前端

本文链接：https://blog.csdn.net/m0_73929319/article/details/129652874

版权

本文详细介绍了如何安装和使用gulp，从全局安装gulp-cli，到项目中局部安装gulp，构建gulpfile.js，再到利用gulp插件进行HTML、CSS、JavaScript的压缩和转换任务，以及如何复制目录。通过实例演示了gulp在前端开发中的应用，包括gulp-htmlmin、gulp-file-include、gulp-less、gulp-sass、gulp-babel和gulp-uglify等插件的使用。

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

gulp是用JavaScript语言编写的运行在Node.js平台开发的前端构建工具

gulp可以处理日常工作流产生的任务，如：项目上线时对HTML,CSS,JavaScript文件合并，压缩，或将ES6语法转换为ES5语法以便代码在较旧的浏览器中运行

gulp通常包括以下内容

1.gulp-cli：启动构建工具的命令行窗口

2.本地gulp：构建时实际运行的程序

3.gulpfile.js：告诉gulp如何构建文件的指定命令

4.gulp插件：用于合并，压缩，修改文件的插件

1.全局安装gulp-cli

gulp-cli时gulp的命令行工具，需要全局安装

gulp-cli时本地gulp的全局入口，负责把所有参数转发到本地，以及显示项目安装的本地gulp版本

命令如下：

npm install gulp-cli@2.3.0 -g -g：让npm全局安装这个包

gulp -v 如果安装成功，则输出结构为版本号

npm install gulp-cli@2.3.0 -g

gulp -v

2.在项目中安装gulp

本地gulp的作用是加载和运行 gulpfile中的构建指令，另一个作用是暴露API供gulpfile使用

在目录下，打开终端，执行命令

（1）使用npm初始化项目，直接使用默认值，按 “Enter” 键即可

npm init

（2）局部安装gulp

npm install gulp@4.0.2 --save-dev

3.构建项目

（1）安装成功后，在项目根目录下建立gulpfile.js文件，注意这个文件名不可以更改

（2）重构项目结构，如图

src目录放置源代码文件

dist目录放置构建后文件

（3）在gulpfile.js文件中编写构建项目的任务

//  引用gulp模块
const gulp = require('gulp');
// 使用gulp.task()方法建立任务
gulp.task('first', callback => {
    console.log('第一个gulp任务执行了');
    // 使用gulp.src()获取要处理的文件
    gul