- 综合排序
- 最热优先
- 最新优先
- 来自专栏性能与架构
前端构建工具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 ? SCSS配置 在css处理器中，我感觉scss还是比较好用的，在这个项目中页用到的就是scss,直接安装这个插件就行了 cnpm install sass -D es6转换es5 在一些浏览器，有一些 es6语法，是不支持的，这个是我们就需要babelrc来配置一下。
1.3K40发布于 2019-12-25 Vite 6：新一代前端构建工具的重大升级
在前端开发的世界里，构建工具的效率直接决定了开发项目的体验好坏。而Vite凭借其超快的冷启动速度和高效的热模块替换（HMR），迅速俘获了众多开发者的心。 ViteConf会议成果 重大发布与合作：在第三届ViteConf会议上，Evan You宣布了VoidZero公司，致力于为JavaScript生态系统构建开源、高性能的开发工具链。 对于构建单页应用（SPA）的开发者来说，使用方式与以往相同；对于自定义服务器端渲染（SSR）应用，Vite 6保持向后兼容。框架作者可以利用此API提供更接近生产环境的开发体验。 比如，新框架加入Vite生态后，开发者可以在熟悉的Vite环境中使用这些框架的特性，无需额外配置复杂的构建工具。 2. 总结 Vite 6带来了诸多令人瞩目的特性和改进，无论是生态系统的繁荣发展，还是核心功能的优化提升，都为前端开发者提供了更强大、高效的构建工具。
1.1K10编辑于 2025-01-16- 来自专栏喇叭的学堂
前端构建工具 webpack 笔记
1、了解 webpack 1、定义：本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具，当 webpack 处理应用它会在内部从一个或多个入口点构建一个依赖图 css 代码 2）把 ES6+ 降级成 ES5 3）支持多种模块标准语法 4、问题：为何不学 vite ？ 因为：很多项目还是基于 Webpack 构建，并为 Vue React 脚手架使用做铺垫！ ，而Webpack-CLI则是用于在命令行中执行Webpack相关操作的工具。 它们通常一起使用，以便更好地管理和构建前端项目。
1K10编辑于 2024-03-11 - 来自专栏企鹅号快讯
从Npm Script到Webpack，6种常见的前端构建工具对比
小编说：历史上先后出现了一系列构建工具，它们各有优缺点。由于前端工程师很熟悉JavaScript，Node.js又可以胜任所有构建需求，所以大多数构建工具都是用Node.js开发的。 自动发布：更新代码后，自动构建出线上发布代码并传输给发布系统。 构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。 构建为前端开发注入了更大的活力，解放了我们的生产力。 1 Npm Script Npm Script（https://docs.npmjs.com/misc/scripts）是一个任务执行者。 6 Rollup Rollup（https://rollupjs.org）是一个和Webpack很类似但专注于ES6的模块打包工具。 这些构建工具都有各自的定位和专注点，它们之间既可以单独完成任务，也可以相互搭配来弥补各自的不足。
2.4K60发布于 2018-02-11 - 来自专栏性能与架构
前端构建工具 grunt VS gulp
前几天一个前端大拿朋友和我说gulp比grunt更好用，就了解了一下gulp，和grunt做个简单的比较 有两个明显的感受： （1）使用方式上，gulp的配置文件更清晰便利一些 以css文件的合并压缩为例 cssmin']); } （2）从实现底层文件操作方式上，gulp的效率更高 grunt 的实现方式： 读取源文件 -> N个临时文件 -> 写入目标文件 从配置文件可以看到，每个任务都指定了src和dest，构建过程中会进行多次
81680发布于 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+, 需要额外的双横线
78010编辑于 2023-02-16 - 来自专栏编程微刊
有哪些常用的前端构建工具？
前端构建工具是一类用于自动化构建、打包和优化前端项目的工具。它们帮助开发者处理各种前端资源（如 HTML、CSS、JavaScript、图片等），将它们转换、合并、压缩，并生成用于部署的最终文件。 以下是前端构建工具常见的功能和特点： 1：打包和模块化：构建工具能够将多个模块或文件打包为一个或多个输出文件，实现模块化开发和加载。 5：自动化和监控：构建工具支持自动化构建过程，例如监听文件变化并自动重新构建，实现实时预览和开发体验。 6：插件和配置：构建工具通常支持插件系统，可以通过插件扩展和定制构建过程，满足特定的项目需求。 常见的前端构建工具包括： webpack Parcel Gulp Grunt Rollup Brunch 选择合适的前端构建工具取决于项目需求、开发流程和个人偏好。 Rollup：Rollup 是一个适用于 JavaScript 库的模块打包工具，它支持 ES6 模块的静态分析和 Tree Shaking（无用代码消除），以生成更小、更高效的输出文件。
86330编辑于 2023-10-16 - 来自专栏前端进阶实战
【前端工程化】Rollup构建工具
随着互联网行业的发展，前端应用也逐渐变得复杂，所以自然而然地前端工程化开发是必然道路，百家争名的时代，涌现了许多优秀的构建工具，今天想从学习的角度，和大家分享一下笔者的学习方法和思路。 笔者个人观点看来，想要完全掌握前端工程化，那么就得对行业现有的构建工具、流程管理、服务管理有一个全面以及深入的认识，无论是前端还是后端开发者，我们通过任意编程语言编写软件应用，这是基本能力，但作为工程师 二、为什么要使用构建工具 如前文所述，前端工程化是作为工程师的必要能力，工程化并非一个人就能搞定的，我们需要站在前人/巨人的肩膀看世界。 随着行业的发展，涌现了一些获得行业认可（可以认为是最佳实践）的构建工具，这些构建工具将一些项目管理和编程开发的行业最佳实践集成到了一个“脚手架”工具中。 构建工具能做的事： 处理兼容性 混淆、压缩代码 Tree Shaking 转译 单元测试 打包应用 三、上手Rollup Rollup是一个我认为还比较简单的构建工具，此处先不去讨论其深层次的构建实现细节
2.3K41编辑于 2022-07-29 - 来自专栏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 - 来自专栏程序员分享
上一代前端构建工具
前端工程化实践：从复制粘贴到一键生成，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❌ 旧格式⚠️ 需手动配浏览器兼容✅ 统一配置⚠️ 需手动配⚠️ 需手动配构建工具
11500编辑于 2026-03-16 - 来自专栏WflynnWeb
新型前端构建工具 Vitejs 开发使用
新型前端构建工具 Vitejs 开发使用 在我刚接触编程的时候，JavaScript 只是被用来给网站添加一些交互效果。你还记得如何添加鼠标拖拽效果吗？或者如何在鼠标悬停时改变链接颜色？ 作为这些构建工具的使用者，你或许不在意它的实现技术，但如果你是构建工具的开发者，那么维护起来就会变得非常痛苦。 这就是为什么今天我想向你介绍一款能解决所有这些问题的工具：ViteJS 。 已经有很多的构建工具了，你还需要一个吗？是的，你需要。 ViteJS 不仅仅是一个构建工具。事实上，ViteJS 的目标是成为构建任何基于 JavaScript 项目的首选工具。 # 如果你正在使用 npm 7 $ npm init @vitejs/app my-vue-app -- --template vue # 如果你正在使用 npm 6 $ npm init @vitejs 关于其它构建工具 ViteJS 并不是第一个尝试这样做的工具，也绝对不是最知名的。但它之所以被创造出来，是因为目前的主流工具并没有用行业的最新趋势来解决性能问题。
1.5K30编辑于 2022-10-28 - 来自专栏柒八九技术收纳盒
前端工程化之构建工具
文章概要 构建解决的问题 包管理工具 任务式构建工具 模块化：模块定义与模块化的构建工具 构建解决的问题 在Grunt /Gulp/ webpack 等前端工具出现之前，前端资源的构建需要借助于其他开发领域的工具实现 「在 Node.js 诞生之前」，对于前端资源的构建工作只是进行「基本的压缩和打包」，因为当时前端项目自身的复杂度并不高，没有模块化开发、规范转译、css 预编译等现在看来非常普遍的需求。 任务式构建工具主要有两类： 「Grunt」: 「基于任务」的构建工具(2012年发布) 「Gulp」: 「流式」构建工具(2013年发布) Grunt 和 Gulp 这两种任务式的构建工具的基本组成包括 「自动化执行预设任务」的问题，但「不能解决项目中代码如何组织成不同功能的代码包、不同代码之间如何相互依赖」等问题 ❞ ---- 模块化：模块定义与模块化的构建工具 我们简单来描述下，从前端的莽荒时代，到现在 天然支持 ES6 模块的打包 后记 「分享是一种态度」。 参考资料：效率工程化/前端工程化体系设计与实践
1.1K20编辑于 2022-08-25 - 来自专栏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.2K41编辑于 2024-03-19 - 来自专栏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 SWC 全称 Speedy Web Complier，实际上它并不是构建工具，它是基于 Rust 实现的 Complier 工具，但是似乎也有做 Bundle 的规划，这里顺带一起介绍了。 https://esbuild.github.io/ https://swc.rs/docs/getting-started https://jishuin.proginn.com/p/763bfbd6c888
1.3K30编辑于 2022-05-18 - 来自专栏python知识
构建前端
对于复杂的HTML前端页面来说，我们需要一套基础的CSS框架来完成页面布局和基本样式。另外，jQuery作为操作DOM的JavaScript库也必不可少。 +- FontAwesome.otf +- js/ +- awesome.js +- html5.js +- jquery.min.js +- uikit.min.js 由于前端页面肯定不止首页一个页面
60160发布于 2021-05-25 6个提升前端开发效率的必备工具
在互联网中，许许多多由社区开发的工具，可以让前端开发人员的工作生活变得更加轻松。今天我想和大家分享的，是我最喜欢的一些前端开发常用工具，这些工具真的对我的工作很有帮助。 1 EnjoyCSS 说实话，虽然我做了很多前端开发工作，但我仍然不能出色地运用CSS。这个非常简单的工具，就是我遇到困难时的救星。 如此便捷的工具在我们的编辑器中十分流行，与此同时它还有一个线上版本，可以在线完成对代码格式的修正。 3 Postman 自从我开始前端开发生涯，Postman就一直在我的开发人员工具集中。 ——Bit.dev） 正如Bit.dev所说的那样，这一组件平台也适合用作设计系统构建器。让开发人员和设计师团队进行协同合作，Bit.dev是一款从头开始构建设计系统的理想工具。 6 CanIUse 作为一款在线工具，CanlUse非常的简便，可以帮你弄清楚你期望实现的功能，是否与你使用的浏览器兼容。
1.5K20编辑于 2022-08-11- 来自专栏前端精读评论
精读《新一代前端构建工具对比》
前端工程领域近期出了不少新工具，这些新工具都运用了一些新技术或者跨领域技术，实现了一些突破，因此有必要了解一下这些工具都有什么特性，以及是否可以投入生产环境。 esbuild 比较底层，所以可以与后续介绍的上层构建工具结合使用，当然根据工具设计理念，是否内置，内置到什么程度，以及是否允许通过插件替换就是另一回事了。 总结 新一代前端构建工具最大特色有两个：更底层的语言编写、bundless，如果用一个词描述就是高性能。积极拥抱浏览器新特性或者知识跨界都可以帮助前端领域取得新的突破。 最后，除了升级你的共建工具外，换一台 M1 芯片电脑也可以极大提升开发效率，笔者亲测 webpack 构建速度提升 3 倍！ 讨论地址是：精读《新一代前端构建工具对比》· Issue #316 · dt-fe/weekly 版权声明：自由转载-非商用-非衍生-保持署名（创意共享 3.0 许可证）
66120编辑于 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
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号