前端工具的应用
文章平均质量分 94
方宏伟
这个作者很懒,什么都没留下…
展开
-
DevOps 工具: —— 通过Jenkins构建CI/CD
Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具Jenkins应用广泛,大多数互联网公司都采用Jenkins配合GitLab、Docker、K8s作为实现DevOps的核心工具。Jenkins最强大的就在于插件,Jenkins官方提供了大量的插件库,来自动化CI/CD过程中的各种琐碎功能。Jenkins最主要的工作就是将GitLab上可以构建的工程代码拉取并且进行构建,再根据流程可以选择发布到测试环境或是生产环境。原创 2023-03-30 15:06:34 · 1064 阅读 · 0 评论 -
前端自动化构建工具:Webpack(四)—— Webpack 性能优化
四 Webpack 性能优化这篇文章终于要进入 Webpack 搭建的重点了 —— Webpack 性能优化。当我们的项目规模越来越大的时候,Webpack 的性能优化就成为我们绕不开的坎,这将很大程度上影响我们的开发效率。Webpack 性能优化也分为开发环境的性能优化和生产环境的性能优化,接下来我将一一介绍相关的优化方案。4.1 热模块替换HMR第一个要重点优化的地方,在于开发环境项目打包的构建速度。之前我们配置的开发环境,不管修改 index.js 依赖的哪一个模块,所有模块都会被重新加.原创 2021-03-20 19:08:48 · 526 阅读 · 0 评论 -
前端自动化构建工具:Webpack(三)—— Webpack 生产环境的基本配置
三 webpack 生产环境的基本配置上一篇文章我们讲完了 webpack 开发环境的配置,接下来就该讲 webpack 生产环境的配置了。前面已经说到,开发环境是启用代码本地调试运行的环境,帮助我们更高效率的开发。而生产环境则需要启动能让代码优化上线运行的环境,我们需要进行一系列的优化操作,以达到更好的用户体验。3.1 将CSS抽离成单独的文件之前我们处理 css 资源,最终都是使用 style-loader 在 js 文件中去动态创建 style 标签,再把样式写入 style 标签里。这样原创 2021-03-07 00:33:24 · 439 阅读 · 1 评论 -
前端自动化构建工具:Webpack(二)—— Webpack 开发环境的基本配置
二 webpack 开发环境的基本配置上一篇文章介绍的,只是简单初步了解一下 webpack。在 webpack 4 中,可以无须任何配置使用,然而大多数项目会需要很复杂的设置,我们通常需要创建一个名为 webpack.config.js 的配置文件取代以上使用命令行 CLI 选项的方式,这比在命令行中手动输入大量命令要高效的多。我们可以直接通过编写这个文件,指定 webpack 需要执行的任务。(这里为了方便统一使用 package.json、package-lock.json 和 node_modu原创 2021-03-07 00:24:46 · 361 阅读 · 1 评论 -
前端自动化构建工具:Webpack(一)—— 初步认识 Webpack
对于每一个前端开发工程师来说,Webpack 无疑是最难啃的骨头之一。Webpack是前端最主流的自动化构建工具,很多前端框架(Vue、React等)都依赖于Webpack 进行搭建。然而,相比于熟悉Gulp,熟悉 Webpack 的成本高了很多。因为 Webpack 本身不仅多了很多概念需要去理解,也有许多不得不掌握的优化配置。在去年10月份,Webpack5 正式发布,它主要是围绕优化进行升级。Webpack5 和 Webpack4 在使用的过程中会有一些小差异,但由于很多团队依旧在使用旧的 We.原创 2021-03-07 00:13:23 · 924 阅读 · 0 评论 -
前端自动化构建工具:用Gulp4.0搭建一个基本的前端开发环境
一个项目的完成一般需要经过三个步骤:初始化、开发和部署。在前端开发过程中,我们经常需要依靠一些自动化构建工具来优化前端工作流程,来帮助我们完成一系列繁琐的工作,例如浏览器热更新、ES6编译、代码压缩、添加样式前缀、图片压缩等。在这些自动化构建工具中,比较有名的就是Grunt和Gulp。相比Grunt,Gulp的人气更高。作为一个独特的构建工具,Gulp的构建方法和Grunt完全不同。Gulp有以下特点:①它的底层计算完全是在内存中运行的,而且读取数据非常快。②它可以并行执行任务。③gulpfile是原创 2020-07-19 17:24:41 · 968 阅读 · 0 评论