https://amatsuzero.github.io/LastStand/tags/%E5%89%8D%E7%AB%AF%E6%9E%84%E5%BB%BA%E5%B7%A5%E5%85%B7%E8%AF%A6%E8%A7%A3/Recent content in 前端构建工具详解 on Last StandHugozh-cnThu, 23 Oct 2025 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-004/Thu, 07 Aug 2025 00:00:00 +0800https://amatsuzero.github.io/LastStand/posts/frontend/engineering/engineering-004/<p>谈到构建工具，大家首先想到的肯定就是 <code>Webpack</code> 以及现在最🔥的 <code>Vite</code>。 <code>Webpack</code>，功能强大，生态丰富，从面世到今天，一直是很受大家欢迎；<code>Vite</code> 采用 <code>unbundle</code> 构建模式，带来了极致的开发体验，给开发人员以新的选择。</p> <p>在这两个构建工具之外，还有其他的构建工具，如和 <code>Webpack</code>、<code>Vite</code> 类似的 <code>Rollup</code>、<code>Parcel</code>、<code>Esbuild</code>，自动化构建工具 <code>grunt</code>、<code>gulp</code>，以及更加久远的 <code>YUI Tool</code>。</p> <p>这些工具的存在，构成了前端构建工具的发展史。</p> <h4 id="yui-tool--ant">YUI Tool + Ant</h4> <p><code>YUI tool</code> 是 07 年左右出现的一个构建工具，功能比较简单，用于压缩混淆 <code>css</code> 和 <code>js</code> 代码，需要配合 <code>java</code> 的 <code>Ant</code> 使用。</p> <p>当时 web 应用开发主要采用 <code>JSP</code>，还不像现在这样前后端分离，通常是由 java 开发人员来编写 js、css 代码，前端代码都是和后端 java 代码放在一起的。因此前端代码的压缩混淆也就基于 java 实现了。</p> <h4 id="grunt--gulp">Grunt / Gulp</h4> <p><code>Grunt</code> / <code>Gulp</code> 都是运行在 <code>node</code> 环境上的自动化工具。</p> <p>在开发过程中，我们可以将一些常见操作如<code>解析 html</code>、<code>es6 代码转换为 es5</code>、<code>less / sass 代码转换为 css 代码</code>、<code>代码检查</code>、<code>代码压缩</code>、<code>代码混淆</code>配置成一系列任务，然后通过 <code>Grunt</code> / <code>Gulp</code> 自动执行这些任务。</p> <p><code>Grunt</code> 和 <code>Gulp</code> 的不同点：</p>