我为何放弃Gulp与Grunt,转投npm scripts(上)

2023-10-07 01:32

本文主要是介绍我为何放弃Gulp与Grunt,转投npm scripts(上),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

本文来源于我在InfoQ中文站翻译的文章,原文地址是:http://www.infoq.com/cn/news/2016/02/gulp-grunt-npm-scripts-part1


Cory House是“Building Applications with React and Flux”与“Clean Code: Writing Code for Humans”的作者,同时也是Pluralsight上众多课程的讲师。他是VinSolutions的软件架构师,在全球培训了为数众多的软件开发者,主要领域是前端开发与整洁代码等软件开发实践。Cory是微软MVP、Telerik开发者专家,同时也是outlierdeveloper.com的创始人。目前,围绕着Gulp、Grunt及npm scripts社区展开了很多争论,讨论Gulp与Grunt在项目中是否还有继续使用的必要。有人坚持认为Gulp与Grunt等前端构建工具依然是不可或缺的,还有些人则认为Gulp与Grunt是完全没必要使用的,而且还增加了一层抽象,会导致很多问题。近日,Cory撰文谈到了他对于Gulp、Grunt与npm scripts的认识,并且认为在现在的工程中,我们完全可以抛弃Gulp与Grunt,使用npm scripts就可以满足项目之所需。

众所周知,Gulp与Grunt是很多项目所使用的构建工具,他们也拥有非常丰富的插件。不过,我却认为Gulp与Grunt是完全不必要的抽象,npm scripts更加强大,并且更易于使用。

我本人是Gulp的粉丝。不过在上一个项目中,gulpfile竟然有100多行,而且还使用了不少Gulp插件。我尝试通过Gulp集成Webpack、Browsersync、热加载、Mocha等工具,为什么要这么做呢?这是因为有些插件的文档实在是太不充分了;还有些插件只公开了我所需的部分API。其中有个插件存在一个奇怪的Bug,它只能看到文件的部分内容。另一个插件则在输出到命令行时丢失了颜色。

当然了,这些问题都是可以解决的;不过,当我直接使用这些工具时,所有问题都不复存在了。最近,我注意到有很多开源项目只是使用了npm scripts。因此,我决定重新审视一下自己的做法。我真的需要Gulp么?答案就是:完全不需要。我决定在我新的开源项目中只使用npm scripts。我只使用npm scripts为一个React应用搭建了开发环境与构建流程。想知道这个项目是什么样子的么?看一下React Slingshot吧。现在,相对于Gulp来说,我更倾向于使用npm scripts,下面就来谈谈原因。

Gulp与Grunt怎么了?

随着时间的流逝,我发现诸如Gulp与Grunt等任务运行器都存在以下3个核心问题:

  • 对插件作者的依赖
  • 令人沮丧的调试
  • 脱节的文档

下面就来详细分析上述3个问题。

问题1:对插件作者的依赖

在使用比较新或是不那么流行的技术时,可能根本就没有插件。当有插件可用时,插件可能已经过时了。比如说,Babel 6前一阵发布了。其API变化非常大,这样很多Gulp插件都无法兼容于最新的版本。在使用Gulp时,我就感到深深的受伤,因为我所需要的Gulp插件还没有更新。在使用Gulp或是Grunt时,你不得不等待插件维护者提供更新,或是自己修复。这会阻碍你使用最新版现代化工具的机会。与之相反,在使用npm scripts时,我会直接使用工具,不必再添加一个额外的抽象层。这意味着当新版本的Mocha、Istanbul、Babel、Webpack、Browserify等发布时,我可以立刻就使用上新的版本。对于选择来说,没有什么能够打败npm:

从上图可以看到,Gulp有将近2,100个插件;Grunt有将近5,400个;而npm则提供了227,000多个包,同时还以每天400多个的速度在持续增加。

在使用npm scripts时,你无需再搜索Grunt或是Gulp插件;只需从227,000多个npm包中选择就行了。公平地说,如果所需要的Grunt或是Gulp插件不存在,你当然可以直接使用npm packages。不过,这样就无法再针对这个特定的任务使用Gulp或是Grunt了。

问题2:令人沮丧的调试

如果集成失败了,那么在Grunt和Gulp中调试是一件令人沮丧的事情。因为你面对的是一个额外的抽象层,对于任何Bug来说都有可能存在更多潜在的原因:

  • 基础工具出问题了么?
  • Grunt/Gulp插件出问题了么?
  • 配置出问题了么?
  • 使用的版本是不是不兼容?

使用npm scripts可以消除上面的第2点,我发现第3点也很少会出现,因为我通常都是直接调用工具的命令行接口。最后,第4点也很少出现,因为我通过直接使用npm而不是任务运行器的抽象减少了项目中包的数量。

问题3:脱节的文档

一般来说,我所需要的核心工具的文档质量总是要比与之相关的Grunt和Gulp插件的好。比如说,如果使用了gulp-eslint,那么我就要在gulp-eslint文档与ESLint网站之间来回切换;不得不在插件与插件所抽象的工具之间来回切换上下文。Gulp与Grunt的问题在于:光理解所用的工具是远远不够的。Gulp与Grunt要求你还得理解插件的抽象。

大多数构建相关的工具都提供了清晰、强大,且具有高质量文档的命令行接口。ESLint的CLI文档就是个很好的例子。我发现在npm scripts中阅读并实现一个简短的命令行调用会更加轻松,阻碍更少,也更易于调试(因为并没有抽象层存在)。既然已经知道了痛点,接下来的问题就在于,为何我们觉得自己还需要诸如Gulp与Grunt之类的任务运行器呢?

我相信个中原因应该是因人而异的。毫无疑问,Gulp与Grunt等任务运行器已经出现很长一段时间了,而且围绕着这些任务运行器的插件生态圈也呈现出欣欣向荣的繁荣景象。依赖于这些插件,很多日常工作都可以实现自动化,并且运行良好。这样,人们就会认为只有通过这些任务运行器才能实现任务的构建、文件的打包、工作流的良好运行等等。另外一个原因就是人们对于npm scripts的认识还远远不够;对于npm scripts所能完成的事情与任务也流于表面。这也进一步造成了很多人并没有发现npm scripts可以实现很多日常开发时的构建任务的结果。我相信随着开发者对于npm scripts认识的进一步深入,大家会逐步发现原来使用npm scripts也可以完成Gulp与Grunt等任务运行器所能完成的任务,而且配置更加简单,也更加直接,因为它会直接使用目标工具而不必再使用对目标工具的包装器了。

在本系列的下一篇文章中,我们就来看看npm scripts为人所忽视的原因,以及使用npm scripts能够完成哪些事情。

这篇关于我为何放弃Gulp与Grunt,转投npm scripts(上)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/155219

相关文章

[vue小白]npm run运行以后无法关闭

开启vue任务后,关闭git bash窗口发现端口仍然被占用,程序没有关闭 通过查询资料,大部分都说ctrl+c就可以了,但是经过实践发现并不可行,目测大部分都是复制粘贴的答案。 经过尝试,最终发现可能只能暴力关闭了 1.在cmd中输入netstat -ano查询占用端口号的pid 2. 然后在任务管理器中查询对应的任务并关闭 3. 在linux系统中更简单,直接kill -9 pid即可

浅谈NODE的NPM命令和合约测试开发工具HARDHAT

$ npm install yarn -g  # 将模块yarn全局安装 $ npm install moduleName # 安装模块到项目目录下 默认跟加参数 --save 一样 会在package文件的dependencies节点写入依赖。   $ npm install -g moduleName # -g 的意思是将模块安装到全局,具体安装到磁盘哪个位置,要看 npm root -g

【解决bug之路】npm install node-sass(^4.14.1)连环报错解决!!!(Windows)

有关node-sass的深入分析可参考:又报gyp ERR!为什么有那么多人被node-sass 坑过? 主要有如下三方面错误,请自查: 1.node,npm版本需与node-sass版本匹配,像node-sass(^4.14.1)就得node 14.x版本才可以,node 16不行 gyp ERR! build error15 gyp ERR! stack Error: `

rust 命令行工具rsup管理前端npm依赖

学习了一年的 rust 了,但是不知道用来做些什么,也没能赋能到工作中,现在前端基建都已经开始全面进入 rust 领域了,rust 的前端生态是越来越好。但是自己奈何水平不够,想贡献点什么,无从下手。 遂想自己捣鼓个什么东西,可以帮助到日常工作的。 记录一下在完成功能时遇到的一些问题,以及是怎么解决的。 解决的需求 公司有很多项目,都是依赖公司技术部门的一个框架,虽然说不行,但还是要用,里

npm i --legacy-peer-deps

npm ERR! Fix the upstream dependency conflict, or retrynpm ERR! this command with --force, or --legacy-peer-depsnpm ERR! to accept an incorrect (and potentially broken) dependency resolution. 1、原因

Update Azure OpenAI npm Package to 2023-12-01-preview Version

题意:将 Azure OpenAI npm 包更新到 2023-12-01-preview 版本 问题背景: I am currently using the azure-openai npm package in my project with version 2023-03-15-preview. As per the latest updates, version 2023-12

Nexus配置npm私服

1,配置npm-hub 2,配置proxy-npm 3,配置group-npm 4,配置local-npm 5,配置淘宝

npm全局模块卸载及默认安装目录修改

卸载全局安装模块 npm uninstall -g 卸载后,你可以到 /node_modules/ 目录下查看包是否还存在,或者使用以下命令查看:npm ls npm的指令还是要多看英文文档,如https://docs.npmjs.com/。 查看所有全局安装的模块 npm ls -g 查看npm默认设置(部分) npm config ls 查看npm默认设置(全部) npm config

解决npm i 安装报npm ERR! code E401

1、前端去维护项目时,通过 git clone 下来以后,经常是直接 npm i 去安装项目需要的依赖,但是往往很多项目不是我们自己写的,或者从 GitHub 上面 clone 的开源项目,这个时候出现问题就很难处理,这里分享下安装依赖报npm ERR! code E401 2、错误截图 3、一开始按照提示信息使用npm login登录了npm账号密码 ,然后重新跑npm i,结果依旧报这

npm install 下载异常原因之一

问题 npm ERR! code CERT_HAS_EXPIREDnpm ERR! errno CERT_HAS_EXPIREDnpm ERR! request to https://registry.npm.taobao.org/yorkie/download/yorkie-2.0.0.tgz failed, reason: certificate has expired 原因 n