- 综合排序
- 最热优先
- 最新优先
- 来自专栏性能与架构
前端构建工具grunt
grunt是什么 grunt是目前非常流行的前端构建工具，支持自定义插件，有丰富的插件帮助我们完成构建任务 自动化完成我们指定的任务，例如压缩、编译、单元测试、linting等 前端为什么需要构建工具 先看下前端的开发场景 小项目中，css文件和js文件并不多，前端部分是很轻的，几乎不需要我们特别的关注 而在一个大项目中，css文件和js文件的数量会达到几十个上百个，一个页面中会引用很多css和js 的开发越来越复杂，那么我们就需要生成文档，来描述各个模块和方法 这时我们就会发现，开发之外的工作繁琐了很多，不仅需要写好代码，还需要做好 合并压缩、单元测试 等一系列的工作，我们就会渴望有一个便利的构建工具来完成这些工作
1.3K50发布于 2018-04-02 - 来自专栏前端技术开发
Parcel前端构建工具
Parcel 是 Web 应用打包工具，适用于经验不同的开发者。它利用多核处理提供了极快的速度。 https://parceljs.org/getting_started.html 配置了一个简易的web打包工具 https://github.com/MrZHLF/Parcel ? 脚本配置好之后，直接启动dev启动项目，build对项目的打包工具 npm run dev ? "regenerator": true, "useESModules": false } ] ] } 这个打包工具适合一些简易的
1.3K40发布于 2019-12-25 - 来自专栏喇叭的学堂
前端构建工具 webpack 笔记
1、了解 webpack 1、定义：本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具，当 webpack 处理应用它会在内部从一个或多个入口点构建一个依赖图 因为：很多项目还是基于 Webpack 构建，并为 Vue React 脚手架使用做铺垫！ ，而Webpack-CLI则是用于在命令行中执行Webpack相关操作的工具。 它们通常一起使用，以便更好地管理和构建前端项目。 'style-loader' : MiniCssExtractPlugin.loader process.env ：固定的，通过这个调用 我们定义的值 13、前端-注入环境变量 需求：前端项目中
96810编辑于 2024-03-11 - 来自专栏性能与架构
前端构建工具 grunt VS gulp
前几天一个前端大拿朋友和我说gulp比grunt更好用，就了解了一下gulp，和grunt做个简单的比较 有两个明显的感受： （1）使用方式上，gulp的配置文件更清晰便利一些 以css文件的合并压缩为例 cssmin']); } （2）从实现底层文件操作方式上，gulp的效率更高 grunt 的实现方式： 读取源文件 -> N个临时文件 -> 写入目标文件 从配置文件可以看到，每个任务都指定了src和dest，构建过程中会进行多次
81380发布于 2018-04-02 - 来自专栏SpringBoot教程
前端开发与构建工具Vite
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。 浏览器支持 默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入。 传统浏览器可以通过官方插件 @vitejs/plugin-legacy 支持 —— 查看 构建生产版本 章节获取更多细节。 例如，要构建一个 Vite + Vue 项目，运行: # npm 6.x npm init vite@latest my-vue-app --template vue # npm 7+, 需要额外的双横线
77110编辑于 2023-02-16 - 来自专栏前端进阶实战
【前端工程化】Rollup构建工具
随着互联网行业的发展，前端应用也逐渐变得复杂，所以自然而然地前端工程化开发是必然道路，百家争名的时代，涌现了许多优秀的构建工具，今天想从学习的角度，和大家分享一下笔者的学习方法和思路。 笔者个人观点看来，想要完全掌握前端工程化，那么就得对行业现有的构建工具、流程管理、服务管理有一个全面以及深入的认识，无论是前端还是后端开发者，我们通过任意编程语言编写软件应用，这是基本能力，但作为工程师 二、为什么要使用构建工具 如前文所述，前端工程化是作为工程师的必要能力，工程化并非一个人就能搞定的，我们需要站在前人/巨人的肩膀看世界。 随着行业的发展，涌现了一些获得行业认可（可以认为是最佳实践）的构建工具，这些构建工具将一些项目管理和编程开发的行业最佳实践集成到了一个“脚手架”工具中。 构建工具能做的事： 处理兼容性 混淆、压缩代码 Tree Shaking 转译 单元测试 打包应用 三、上手Rollup Rollup是一个我认为还比较简单的构建工具，此处先不去讨论其深层次的构建实现细节
2.3K41编辑于 2022-07-29 - 来自专栏编程微刊
有哪些常用的前端构建工具？
前端构建工具是一类用于自动化构建、打包和优化前端项目的工具。它们帮助开发者处理各种前端资源（如 HTML、CSS、JavaScript、图片等），将它们转换、合并、压缩，并生成用于部署的最终文件。 以下是前端构建工具常见的功能和特点： 1：打包和模块化：构建工具能够将多个模块或文件打包为一个或多个输出文件，实现模块化开发和加载。 常见的前端构建工具包括： webpack Parcel Gulp Grunt Rollup Brunch 选择合适的前端构建工具取决于项目需求、开发流程和个人偏好。 Snowpack：Snowpack 是一个面向现代前端开发的构建工具，它利用浏览器的原生 ES 模块加载能力，实现快速的开发构建过程。 这些构建工具各有特点和适用场景，开发者可以根据项目需求和个人偏好选择合适的工具。此外，这些工具通常可以与其他工具（如 Babel、ESLint 等）配合使用，以构建更完整的前端工程化流程。
83930编辑于 2023-10-16 - 来自专栏Super 前端
前端自动化构建工具Grunt
一、了解Gurnt Grunt 是一个基于任务的JavaScript工程命令行构建工具。 Grunt和Grunt插件，是通过npm安装并管理的，npm是Node.js的包管理器。 了解Grunt前，首先要准备两件事： 1、了解npm（Node Package Manager）：npm是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。 grunt-contrib-uglify --save-dev 第三步：创建Gruntfile.js，添加要使用插件配置 'use strict'; module.exports = function(grunt) { // 构建的初始化配置 grunt-contrib-uglify": "^0.9.1" } } //Gruntfile.js 'use strict'; module.exports = function(grunt) { // 构建的初始化配置
1K42发布于 2019-08-15 - 来自专栏WflynnWeb
新型前端构建工具 Vitejs 开发使用
新型前端构建工具 Vitejs 开发使用 在我刚接触编程的时候，JavaScript 只是被用来给网站添加一些交互效果。你还记得如何添加鼠标拖拽效果吗？或者如何在鼠标悬停时改变链接颜色？ 作为这些构建工具的使用者，你或许不在意它的实现技术，但如果你是构建工具的开发者，那么维护起来就会变得非常痛苦。 这就是为什么今天我想向你介绍一款能解决所有这些问题的工具：ViteJS 。 已经有很多的构建工具了，你还需要一个吗？是的，你需要。 ViteJS 不仅仅是一个构建工具。事实上，ViteJS 的目标是成为构建任何基于 JavaScript 项目的首选工具。 它改变了通常的构建工具对依赖包的处理方式，直接利用 ES 模块来打包构建，让浏览器来完成一些工作。 它还大量使用 HTTP 缓存不更改的代码。 关于其它构建工具 ViteJS 并不是第一个尝试这样做的工具，也绝对不是最知名的。但它之所以被创造出来，是因为目前的主流工具并没有用行业的最新趋势来解决性能问题。
1.5K30编辑于 2022-10-28 - 来自专栏程序员分享
上一代前端构建工具
前端工程化实践：从复制粘贴到一键生成，xcli 解决了什么问题，又是如何设计的。 ─ 代码规范│ ├── ESLint 9 (Flat Config) ⭐ 最新格式│ ├── Prettier│ └── Stylelint (支持 CSS/Less/SCSS)│├── 构建工具 打包工具: Vite# ? 代码解读复制代码export const vitePlugin: Plugin = { name: 'vite', displayName: 'Vite', description: '下一代前端构建工具 MobX/Pinia❌ 无❌ 无HTTP 封装✅ 可选 Axios/Fetch❌ 无❌ 无ESLint 9✅ Flat Config❌ 旧格式⚠️ 需手动配浏览器兼容✅ 统一配置⚠️ 需手动配⚠️ 需手动配构建工具
10900编辑于 2026-03-16 - 来自专栏JavaScript高阶应用
Gulp 前端自动化构建工具
Gulp 是基于 NodeJS 的前端自动化构建工具，在项目开发过程中自动化地完成 html / css / js / image / sass / less 等文件的编译、合并、压缩、语法检查、浏览器自动刷新等重复性任务 并非原始的文件流，而是一个虚拟的文件对象流 (Vinyl Files)，存储着原始文件的路径、文件名、内容等信息NodeJS 安装Gulp 是基于 NodeJS，所以需要安装 Node 和 npm 包管理工具 node -v 和 npm -v 分别查看 NodeJS 和 npm 版本号，显示版本号即为成功安装npm 介绍npm (Node Package Manager) 是随同 NodeJS 一起安装的包管理工具 npm install gulp-less --save-dev，同样的，Mac 用户要是提示权限错误，加上 sudo 指令即可接下来我们新建一个 gulpfile.js 文件，具体代码如下所示// 导入工具包
2.1K41编辑于 2024-03-19 - 来自专栏柒八九技术收纳盒
前端工程化之构建工具
文章概要 构建解决的问题 包管理工具 任务式构建工具 模块化：模块定义与模块化的构建工具 构建解决的问题 在Grunt /Gulp/ webpack 等前端工具出现之前，前端资源的构建需要借助于其他开发领域的工具实现 「然而」，Node.js 的诞生和发展令前端工具生态不断壮大，目前我们所熟知的 Grunt /Gulp/webpack 等工具均是「由 Node.js 为底层驱动平台的」。 「在 Node.js 诞生之前」，对于前端资源的构建工作只是进行「基本的压缩和打包」，因为当时前端项目自身的复杂度并不高，没有模块化开发、规范转译、css 预编译等现在看来非常普遍的需求。 任务式构建工具主要有两类： 「Grunt」: 「基于任务」的构建工具(2012年发布) 「Gulp」: 「流式」构建工具(2013年发布) Grunt 和 Gulp 这两种任务式的构建工具的基本组成包括 「自动化执行预设任务」的问题，但「不能解决项目中代码如何组织成不同功能的代码包、不同代码之间如何相互依赖」等问题 ❞ ---- 模块化：模块定义与模块化的构建工具 我们简单来描述下，从前端的莽荒时代，到现在
1.1K20编辑于 2022-08-25 - 来自专栏PHP 开发
前端构建工具 Gulp.js 上手实例
在软件开发中使用自动化构建工具的好处是显而易见的。 大多数情况下，Grunt 一直是前端构建工具的首选。但是最近一个名为 Gulp.js 的新工具正在吸引越来越多的人的关注。 接下来我们就一起来看看如何安装 Gulp, 并通过一个简单的案例让你感受一下这个新的构建工具。 ---- 转到 Gulp.js 在我开始使用 Grunt 之前的几年里，一直是使用 涛哥 开发的 CssGaga 来做前端构建工具。这是当时我们工作标准流程的一部分，它非常强大。 之后又听说过、尝试过一些前端构建工具，但都没有让我放弃 Grunt. 第一次看到 Gulp 的介绍时，就被它的配置语法所吸引。因为对于任何一个接触过 Node.js 的人来说，这语法是在是太舒服了。
2.5K70发布于 2018-03-06 - 来自专栏Tecvan
新一代前端构建工具汇总
说起前端构建，大家一定首先想到 Webpack，确实它是前端构建的老大哥了，大而全，什么场景都能满足，社区生态爆炸。 但是社区里也有许多其他优秀的构建工具，他们或许不如 Webpack 那样“包治百病”，但他们都有一些独特的优势，如果在一些特定的场景你觉得使用 Webpack 太臃肿了，那你或许可以考虑下面的一些工具。 Parcel 一个号称「「0 配置」」的打包工具，开箱即用，同时默认使用 Worker 进程充分发挥多核 cpu 优势来提升构建速度，因此在打包效率上还是不错的，而且 Parcel 2.0 在 SWC 目前前端社区也有使用 esbuild 结合 Webpack 的实践，也正是使用 esbuild 的 Transform 能力作为JS/TS/JSX/TSX 的 loader https://github.com SWC 全称 Speedy Web Complier，实际上它并不是构建工具，它是基于 Rust 实现的 Complier 工具，但是似乎也有做 Bundle 的规划，这里顺带一起介绍了。
1.3K30编辑于 2022-05-18 - 来自专栏python知识
构建前端
对于复杂的HTML前端页面来说，我们需要一套基础的CSS框架来完成页面布局和基本样式。另外，jQuery作为操作DOM的JavaScript库也必不可少。 +- FontAwesome.otf +- js/ +- awesome.js +- html5.js +- jquery.min.js +- uikit.min.js 由于前端页面肯定不止首页一个页面
59660发布于 2021-05-25 - 来自专栏前端精读评论
精读《新一代前端构建工具对比》
前端工程领域近期出了不少新工具，这些新工具都运用了一些新技术或者跨领域技术，实现了一些突破，因此有必要了解一下这些工具都有什么特性，以及是否可以投入生产环境。 esbuild 比较底层，所以可以与后续介绍的上层构建工具结合使用，当然根据工具设计理念，是否内置，内置到什么程度，以及是否允许通过插件替换就是另一回事了。 总结 新一代前端构建工具最大特色有两个：更底层的语言编写、bundless，如果用一个词描述就是高性能。积极拥抱浏览器新特性或者知识跨界都可以帮助前端领域取得新的突破。 最后，除了升级你的共建工具外，换一台 M1 芯片电脑也可以极大提升开发效率，笔者亲测 webpack 构建速度提升 3 倍！ 讨论地址是：精读《新一代前端构建工具对比》· Issue #316 · dt-fe/weekly 版权声明：自由转载-非商用-非衍生-保持署名（创意共享 3.0 许可证）
65220编辑于 2022-03-15 - 来自专栏李维亮的博客
前端构建工具gulpjs的使用介绍及技巧
gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学习起来很容易，而且gulpjs使用的是nodejs中stream来读取和操作数据，其速度更快 如果你还没有使用过前端构建工具，或者觉得gruntjs太难用的话，那就尝试一下gulp吧。 ─ gulp └── package.json 2.2 运行gulp任务 要运行gulp任务，只需切换到存放gulpfile.js文件的目录(windows平台请使用cmd或者Power Shell等工具
2.2K30发布于 2021-07-09 - 来自专栏埋名
最流行的4种前端构建项目工具介绍
在 Web 开发历程上，我们构建了很多小型的技术解决方案，比如用 HTML 去描述页面结构，CSS 去描述页面样式，JavaScript 去描述页面逻辑，或者你也可以用一些比如 Jade 去取代 HTML Grunt 和 Gulp 是在是前端的世界中最流行的解决方案，他们两个都有很多非常有用的插件。NPM（Node.js 的包管理器）则包含了他们两个。 在实践中只使用 CommonJS （ Node.js 所采用的格式）会比较有帮助，而让工具去处理剩下的事情。它的优势是你可以发布到 NPM 上来避免重新发明轮子。 你可以用 Gulp 调用它，此外有很多转换小工具可以让你更兼容的使用（比如 watchify 提供了一个文件监视器帮助你在开发过程中更加自动化地把文件合并起来），这样会省下很多精力。 在接下来的章节中我们会使用 Webpack 来构建项目来展示它的能力。你可以用其他工具和 Webpack 一起使用。
1.9K30发布于 2018-10-18 - 来自专栏VTeam技术团队
下一代前端构建工具Vite
一、背景 Vue作者尤雨溪在今年4月提出了一个由Vue3搭载的前端开发工具Vite。 Vite主要提供了前端开发服务器的功能以及生产环境打包的功能，而其主要突破则是在前端开发服务器这一方面，提供了一种基于ES Module的快速的本地开发服务器。 识别 import语法，生成请求url,向服务器请求该地址的模块 可以说浏览器对于ES Module的支持实现了真正的按需加载，省略了前端打包的过程，对于减少首屏加载时间是有极大帮助的。 样式移除 js-update: js 文件更新 full-reload: fallback 机制，网页重刷新 总结 Vite 提供了一个更快的开发环境服务器, 其实现原理基于ES模块，通过开发环境去打包将构建时间从
1.4K10发布于 2020-12-30 - 来自专栏Article
伪前端工程化之开发构建工具
Angular、vue都有自己的脚手架，方便生成项目模板，而 yeoman 则是专注于generator的构建工具。 commander // The complete solution for node.js command-line interfaces, inquirer //用来提问的 项目目录结构 bin 目录下的是整个构建工具的入口
30610编辑于 2022-06-14
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号