带你一篇文章学会gulp

最新推荐文章于 2024-07-13 05:22:31 发布

婷婷T

最新推荐文章于 2024-07-13 05:22:31 发布

阅读量405

点赞数

分类专栏：前端打包工具文章标签： gulp插件 gulp API gulp的使用 gulp的安装压缩文件

本文链接：https://blog.csdn.net/qq_41629684/article/details/118024777

版权

前端打包工具专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、gulp是什么？

前端自动化打包构建工具；

打包：把文件压缩，整合，移动，混淆

基于流的打包构建工具；

webpack:基于js文件的打包构建工具

全局依赖环境 gulp 一台电脑安装一次，以后使用就可以了，在命令行提供gulp xxx得能令

npm install --global gulp

项目依赖第三方 gulp

每一个项目都要安装一次，

作为第三方包出现，再导入以后，可以使用gulp.xxx()等方法

切换到项目命令，输入指令npm install gulp

二、什么是流？

流文件：一种文件传输的格式，比如视频；一段一段的文件传输；

流格式：从头到尾大的一个过程，就像我们的生产线一样；需要从源开始，一步一步经过加工，每一个步骤需要依赖上一步的结果，最终给出一个完整的成品。gulp是基于流格式的一种打包构建工具。

三、gulp的依赖于node环境进行开发，底层封装的内容就是node里面的读写文件

四、gulp的作用

对于css文件：压缩，转码（自动添加前缀）
对于js文件：压缩，转码（ES6转ES5）
对于html文件：：压缩，转码（对格式的转换）
对于静态资源文件的处理
对于第三方文件的处理

五、gulp的安装

1.是一个JAVAScrpit相关的工具，就可以直接使用npm进行安装，需要安装在电脑里面，一次安装，多次使用。打开命令行，输入指令

npm install --global gulp

2.gulp的检测

打开命令行，输入指令

gulp --version

3.gulp的卸载

npm uninstall --global gulp

4.gulp全局工具安装完毕

给电脑提供一个启动gulp的环境，可以在cmd里面运行gulp xxx的指令

六、gulp的版本

1.gulp@3

安装成功检测版本号，gulp 3.9.1

2.gulp@4

安装成功检测版本号,gulp cli 2.3.0

七、准备使用Gulp

1.准备一个项目，确定自己的目录结构

源码和打包以后的内容：

pages/index.html 开发源码

打包完毕文件放哪？不改变原文件的基础

同级目录下，再次新建一个Pages的文件夹？不能创建同名文件夹；

同级目录下，创建一个叫做views的文件夹?如果更换文件名称，引入路径会有问题的。

创建一个叫做src的目录（表示源码）
创建一个叫做dist的目录（存放打包后的结果文件），不需要我们自己创建，gulp会帮我们自己创建
不一定叫src,dist,但是开发习惯，大家都这么使用

2.准备一个gulpfile.js的文件

必须有
gulp进行打包的依据
每一个项目需要一个gulpfile.js
我们在这个文件里面进行本项目的打包配置
gulp再运行的时候，会自动读取gulpfile.js文件里面的配置，进行打包工作
***直接写在项目根目录，和src同级

3.在项目里面再次安装gulp

项目里面的gulp是以第三方模块的形式出现的
专门给你提供配置打包流程的API的
每一个项目都得安装一次

4.在gulpfile.js里面书写配置文件

书写该项目的打包流程
书写完毕以后，按照打包流程去执行gulp指令运行gulpfile.js文件
书写gulpfile.js按照node的模块化语法进行书写(CommonJS)

八、关于package.json

输入命令npm init生成的一个文件

记录项目信息和第三方依赖

dependencies

表示的是项目依赖，比如jjquery,swiper,指项目运行和上线都需要用到的内容

devDependencies

表示的是项目的开发依赖，比如gulp,指项目开发阶段需要用到的内容，上线以后不需要用到的内容 npm install --dev 包名，就会把文件记录在开发依赖

九、gulp常用的API

1.gulp.task()

语法：gulp.task(任务名称，任务处理函数)

作用：创建一个基于流的任务

例子：gulp.task('htmlHandler',function(){

//找到源文件，进行压缩，打包，放入指定目录

})

2.gulp.src()

语法：gulp.src(路径信息)

作用：找到源文件

书写方式：

gulp.src('./a/b.html') 找到指定一个文件

gulp.src('./a/*.html') 找到指定目录下，指定后缀的文件

gulp.src('./a/**') 找到指定目录下的所有文件

gulp.src('./a/**/*') 找到指定目录下所有子目录里面的所有文件

gulp.src('./a/**/*.html') 找到指定目录下所有子目录里面的所有HTML文件

3.gulp.dest()

语法：gulp.dest(路径信息)

作用：把一个内容放入指定目录内

例子：gulp.dest('./abc') 把他接收到的内容放到abc目录下

4.gulp.watch()

语法：gulp.watch(路径信息，任务名称)

作用：监控指定目录下的文件，一大发生变化，重新执行后面的任务

例子：gulp.watch('./src/pages/*.html',htmlHandler)

当指定目录下的html文件发生变化，就会执行htmlHandler这个任务

5.gulp.series()

语法：gulp.series(任务1，任务2，任务3，......)

作用：逐个执行多个任务，前一个任务结束，第二个任务开始

6.gulp.parallel()

语法：gulp.parallel(任务1，任务2，任务3，......)

作用：并行开始多个任务

7.gulp.pipe()

管道函数

所有的gulp API都是基于流

接收当前流，进入下一个流过程的管道函数

例子：

gulp.src().pipe(压缩任务).pipe(转码).pipe(gulp.dest('abc'))

十、gulp常用的插件

gulp的各种插件就是用来执行各种各样的压缩混淆转码任务的

1.gulp-cssmin 压缩css文件

下载：npm i gulp-cssmin -D

使用：pipe(cssmin());

2.gulp-uglify 压缩js文件

写es6语法会报错

下载：npm i gulp-uglify -D

使用:pipe(uglify())

3.gulp-babel es6转es5

gulp-babel的版本

gulp-babel@7：大部分使用在gulp@3里面

gulp-babel@8：大部分使用在gulp@4里面

需要下载另外两个包：@babel/core、@babel-perset-dev

下载：npm i gulp-cssmin -D

4.gulp-htmlmin 压缩HTML

下载 :npm i -D gulp-htmlmin

导入：const htmlmin=require('gulp-htmlmin');

需要传参

5.gulp-imagemin 压缩图片

使用:pipe(imagemin())

下载特别慢，很难下载成功，一般不压缩

6.del 删除文件目录

下载：npm i -D del

作用：删除文件目录

导入：const del=require('del')

导入以后得到一个函数，直接传递参数就可以了

使用：del([''])以数组形式传递要删除的文件夹

十一、压缩文件例子

1.压缩css


const cssmin=require('gulp-cssmin')
//1.创建一个打包css的任务
//gulp@3的标准书写语法

gulp.task('cssHandler',function() {
   return gulp
        .src('./src/css/!*.css')    //找到源文件
        .pipe(cssmin())  //压缩文件
        .pipe(gulp.dest('./dist/css/'))

    //如果没有结束，第二个任务没有办法开始，所有要用return
})

//gulp@4的书写语法,需要把这个函数名导出
const cssHandler=function (){
    return gulp
        .src('./src/css/*.css')    //找到源文件
        .pipe(cssmin())  //压缩文件
        .pipe(gulp.dest('./dist/css/'))
}
modules.exports.cssHandler=cssHandler  //导出这个任务

2.压缩js文件

const uglify=require('gulp-uglify')
gulp.task('jsHandler',function() {
    return gulp
        .src('./src/js/!*.js')    //找到源文件
        .pipe(uglify())  //压缩文件
        .pipe(gulp.dest('./dist/js/'))
    //如果没有结束，第二个任务没有办法开始，所有要用return
})

3.压缩html

const htmlmin=require('gulp-htmlmin');

gulp.task('htmlHandler',function() {
    return gulp
        .src('./src/pages/*.html')    //找到源文件
        .pipe(htmlmin({   //通过配置的参数来进行压缩
           collapseWhitespace:true,
            removeEmptyAttributes: true 
        }))  //压缩文件
        .pipe(gulp.dest('./dist/pages/'))
    //如果没有结束，第二个任务没有办法开始，所有要用return
})