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

【问题标题】：Use grunt with an existing wordpress instance将 grunt 与现有的 wordpress 实例一起使用
【发布时间】：2015-03-21 23:22:05
【问题描述】：

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

我购买了一个主题，没有开发它
我正在使用几个插件。它们很有用，但会输出一些非常难看的代码（大量内联 CSS 和 js，主要是带有完整 cmets 的开发代码）

我对 grunt 还很陌生，我过去曾在自定义 Web 应用程序中使用过它，但从来没有使用过 wordpress，我想知道当您有大量 PHP 脚本/插件注入它们丑陋的代码时，它是否可以提供帮助。

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

【问题讨论】：

具体来说，您希望 Grunt 为您做什么？
我认为他希望 grunt 能够组合、缩小和压缩样式和脚本。这对于 SCSS 或 LESS 和 CoffeeScript 或 Javascript 来说是理想的。

标签： javascript php css wordpress gruntjs

【解决方案1】：

如果不修改这些插件，恐怕无法实现您的目标。

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

一般来说，当一个插件坚持内联一堆 JavaScript 和/或 CSS 时，它就不是一个很好的插件。例如，我的团队使用 gulp.js（类似于 Grunt）进行大量 WordPress 前端开发（连接、缩小、指纹识别、自动前缀等），而且我们对使用哪些插件非常挑剔（如果有的话） - 原因之一就是您的问题是关于什么的。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

您可以使用插件将资产出列或手动出列，然后告诉 grunt 连接并缩小它们。

这篇文章可能会给你你想要的http://css-tricks.com/taking-control-cssjs-wordpress-plugins-load/

【讨论】：

请注意，这篇 CSS-Tricks 文章主要涉及添加 JS 和 CSS files 的插件 - 而不是 inline 样式和脚本，如问题所述.话虽如此，它确实为处理坚持添加自己的样式表和脚本的插件提供了很好的解决方案。

【解决方案4】：

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

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

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

为了坚持可扩展且易于遵循的计划，我建议使用BWP minify plugin，它会处理您的样式和脚本，它提供 CDN 支持。

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

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

【讨论】：

【解决方案5】：

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

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

【讨论】：