将 grunt 与现有的 wordpress 实例一起使用

Use grunt with an existing wordpress instance

本文关键字：实例 一起 wordpress grunt      更新时间：2023-09-26

在这种情况下，我试图弄清楚如何缩小和组合 js/css 代码：

  • 我购买了一个主题，但没有开发它
  • 我正在使用几个插件。它们很有用，但它们输出了一些非常丑陋的代码（很多内联CSS和js，主要是带有完整注释的开发代码）
我对咕噜

咕噜相当陌生，我过去曾在自定义 Web 应用程序中使用它，但从未在 wordpress 中使用过，我想知道当您有很多 PHP 脚本/插入注入其丑陋代码时，它是否有帮助。

所以我的问题是：有没有办法让 grunt 与 wordpress 一起工作，以便在上述情况下提供生产代码？如果是这样，如何？

恐

怕如果不修改这些插件，就无法实现您正在寻找的内容。

Grunt 只是一个 JavaScript 任务运行程序 - 它没有 Web 应用程序的意义，无论是 WordPress 还是自定义的东西。你给Grunt一些输入，你告诉它如何处理这些输入，它就做到了。因此，为了使用 Grunt 缩小和连接您网站上的所有 JavaScript 和 CSS，您必须从插件中提取它并将其放入适当的文件结构中。

一般来说，当一个插件坚持内联一堆JavaScript和/或CSS时，它不是一个很好的插件。例如，我的团队使用 gulp.js（类似于 Grunt）进行许多 WordPress 前端开发（连接、缩小、指纹识别、自动前缀等），我们非常讲究我们使用哪些插件（如果有的话）——其中一个原因正是你的问题。

你的计划似乎有点混乱。在最好的情况下，假设您已经配置并使用了一个简单的Grunt任务，以便缩小WordPress实例使用的所有CSS和JS。

这意味着你必须挖掘你的代码，找到你的每个插件获取样式或脚本的位置，切断它们并使用Grunt缩小它们。之后，您应该拿起最终缩小的文件并将其再次注入您的 Wordpress 实例。

除了您必须进行大量自定义编码之外，更新插件还会给您带来很多痛苦。

为了坚持可扩展且易于遵循的计划，我建议使用 BWP minify 插件，它将照顾您的样式和脚本，它提供 CDN 支持。

然后，您可以使用 Grunt 作为代码质量检查机制。Uncss 是一个很棒的工具，可帮助您查找未使用的样式。Grunt-usemin也是一个很好的解决方案。

最后，当我看到你愿意转向命令行工具时，我强烈建议你看看WP-CLI，它是Wordpress的一个很棒的命令行界面。

您可以使用插件将资产取消排队，也可以手动取消排队，然后告诉 grunt 将它们连接并缩小。

本文可能会为您提供所需的内容 http://css-tricks.com/taking-control-cssjs-wordpress-plugins-load/

如果你愿意花必要的时间将你的JS分成模块，那么从长远来看，grunt-browserify可能对你有用。但是，如前所述，这需要从插件文件中提取相关代码。

对于CSS缩小，grunt-contrib-cssmin值得一看。我也喜欢在测试或部署之前更改CSS中的相对路径的grunt-text-replacement（如果你不开发直接到Wordpress，这可能会加剧）。

查看FoundationPress-child主题，它使用grunt和其他一些不错的工具和库。我使用它作为我为我的客户制作的 WP 网站的基础。这是一个很好的起点，还有VCCW。

https://github.com/thetrickster/FoundationPress-child

https://github.com/vccw-team/vccw

相关文章：