Grunt、Gulp.js 和 Bower 有什么区别?为什么&什么时候使用它们?

2023-03-20前端开发问题
4

本文介绍了Grunt、Gulp.js 和 Bower 有什么区别?为什么&什么时候使用它们?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

Grunt、Gulp.js 和 Bower 之间有什么区别?为什么&何时以及如何使用它们?

我现在看到,大多数前端项目都使用上述工具,虽然我在使用它们就像在我最近的项目中一样,我正在使用 gulp 使用像

这样的脚本来构建 HTML、CSS 和 JavaScript

$ gulp build

但是对所有这些前端框架都不太了解,请帮我对 Grunt、Gulp.js 和 Bower 有一个整体的了解.

解决方案

在本质上和很多细节上,Gulp 和 Grunt 都是用于自动执行一系列相互依赖的任务的系统,通常用于定义项目的构建",例如现代风格在 make 工具上.通常,一个项目使用其中一个或另一个,但不能同时使用两者(无论如何,对于相同的部分).

Bower 不同,它经常与 Gulp 或 Grunt 一起使用:它是客户端库的包管理器,易于维护这些库是最新的,以标准化的方式指定它们及其依赖项,等等.

他们网站上的 Gulp 单线:

<块引用>

自动化和增强您的工作流程

他们的 Grunt 单线:

<块引用>

JavaScript 任务运行器

还有鲍尔:

<块引用>

网络包管理器

<小时><块引用>

为什么&什么时候用?

我认为以上内容适用于 Gulp 和 Grunt:如果您有想要自动化的任务(例如构建具有缩小、连接、压缩等的网站的发布版本;或者查看文件以进行更改并重新运行当任务发生变化以支持快速开发时),您可以使用 Gulp 和 Grunt.

但这不仅仅是构建.您可以将 Gulp 和 Grunt 用于需要自动化的任何一系列任务.

Bower 可用于管理项目中的客户端库.您可以使用 Bower 安装最新版本的 Bootstrap,它会将相关文件放在项目的标准位置.如果出现更新的 Bootstrap,Bower 可以更新这些文件.如果一个库依赖于其他库(例如,Bootstrap 的 JS 依赖于 jQuery),Bower 会帮助管理该树.Grunt 有一些有用的任务(我假设是 Gulp),它们甚至可以自动将脚本和链接标签添加到这些库的 HTML 中,方法是在源 HTML 中有一个占位符,基本上说把 Bower 库放在这里"./p>

What are the differences between Grunt, Gulp.js and Bower? Why & when and how to use them?

I've seen nowadays, most of the front-end project using the above tools, though I am using them like in my recent project I am using gulp to build HTML, CSS and JavaScript using a script like

$ gulp build

but don't have much understanding of all these front-end frameworks, please help me get an overall understanding of Grunt, Gulp.js and Bower.

解决方案

In essence and with a lot of hand-waving away of details, Gulp and Grunt are both systems for automating serieses of inter-dependent tasks, commonly used for defining the "build" of your project, like a modern take on the make tool. Typically a project uses one of them or the other, but not both at the same time (for the same parts, anyway).

Bower is different, and frequently used with either Gulp or Grunt: It's a package manager for client-side libraries, making it easy to keep those libs up to date, specify them and their dependencies in a standardized way, and so forth.

The Gulp one-liner from their website:

Automate and enhance your workflow

The Grunt one-liner from theirs:

The JavaScript Task Runner

And Bower:

A package manager for the web


Why & when to use them?

I think the above covers that for Gulp and Grunt: If you have tasks you want to automate (like building the release version of a website with minification, concatenation, compression, etc.; or watching files for changes and re-running tasks when they change to support rapid development), you can use Gulp and Grunt for that.

But it's not just builds. You can use Gulp and Grunt for any series of tasks that you need to automate.

Bower is useful for managing the client-side libraries in your projects. You can use Bower to install, say, the latest version of Bootstrap, and it will put the relevant files in standard locations in your project. Bower can update those files if a newer Bootstrap comes out. If a library depends on other libraries (Bootstrap's JS relies on jQuery, for instance), Bower helps manage that tree. There are helpful tasks for Grunt (and I assume for Gulp) that can even automate adding the script and link tags to your HTML for those libraries, by having a placeholder in your source HTML that basically says "put the Bower libs here."

这篇关于Grunt、Gulp.js 和 Bower 有什么区别?为什么&amp;什么时候使用它们?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

The End

相关推荐

Fatal error: Call to a member function fetch_assoc() on a no
业务场景:使用update语句去更新数据库字段。 原因:update接收值不正确。原来代码: $query = "UPDATE student SET date = now() WHERE id = $id";$result = $mysqli-query($query2) or die($mysqli-error); // 问题出现了在这句 $data = $result-fetch_ass...
2024-12-13 前端开发问题
136

js删除数组中指定元素的5种方法
在JavaScript中,我们有多种方法可以删除数组中的指定元素。以下给出了5种常见的方法并提供了相应的代码示例: 1.使用splice()方法: let array = [0, 1, 2, 3, 4, 5];let index = array.indexOf(2);if (index -1) { array.splice(index, 1);}// array = [0,...
2024-11-22 前端开发问题
182

layui 实现实时刷新一个外部的div
主页面上显示了一个合计,在删除和增加的时候需要更改这个总套数的值: //html代码div class="layui-inline layui-show-xs-block" style="margin-left: 10px" id="sumDiv"spanSOP合计:/spanspan${totalNum}/spanspan套/span/div 于是在我们删除这个条数据后,...
2024-11-14 前端开发问题
156

layui树状组件tree怎么默认勾选?
在layui树状组件tree中,勾选问题可以通过以下方法解决: 通过tree的oncheck事件来监听勾选操作,然后根据勾选状态进行相应的处理。例如: tree.on('check', function(obj) { // 获取勾选状态 var isChecked = obj.checked; // 获取当前节点数据 var data =...
2024-11-09 前端开发问题
372

layui要如何改变时间日历布局大小?
问题描述 我想改变layui时间日历布局大小,这个要怎么操作呢? 解决办法 可以用css样式对时间日历进行重新布局,具体代码如下: !DOCTYPE htmlhtmlheadmeta charset="UTF-8"title/titlelink rel="stylesheet" href="../../layui/css/layui.css" /style#test-...
2024-10-24 前端开发问题
271

layui中表单会自动刷新的问题
layui中表单会自动刷新的问题,因为用到layui的表单,遇到了刷新的问题所以记录一下: script layui.use(['jquery','form','layer'], function(){ var $ = layui.jquery, layer=layui.layer, form = layui.form; form.on('submit(tijiao)', function(data){ a...
2024-10-23 前端开发问题
262