gulp的入门学习

最新推荐文章于 2024-04-14 09:46:13 发布
最新推荐文章于 2024-04-14 09:46:13 发布
阅读量514 收藏 1
点赞数
分类专栏： gulp 文章标签： gulp 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jason_yuxuan/article/details/127932950
版权

1.gulp是什么？

gulp是用自动化构建工具增强你的工作流程，gulp 将开发流程中让人痛苦或耗时的任务自动化，从而减少你所浪费的时间、创造更大价值。 gulp有如下几个特点：任务化，基于流，I/O 输入与输出，异步任务和同步任务

gulp有自己的内存，当你用gulp构建项目时；首先gulp会先读取文件到gulp的内存，然后接下来所有的操作都是在gulp的内存中操作的；比如你要合并文件，压缩文件…,等你操作完再从gulp的内存中输出； 输入流：就是读取文件到gulp内存 输出流：就是在gulp的内存中操作完后，将文件从gulp内存中输出

gulp能自动化的完成js/less/css/html/image等文件的合并，压缩，检查，监听文件变化，浏览器的自动刷新，测试等任务 gulp更高效的异步多任务，更易于使用，插件高质量

2.接下来我们使用gulp来构建项目

1.创建项目目录
新建gulp-study文件夹，用vscode打开，然后在终端执行npm init -y,生成项目的配置文件package.json；然后再新建如下文件目录：
在这里插入图片描述
2.安装gulp，需要注意的一点是：必须全部安装gulp,不然执行命令会找不到gulp
全局安装 npm i gulp -g
项目本地安装 npm i gulp -D(–save-dev) 开发依赖

3.常用到的插件以及重要的API
相关插件：
gulp-concat:合并文件(js/css)
gulp-uglify:压缩js文件
gulp-rename:文件重命名
gulp-less：编译less
gulp-clean-css:压缩css
gulp-livereload:实时自动编译刷新
重要API：
gulp.src():指向源文件的目录路径，用于读取文件
gulp.dest():指向指定的文件夹，用于向文件夹中输出文件
gulp.task():定义一个任务
gulp.watch():监视文件的变化

3.配置gulp的配置文件 gulpfile.js

//引入gulp
const gulp=require('gulp')

//注册任务
gulp.task('任务名',function(){
    //具体的操作
})

//注册默认任务
gulp.task('default',['任务名'])  //异步执行或者是同步任务

4.注册合并js并压缩
在src目录下js的文件夹中新建test1.js,test2.js;代码如下：

src/js/test1.js
//立即执行函数
(function(){
    function add(num1,num2){
        return num1+num2
    }
    console.log(add(12,13))
})()

src/js/test2.js
const test2=function(){
    const arr=[1,2,3,4].map(item=>item*3)
    console.log(arr);
}
test2()

gulpfile.js中配置代码如下： 需要安装插件如下：

 npm i gulp-concat gulp-rename gulp-uglify -D

//注册合并并压缩js任务
//引入gulp
const gulp=require('gulp')
//引入插件
const concat=require('gulp-concat')   //合并文件的
const rename=require('gulp-rename')   //重新命名的
const uglify=require('gulp-uglify')   //压缩js

// gulp 3中的写法中是不需要  gulp.series的
// gulp.task('js',function(){
//     return gulp.src('src/**/*.js')  //寻找目标源文件，并且将文件保存到gulp内存中
//              .pipe(concat('build.js'))   //临时合并文件  可以传入一个参数表示合并的文件名
//              .pipe(gulp.dest('dist/js'))   //输出文件到本地
// })
//gulp 4的写法
gulp.task('js',gulp.series(()=>{
     return  gulp.src('src/**/*.js')  //寻找目标源文件，并且将文件保存到gulp内存中
            .pipe(concat('build.js'))   //临时合并文件  可以传入一个参数表示合并的文件名
            .pipe(gulp.dest('dist/js'))   //输出文件到本地
            .pipe(uglify())     //压缩js代码
             // .pipe(rename('build.main.js'))   //重新命名输出的文件名
            .pipe(rename({suffix:".main"}))   //重新命名输出的文件名,对象的写法
            .pipe(gulp.dest('dist/js'))   //再次输出文件   只要是操作了文件，必须要输出不然是看不到文件的
}))

终端执行gulp.js命令，可以看到dist目录生成了build.js与build.main.js两个文件。一个是压缩的，一个是没有压缩的

//build.js的代码
//立即执行函数
(function(){
    function add(num1,num2){
        return num1+num2
    }
    console.log(add(12,13));
})()
const test2=function(){
    const arr=[1,2,3,4].map(item=>item*3)
    console.log(arr);
}
test2()

//build.main.js的代码：
console.log(25);const test2=function(){var o=[1,2,3,4].map(o=>3*o);console.log(o)};test2();

我们上面看到用到了gulp.series(),这是gulp4 新增的用来处理任务的执行顺序，还有一个是gulp.parallel()
两者的区别是是：

gulp.series 用于串行（顺序）执行
gulp.parallel 用于并行执行
上面的两个函数接受两个参数：
要执行的任务的名字
需要执行的函数
如果你想并行执行scripts和styles，你可以这么写：
gulp.task('default', gulp.parallel('scripts', 'styles'));

5.合并压缩css文件
在css文件夹下新建test1.css与test2.css文件，在less文件夹下新建test.less，代码如下：

src/css/test1.css
#box1{
    width:100px;
    height:100px;
    background-color:blue;
}

src/css/test2.css
#box2{
    width:100px;
    height:100px;
    background-color: aqua;
}

src/less/test.less
@btncolor:green;
.btn{color:@btncolor}

需要安装的插件是：

 npm i gulp-less gulp-clean-css -D

首先是注册转化less为css的任务

//引入插件
const less=require('gulp-less')
//首先是注册转化less的任务
gulp.task('less',gulp.series(()=>{
    return gulp.src('src/less/*.less')   //获取到源文件
             .pipe(less())  //编译less文件为css文件
             .pipe(gulp.dest('src/css'))   //输出的目录
}))

在css文件下会生成一个test.css文件代码如下：

src/css/test.css
.btn {
  color: green;
}

然后是合并压缩css的配置

//引入插件
const cleanCss=require('gulp-clean-css')
// 合并压缩css
gulp.task('css',gulp.series(()=>{
    return gulp.src('src/css/*.css')  //获取源文件，保存到gulp内存中
             .pipe(concat('build.css'))   //合并文件为build.css
             .pipe(rename({suffix:'.main'}))  //重新命名文件
             .pipe(cleanCss())   //压缩css代码
             .pipe(gulp.dest('dist/css'))   //输出的文件的目录
}))

我们可以看到在dist文件夹下的css文件夹下生成了build.main.css文件，代码如下：

 //dist/css/build.main.css
 
.btn{color:green}#box1{width:100px;height:100px;background-color:#00f}#box2{width:100px;height:100px;background-color:#0ff}

6.默认任务的提交

//引入gulp
const gulp=require('gulp')
//引入插件
const concat=require('gulp-concat')
const rename=require('gulp-rename')
const uglify=require('gulp-uglify')
const less=require('gulp-less')
const cleanCss=require('gulp-clean-css')

 //js任务
gulp.task('js',gulp.series(()=>{
     return  gulp.src('src/**/*.js')  //寻找目标源文件，并且将文件保存到gulp内存中
            .pipe(concat('build.js'))   //临时合并文件  可以传入一个参数表示合并的文件名
            .pipe(gulp.dest('dist/js'))   //输出文件到本地
            .pipe(uglify())     //压缩js代码
            // .pipe(rename('build.main.js'))   //重新命名输出的文件名
            .pipe(rename({suffix:".main"}))   //重新命名输出的文件名,对象的写法
            .pipe(gulp.dest('dist/js'))   //再次输出文件   只要是操作了文件，必须要输出不然是看不到文件的
}))



//首先是注册转化less的任务
gulp.task('less',gulp.series(()=>{
    return gulp.src('src/less/*.less')   //获取到源文件
             .pipe(less())  //编译less文件为css文件
             .pipe(gulp.dest('src/css'))   //输出的目录
}))

// 合并压缩css
gulp.task('css',gulp.series(()=>{
    return gulp.src('src/css/*.css')
             .pipe(concat('build.css'))
             .pipe(rename({suffix:'.main'}))
             .pipe(cleanCss())
             .pipe(gulp.dest('dist/css'))
}))

//注册默认任务
gulp.task('default',gulp.series('js','less','css'))  //顺序执行，同步执行

终端执行gulp命令就会执行default默认任务的；可以看下终端的命令输出，按照顺序执行的任务，上一个任务执行完才会执行下一个任务的
在这里插入图片描述
那么我们用gulp.parallel来实现并行执行呢？修改注册默认任务的代码

//注册默认任务
gulp.task('default',gulp.parallel('js','less','css'))  //异步执行

可以看到任务同时执行，这种适合各个任务之间没有互相依赖的情况，可以异步执行，提高效率；但是如果有相互依赖的任务就要同步执行，例如：less任务必须在css任务前面执行，不然最后合并生成的css文件是不完整的。
在这里插入图片描述
我们还可以多次使用来控制任务的执行顺序，请看如下代码：

//注册默认任务
gulp.task('default',gulp.parallel('js',gulp.series('less','css')))  //整体异步执行，部分同步

在这里插入图片描述
7.处理压缩html文件

安装插件  npm i gulp-htmlmin -D

html感觉压缩不压缩问题不大，因为html文件本身就不会太大的

//引入插件
const htmlmin=require('gulp-htmlmin')
//注册并压缩html文件任务
gulp.task('html',gulp.series(()=>{
    return gulp.src('./index.html')
              .pipe(htmlmin({collapseWhitespace:true}))  //销毁空格
              .pipe(gulp.dest('dist'))
}))

8.自动构建项目 gulp-livereload插件的使用

 安装  npm i gulp-livereload -D

//引入插件 
const livereload=require('gulp-livereload')

//js任务
gulp.task('js',gulp.series(()=>{
     return  gulp.src('src/**/*.js')  //寻找目标源文件，并且将文件保存到gulp内存中
            .pipe(concat('build.js'))   //临时合并文件  可以传入一个参数表示合并的文件名
            .pipe(gulp.dest('dist/js'))   //输出文件到本地
            .pipe(uglify())     //压缩js代码
            // .pipe(rename('build.main.js'))   //重新命名输出的文件名
            .pipe(rename({suffix:".main"}))   //重新命名输出的文件名,对象的写法
            .pipe(gulp.dest('dist/js'))   //再次输出文件   只要是操作了文件，必须要输出不然是看不到文件的
            .pipe(livereload())    //还要加上这个自动编译的方法，实时刷新，在每个任务下加上这个
}))
//注册监视任务来监视文件的变化
gulp.task('watch',function(){
    //开启监听
    livereload.listen()
    //确认监听目标以及相应的绑定任务
    gulp.watch('src/js/*.js',gulp.series('js'))
    gulp.watch(['src/css/*.css','src/less/*.less'],gulp.series('css'))
})

指向gulp watch命令：然后修改css文件中的一个背景颜色，可以看到已经监听文件成功

在这里插入图片描述

9.热更新实时刷新的实现 gulp-connect

安装  npm i gulp-connect -D

gulp-connect内置了一个微型服务器，能够读取我们gulpfile.js配置文件中的所有配置

//引入插件
const connect=require('gulp-connect')
//js任务
gulp.task('js',gulp.series(()=>{
     return  gulp.src('src/**/*.js')  //寻找目标源文件，并且将文件保存到gulp内存中
            .pipe(concat('build.js'))   //临时合并文件  可以传入一个参数表示合并的文件名
            .pipe(gulp.dest('dist/js'))   //输出文件到本地
            .pipe(uglify())     //压缩js代码
            // .pipe(rename('build.main.js'))   //重新命名输出的文件名
            .pipe(rename({suffix:".main"}))   //重新命名输出的文件名,对象的写法
            .pipe(gulp.dest('dist/js'))   //再次输出文件   只要是操作了文件，必须要输出不然是看不到文件的
            .pipe(livereload())    //还要加上这个自动编译的方法，实时刷新
            .pipe(connect.reload());  //和上面那个配置是一样的，实时刷新
}))
//注册热更新启动任务
gulp.task('connect', function() {
    //配置服务器的选项
    connect.server({
        root:'dist/',
        livereload:true, //实时刷新
        port:8000  //启动端口号
    });
    gulp.watch('src/js/*.js',gulp.series('js'))
    gulp.watch(['src/css/*.css','src/less/*.less'],gulp.series('css'))
});

执行gulp connect命令

在这里插入图片描述
加油学习前端每一天！！！

Coco涛涛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Gulp:使用Gulp学习基础知识和自动化
05-01
古尔普 使用Gulp.js框架学习流和自动化的基础知识 安装 在系统CLI中执行以下命令 npm install -g gulp npm install --save gulp 用法 在gulpfile目录中执行这些命令 # Executing '<task>' gulp < task> # Will execute task 'default' gulp 更改文件 gulpfile.js 要求 任务“第二”等待任务“第一”完成启动 任务默认值将按照“第二，第三”的顺序启动任务
gulp学习
weixin_46727994的博客
06-15 84
任务化 基于流 gulpfile.js var gulp=require('gulp') // 注册任务 gulp.task('test_name',function(){ }) // 注册默认任务 gulp.task('default',['teat_name']) gulp执行错误ReferenceError: primordials is not defined 查明原因 gulp3.9.1版本低了，node 12.18.3版本高了 npm unstall gulp npm install
推荐开源项目：`gulp-watch` - 实时监控并自动化构建你的项目
最新发布
gitblog_00090的博客
04-14 286
推荐开源项目：gulp-watch - 实时监控并自动化构建你的项目 项目地址:https://gitcode.com/floatdrop/gulp-watch 在前端开发中，实时编译和自动刷新是提高效率的关键工具之一。今天，我要向大家推荐一个非常实用的Gulp插件——gulp-watch，它能够帮助开发者有效地监听文件变化，并触发自定义的任务，让开发流程更为顺畅。 项目简介 gulp-watch...
认识gulp —— 这样学习
qq_46509219的博客
08-24 222
文章标题前言一、gulp的基本方法gulp.task()语法规范：展示：代码：执行命令:二、gulp的html任务下载html任务插件：展示：代码：执行命令：三、gulp的css任务下载css任务插件：展示：代码：执行命令：四、gulp的javascript任务下载js任务插件：展示：代码：写在最后 前言 gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大
gulp构建项目（三）：gulp-watch监听文件改变、新增、删除
热门推荐
猿始森林
12-01 1万+
一、gulp.watch()功能介绍 举例说明：当’./src/*.html’发生变化时，执行’html’任务，同时刷新浏览器。如下： gulp.task('watch', function(){ gulp.watch('./src/*.html', ['html']).on('change', browserSync.reload); }); 二、gulp....
6.gulp.watch()
AndrewNeo
06-09 603
gulp.watch()用来监视文件的变换，当文件发生变化后，我们可以利用它来执行相应的任务，例如文件压缩等。其语法为： gulp.watch(glob[,opts],tasks); glob为要监视的文件匹配模式，规则和用法与gulp.src()方法中的glob相同 opts为一个可选的配置对象，通常不需要用到。 tasks为文件变化后要执行的任务，为一个数组。 var gulp = require('gulp'); gulp.task('uglify',()=>{ //do somethi
Gulp的使用
2301_76702774的博客
03-18 1853
gulp是一个，主要用来设定程序的工作。简单的说，gulp就是用来的，可以将指定的文件按照设定好的打包压缩规范，压缩之后存储到指定的文件夹位置。之前gulp程序有自己的运行环境，现在gulp程序可以在node.js中运行。
gulp入门学习
08-10
在前端开发中，用自动化构建工具构建项目框架是必不可少的
gulp:gulp详细入门教程
04-29
在学习前，先谈谈大致使用gulp的步骤，给读者以初步的认识。首先当然是安装nodejs，通过nodejs的npm全局安装和项目安装gulp，其次在项目里安装所需要的gulp插件，然后新建gulp的配置文件gulpfile.js并写好配置信息...
gulp打包项目案例代码
02-21
此项目为一个简单的gulp打包项目，可供刚入门同学学习使用。使用到了nodejs、sass、gulp等基础知识，
EsLint入门学习教程
08-31
ESLint是一个代码规范和错误检查工具，下面这篇文章主要介绍了EsLint的相关资料，需要的朋友可以参考学习，下面来一起看看吧。
快速掌握Gulp自动化构建工具
老司机的后备箱
09-15 769
Gulp是一个自动化构建工具，类似Webpack，目的是把开发环境的代码转换为生产环境的代码，比如ES6转ES5、Saas转CSS、文件压缩等。Gulp的整体设计思路是通过文件读写和一系列Stream插件实现文件内容处理，完成构建工作。完整的构建工作可以拆分为多个构建步骤，每一个构建步骤称之为任务，一个大型的项目构建由多个任务组合完成。
解决 gulp 在 vscode 内无法使用的问题
qq_41807848的博客
03-24 1981
C:\Users\86182\AppData\Roaming\npm\gulp.ps1,因为在此系统上禁止运行脚本
gulp打包（含第三方模块下载教学）
qq_45799465的博客
02-26 4034
目录 一、创建项目文件夹 二、项目文件夹初始化 三、 依赖包的下载 3.1 事前准备 3.2全局依赖包的下载 3.2.1 下载gulp全局依赖包 3.2.2 下载全局 node-sass依赖包 3.3 开发依赖包的下载 3.3.1 下载gulp开发依赖包 3.3.2 css文件打包压缩依赖包 3.3.3JavaScript文件 打包压缩需要的依赖包 3 3.3.4html文件打包压缩需要的依赖包 3.3.5sass文件 打包压缩需要的依赖包 ...
Gulp工具的安装及使用
jhhjjhl的博客
03-22 577
gulp新手入门安装及使用
gulp的安装和使用
qq_68854304的博客
03-18 139
gulp常用
Gulp-Watch
xiaye_go的博客
07-27 321
一.3.0和4.0的用法 3.0 gulp.watch('path',['task']); 4.0 gulp.watch('path',gulp.series('task')); 二.只触发一次解决方案 使用gulp.watch();只触发一次 gulp.task('watch',function(){ //监听文件修改，当文件被修改则执行 队列中的任务 watch('./mysrc/**/*.js',watchTasks); }); 使用gulp-watch插件可以多次监听 .
java前端学习路线
09-29
5. 学习前端工具：了解和使用一些前端开发工具（如Webpack、Gulp等）可以帮助你更好地进行代码管理和项目构建。 6. 学习前端性能优化：学习如何优化前端代码和网页性能，使你的网页更快加载和响应。 这些都是学习...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值