内容
JavaScript任务运行程序（例如Grunt）在前端开发人员中非常受欢迎。这是因为他们有助于完成我们所有人都希望做的一件事–节省时间！
但是，由于现在有超过5,000个（并且还在增加）Grunt插件可用，开发人员可能很难找到那些“粗糙的钻石”。我们回顾了我们停留在Grunt上的时间，以查找您应该使用的Grunt插件的完美配方。
01.丑化
每个精打细算的前端开发人员都知道最小化JavaScript文件的优势，而这正是此插件的作用。这就是它的受欢迎程度，它实际上包含在《 Grunt入门指南》中。尽管有此名称，该插件也可以用于美化您的JavaScript代码-尽管对于生产用途并不是特别有用。
02.萨斯
关于哪个CSS预处理程序确实可以控制位置可能会引起一些争论，但是在Stickyeyes，我们选择了Sass而不是其主要竞争对手Less。该插件使我们能够编写Sass文件，并将它们自动编译为CSS。使用CSS预处理程序的优点本身就需要单独撰写，但可以肯定地说，如果您尚未使用CSS预处理程序，那么晚会很晚！
03. CSSMin
此插件与Uglify的CSS等效。它只是获取任何指定的CSS文件并将其最小化。当然，如果您要将其与Sass插件结合使用，则需要确保此任务在Sass任务之后运行。
CSSMin有很多替代方法，它们也可以使用略有不同的技术来减小CSS文件的大小。 CSS nano，CSS拧紧，CSS收缩等。如果您喜欢这种类型的手册，请阅读此便捷的基准。
04.康卡特
顾名思义，此插件仅需要多个文件并将它们串联到一个文件中。与最小化代码一样，串联文件也是减少页面加载时间的古老最佳实践。
文件串联应始终在JavaScript和CSS的生产中使用。通常这是要执行的最后一项任务–在CSS预处理任务和缩小任务之后。只需告诉此插件将特定目录中的所有文件连接起来很容易，但是要注意文件将被连接的顺序–您可能需要指定特定的顺序或命名文件，以便它们始终按照您想要的顺序进行连接。
05. ImageMin
与CSSMin和Uglify一样，ImageMin解决了页面加载的另一个古老问题-图像文件大小。图像“缩小”通常是优化的首要考虑因素，因此该插件对于尽可能减小页面文件的总大小至关重要。
如果您使用的是JPG，PNG，GIF或SVG（一种越来越流行的矢量图像格式），则此插件将使图像的文件大小无损减小，而无需您费劲。如果您的项目中有很多图像，则最好仅在进行生产时才运行此任务，而不要在监视事件上运行此任务（请参阅下一点）。
06.看
该插件实际上并不影响您的网站前端，但是在创建有效的Grunt流程中非常有用。 Watch仅监视您指定的任何目录，一旦更改，它将自动触发某些Grunt任务。
因此，您可以在“ js”目录中设置一个监视条件来运行JavaScript任务，而在“ css”目录中设置另一个监视条件以运行CSS任务。这意味着您将不必手动运行主要的Grunt流程！在开始进行更改之前，只需初始化“咕watch声”监视任务，就可以忘记它的存在。
字： 杰米·希尔兹（Jamie Shields）
Jamie Shields是数字营销机构Stickyeyes的后端开发人员。
像这样？读这个！
- Grunt vs Gulp：您应该选择哪种JavaScript构建工具？
- 改善Grunt设置的8种方法
- 最好的免费WordPress主题
