本篇文章主要是介绍了目前前端工程化做一次详细的对比和目前流程的工程框架的优缺点。vite/pnpm/rollup/webpack/gulp

本文将会介绍如何使用gulp4来搭建项目脚手架，如果您还在使用gulp3或更老的版本，您也以通过本文的一些思想将之前的项目进行完善，更新。如果gulp不是你们团队的重点，也可以移步我的另一篇文章: 由于本文重点是介绍gulp4.0搭建脚手架的思路，相关插件的用法以及项目结构的设…

博主最近准备开发一个UI组件库，遇到了一个难题，博主希望单独打包组件样式scss文件，而不是与组件一起用webpack打包。调研发现gulp可以解决这个问题，于是，研究了下gulp4在前端工程化中的应用。 gulp是一种基于流的自动化构建工具，基于nodeJs中的stream（…

在日常开发中，我们开发多个同类型项目时，自动化构建流大致都是相同的。而我们需要在每个项目都去重复配置构建任务，所以针对此问题，我们去提取一个可复用的自动化工作流 我们在项目中删除gulpfile然后运行 yarn gulp build --gulpfile ./node_mod…

在项目根目录创建gulpfile.js文件（如果使用ts或者babel，也可用gulpfile.ts、gulpfile.babel.js分别代替），此文件即gulp会默认读取的配置文件，我们可以在里面配置需要的task。 如果task较多或者较复杂，可以创建gulpfile.j…

在了解 webpack 的时候，也想到了之前有用到过的一个小工具 gulp。诧异一看，两者其实能够做到的事情竟然是如此相似。同样是 css，js，ts 转译，以及 监听文件修改，两个工具能够做到的事情好像是差不多的。 两者在一定程度上可以做到相同的事情，但也不是没有区别。 we…

这两天动手配置了一下gulp，发现gulp配置简单，构建速度快，在某些使用场景下还是个不错的选择，本文从零开始构建，到最后打包发布到生成环境。通过本文可以快速上手gulp，文末附送github源码，需要的可以点击下载。 gulp是一个基于流的前端自动化构建工具，与grunt、w…

关于样式这里的操作我们需要将所有的scss、less文件编译成css文件，所以下面进行具体操作。 项目中都有public目录，这些存放一些静态的公共目录，直接输出到dist文件即可。 在编译输出文件之前，需要把之前的目录删掉，使用del模块进行操作。这个不是gulp插件，但是因…