Gulp简介、gulp基本使用步骤、gulp-cli工具、gulpfile.js文件、gulp插件

Gulp介绍：

gulp概念：

基于node开发的前端构建工具模块，将前端机械化的操作编写成任务自动化操作，类似于webpack构建，可以完成代码压缩、语法转换、抽离公共文件、自动实现浏览器刷新等。

基本使用步骤：

1.使用npm install gulp下载gulp库文件。

2.在项目文件夹中新建gulpfile.js文件，注意文件名固定不变。

3.重构项目文件夹目录结构：新建src文件夹（存放项目源代码）、新建dist文件夹（存放处理后的代码）。

4.在gulpfile.js文件中编写任务，类似于webpack.config.js文件，但是语法完全不同。

5.在命令行执行gulp任务（gulp 任务名）;如果想要执行一次任务实现多个任务被执行，就得构建多任务执行任务，具体只需将task方法中第二个参数callback换成数组，数组中传入任务名字符即可。（当任务名为defalut时，命令行中执行命令是可以省略任务名）

gulp-cli工具：

gulp-cli类似webpack-cli，需要全局安装此工具，后面可以方便使用gulp,全局安装：npm install gulp-cli -g;

编写gulpfile.js文件：

gulp提供了基本的几种方法用于编写任务，如：

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

gulp.dest()输出文件

gulp.task()建立gulp任务

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

gulp插件（很多，下面只是举例）：

gulp-htmlmin ,压缩html文件的插件

gulp-csso ,压缩css文件的插件

gulp-babel ,js语法转换的插件

gulp-less ,less语法转化的插件

gulp-file-include ,共文件包含插件

gulp-ugligy ,压缩混淆js插件

browsersync ,浏览器同步更新插件

插件使用：

1.npm install 插件名

2.在gulpfile.js文件中引入此插件

3.调用此插件

 // 1.引入gulp：const gulp = require('gulp');const htmlmin =require('gulp-htmlmin');// 2.使用task('任务名'，callback)方法创建任务：gulp.task('myhtmlmin',()=>{// 3.编写任务：实现代码合并压缩等（需要注意的是：gulp是轻量级的模块，如果想要实现具体的功能还得使用插件）gulp.src('./src/*.html')//回调函数中可以使用gulp的方法，src用于获取要处理的文件.pipe(htmlmin({collapseWhitespace:true}))//pipe处理文件，里面可传入插件方法或gulp本身方法.pipe(gulp.dest('dist')//pipe处理后的文件输出到dist文件下});

Gulp简介、gulp基本使用步骤、gulp-cli工具、gulpfile.js文件、gulp插件相关推荐

如何在修改 gulpfile.js 文件后自动重启 gulp?
gulp 非常好用,编写好 gulpfile.js 文件后,一般情况下在命令行用 gulp 就能启动开发环境,大大简化了开发流程.但是有一个问题没有解决,就是编写 gulpfile.js 文件过程中, ...
在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建
摘要: 在Maven+Spring项目中使用Node.js的Gulp进行前端自动化构建刚开始打算进行前后端分离开发,后来发现在使用JSP或者Freemarker做动态页面时,想发挥这些自动化构建工具 ...
gulp 压缩html文件,gulp压缩js
请务必理解如下章节后阅读此章节: 压缩 js 代码可降低 js 文件大小,提高页面打开速度.在不利用 gulp 时我们需要通过各种工具手动完成压缩工作. 所有的 gulp 代码编写都可以看做是将规律转 ...
前端自动化构建-为什么使用前端自动化构建以及gulp简介
前端自动化构建-为什么使用前端自动化构建以及gulp简介一开始接触到这个东西,真的是不知道是什么样的一个概念,所以也在网上看了一一些资料,理解一下. 1. 前端开发存在的问题开发慢 (1) 项目架 ...
gulp压缩整合css和js文件
gulp压缩整合css和js文件原创 dadaDaShiXiong 最后发布于2018-09-18 14:28:38 阅读数 1164 收藏发布于2018-09-18 14:28:38 版权声明: ...
前端构建工具大盘点：gulp、webpack、vite、rollup、esbuild、snowpack、babel、parcel、swc、tsc
文章目录背景分类转译器打包器对比 gulp VS webpack Bundle vs Bundleless(代表就是webpack VS vite) 其他比较个人理解总结官网背景做前 ...
DL之LSTM：LSTM算法论文简介(原理、关键步骤、RNN/LSTM/GRU比较、单层和多层的LSTM)、案例应用之详细攻略
DL之LSTM:LSTM算法论文简介(原理.关键步骤.RNN/LSTM/GRU比较.单层和多层的LSTM).案例应用之详细攻略目录 LSTM算法简介 1.LSTM算法论文 1.1.LSTM算法相关论 ...
QuantitativeFinance：量化金融之金融时间序列分析之ES/ETS/GARCH模型的简介、Box-Jenkins方法-AR/MA/ARMA/ARIMA模型的简介及其建模四大步骤之详细攻略
QuantitativeFinance:量化金融之金融时间序列分析之ES/ETS/GARCH模型的简介.Box-Jenkins方法-AR/MA/ARMA/ARIMA模型的简介及其建模四大步骤之详细攻略 ...
精选文章：发明专利/实用新型专利、软著申请的简介、方法、步骤之最强攻略
精选文章:发明专利/实用新型专利.软著申请的简介.方法.步骤之最强攻略目录软著申请介绍专利申请介绍 1.中国专利申请原则 2.申请前查询

Gulp简介、gulp基本使用步骤、gulp-cli工具、gulpfile.js文件、gulp插件

Gulp简介、gulp基本使用步骤、gulp-cli工具、gulpfile.js文件、gulp插件相关推荐

最新文章

热门文章