Gulp和webpack的区别

UndefineOrNull

2019-07-01

关注关注

背景：今天了解了大厂前端任职的一些要求：里面写了要熟悉webpack打包工具和Gulp构建工具，作为前端新人，看到这个就想这两种工具有什么区别？
在这里解答一下自已，而且希望可以帮助到有疑问的人.

Gulp构建工具

gulp是工具链，构建工具，可以配合各种插件做JS压缩，CSS压缩，less编译替代手动实现自动化工作.
所以它的主要作用是
1.构建工具
2.自动化
3.提高效率

Webpack打包工具

web是文件打包工具，可以把项目的各种js文件，css文件等打包合成一个或多个文件，主要用于模块化方案，预编译模块的方案
所以它的主要作用是
1.打包工具
2.模块化识别
3.编译模块代码方案

Gulp和webpack的区别

当然也会有部分相似的功能，比如合并，区分.

gulp webpack

UndefineOrNull

0 关注 0 粉丝 0 动态

关注关注

gulp 构建 demo

var cleanCss = require; // 压缩 css. var livereload = require;//自动编译。gulp.task("server", [‘default‘],function(){//配置热更新服

星辰的笔记 2020-07-04

第三方模块Gulp

gulpfile.js文件的名字是gulp要求的，不能随意更改③ 重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件④ 在gulpfile.js文件中编写任务⑤ 在命令行工具中执行gulp任务。gulp属于轻内核的第三方模块，提供的方法

liangjielaoshi 2020-06-11

gulp js文件压缩 es6 代码转换

// 暂时用下面这个 npm install gulp-babel @babel/core @babel/preset-env. gulp jsmin-------------------------------------- // 代码压缩npm ins

zhongweinan 2020-06-10

gulp基本使用

下面会说几个常见的gulp模块,列举功能和例子,希望你看完本章后能对gulp有个基本的掌握,能参照这里的写法,当需要使用时去官网上会自主查询。　　接受n个参数,每个参数是函数,会依次执行这些函数.　　创建一个用于将文件对象写入到文件系统的流。结合上面的AP

jiangfulai 2020-04-18

191.gulp处理JavaScript文件的任务

处理js文件的主要操作是，将js文件进行丑化，需要使用到一个插件为gulp-uglify，同样,是需要在cmd窗口执行npm install gulp-uglify --save-dev;示例代码如下：。//设置toplevel为true，就会处理顶级ja

UndefineOrNull 2020-02-29

192.gulp-concat插件合并多个文件

因为在网页的开发中，为了加快网页渲染的速度，如果我们的js文件比较多的话，就可以使用gulp-concat插件，将多个js文件合并成一个文件，该插件的安装同样是在终端窗口执行命令：npm install gulp-concat --save-dev.//压

我有一只小松鼠 2020-02-29

187.gulp介绍和安装

使用gulp自动化开发流程，配置好gulp后，可以自动给我们处理好一些工作，比如写完css后，要压缩成.min.css,写完js后，要进行相关的图片压缩等，这些工作都可以让gulp帮我们完成。gulp的安装非常简单，只要使用npm命令安装即可，但是因为gu

UndefineOrNull 2020-03-01

gulp

gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。项目构建是指项目上线之前对项目源代

hlihaihong 2020-02-18

gulp系列之快速入门篇

如果您以前已经全局安装了gulp，npm rm --global gulp请先按照以下说明运行。有关更多信息，请阅读此Sip。这将指导您为项目命名，版本，说明等。确保输出与下面的屏幕截图匹配，否则您可能需要重新启动本指南中的步骤。默认任务将运行并且不执行任

UndefineOrNull 2020-02-12

gulp常用插件之gulp-babel使用

gulp-babel这是Babel的Gulp插件。此自述文件适用于gulp-babel v8 + Babel v7检查7.x分支以了解使用Babel v6的文档。更多使用文档请点击访问gulp-babel工具官网。安装gulp-babel，如果你想获得的下

yinuoqingqin 2020-01-13

gulp常用插件之gulp-notify使用

gulp-notify这是一款gulp通知插件。更多使用文档请点击访问gulp-notify工具官网。有关更多输入，请参见示例，或参见API部分。即使出错，gulp-notify也会传递vinyl files 。因此，如果您使用的是gulp-plumber

星辰的笔记 2020-01-13

gulp常用插件之gulp-uglify使用

gulp-uglify这是一款使用UglifyJS缩小js文件。更多使用文档请点击访问gulp-uglify工具官网。为了帮助正确处理Node流的错误情况，该项目建议使用 pipelinefrom中的readable-stream。支持UglifyJS A

UndefineOrNull 2020-01-13

gulp常用插件之gulp-beautify使用

gulp-beautify这是一款使用js-beautify进行资产美化插件。更多使用文档请点击访问gulp-beautify工具官网。任何选项都将直接传递给js-beautify。

hlihaihong 2020-01-13

gulp常用插件之gulp-imagemin使用

gulp-imagemin这是一款缩小PNG，JPEG，GIF和SVG图像的插件。更多使用文档请点击访问gulp-imagemin工具官网。请注意，您可能会遇到较旧的隐式语法。在版本低于3的版本中，如下所示：。压缩图片时比较耗时，在很多情况下我们只修改了某

kaosini 2020-01-12

gulp常用插件之gulp-rev-delete-origina使用

gulp-rev-delete-origina这是一款删除由gulp-rev或 gulp-rev-all重写的原始文件。更多使用文档请点击访问gulp-rev-delete-origina工具官网。过滤器，RegExp或function允许您排除某些文件

hlihaihong 2020-01-12

gulp常用插件之rev-del使用

rev-del这是一款从模块生成的修订清单中删除旧的、未使用的指纹文件。更多使用文档请点击访问rev-del工具官网。oldManifest默认为“rev manifest.json”，而newManifest没有默认值；它假定您已经将其存储在内存中，因此

kaosini 2020-01-12

gulp的简介以及使用方法

在项目开始之前先初始化 package.json文件 , 命令 : cnpm init -y

kaosini 2020-01-06

jsde与gulp使用说明

gulp 是基于node实现Web前端自动化开发的工具，它能够极大的提高开发效率。gulp还可以做很多事

kaosini 2020-01-04

使用gulp进行React任务的构建

例子中的React版本为v0.14.2.在这里，选择使用browserify进行打包，gulp进行任务构建。由于使用了ES2015和JSX语法，因此使用Babel进行转换。然后执行gulp即可。此时会将react和react-dom一起打包到bundle.

HSdiana 2019-12-25

gulp缓存 markdown编辑

在当前文件夹下输入cmd,本教程为gulp添加版本号,清除浏览器缓存,.pipe //创建一个用于将 Vinyl 对象写入到文件系统的流。gulp.src //** 匹配多个目录及子目录 *匹配0或多个字符

FranksTD 2019-12-19

安科网

Gulp和webpack的区别

UndefineOrNull

Gulp构建工具

Webpack打包工具

UndefineOrNull

相关推荐

gulp 构建 demo

第三方模块Gulp

gulp js文件压缩 es6 代码转换

gulp基本使用

191.gulp处理JavaScript文件的任务

192.gulp-concat插件合并多个文件

187.gulp介绍和安装

gulp

gulp系列之快速入门篇

gulp常用插件之gulp-babel使用

gulp常用插件之gulp-notify使用

gulp常用插件之gulp-uglify使用

gulp常用插件之gulp-beautify使用

gulp常用插件之gulp-imagemin使用

gulp常用插件之gulp-rev-delete-origina使用

gulp常用插件之rev-del使用

gulp的简介以及使用方法

jsde与gulp使用说明

使用gulp进行React任务的构建

gulp缓存 markdown编辑

UndefineOrNull