nodejs 节点

nodejs 节点

If you’re intimidated, exhausted or irritated by Gulp, Grunt, NPM, Yeoman, and all the other NodeJS tools that aim to help but often do the opposite, a good asset management workflow is possible in PHP, and this tutorial aims to prove it. In this article, we’ll go through a NodeJS-free PHP front end asset management setup.

如果您对Gulp，Grunt，NPM，Yeoman以及所有其他旨在帮助但往往相反的NodeJS工具感到恐惧，疲惫或烦恼， 则可以在PHP中使用良好的资产管理工作流程，本教程旨在证明它。 在本文中，我们将介绍无NodeJS的 PHP前端资产管理设置。

我们会做什么 (What we’ll be doing)

We’ll be adding asset management into a Slim 3 project. We’ll be using Rob Allen’s Slim3 Skeleton as a base “app”, along with:

我们将资产管理添加到Slim 3项目中。 我们将使用Rob Allen的Slim3 Skeleton作为基本的“应用程序”，以及：

BowerPHP instead of Bower for installing assets

BowerPHP代替Bower来安装资产

markstory/mini-asset for minification

最小化的商标/迷你资产

Robo for resource tracking (watching for changes) and executing a rebuild (minification) when a change is detected

Robo用于资源跟踪(监视更改)并在检测到更改时执行重建(最小化)

Why mini-asset and not Munee or Assetic? Because it’s dead simple – configure with an .ini file, run, and it executes. No server alterations, no in-depth configuration, ready to go OOTB.

为什么选择迷你资产而不是Munee或Assetic？ 因为它非常简单-使用.ini文件进行配置，运行并执行。 无需更改服务器，无需进行深入配置，即可开始使用OOTB。

Note that Slim 3 is used here only as a base app, and doesn’t really matter in the whole picture – we won’t be using any of Slim’s particular functionality. As such, you can use any framework you want, or skip using a framework altogether. We’ll be using Homestead Improved as usual to set up a local dev environment.

请注意，此处Slim 3仅用作基本应用程序，并且在整个画面中并不重要-我们将不会使用Slim的任何特定功能。 这样，您可以使用所需的任何框架，也可以完全跳过框架。 我们将像往常一样使用Homestead改良版来建立本地开发环境。

入门 (Getting Started)

git clone https://github.com/swader/homestead_improved hi_assets cd hi_assets bin/folderfix.sh sed -i '' "s@Project@test@g" Homestead.yaml vagrant up vagrant ssh

The sed line is a shortcut to editing the Homestead.yaml file – it will replace the word Project with test, so our app can be in the test folder rather than Project. This is purely personal preference. If any of this is confusing, please see this introduction to Vagrant.

sed行是编辑Homestead.yaml文件的快捷方式-它将用test代替Project一词，因此我们的应用程序可以位于test文件夹中，而不是Project 。 这纯粹是个人喜好。 如果有任何混淆，请参阅Vagrant的简介 。

As soon as these commands execute, we should be able to get the No input file specified error when visiting homestead.app/ in the browser, provided we have homestead.app added to /etc/hosts on the host operating system, as per instructions.

一旦执行了这些命令，只要按照说明 ，我们将homestead.app添加到主机操作系统上的/etc/hosts ，我们就应该能够在浏览器中访问homestead.app/时得到No input file specified错误。 。

Let’s set up the skeleton now.

让我们现在设置骨架。

cd Code composer create-project -n -s dev akrabat/slim3-skeleton test cd test

Simple enough. That should produce a screen not unlike this one:

很简单。 那应该会产生一个与这个屏幕不同的屏幕：

Finally, let’s install the other prerequisites. BowerPHP isn’t in stable status yet, so we need to allow Composer to download beta packages. Open the global configuration file with:

最后，让我们安装其他先决条件。 BowerPHP尚未处于稳定状态，因此我们需要允许Composer下载Beta软件包。 使用以下命令打开全局配置文件：

composer global config -e

and add in the following statement:

并添加以下语句：

"minimum-stability": "beta"

Now, we can install beta packages.

现在，我们可以安装beta软件包。

composer global require beelab/bowerphp codegyre/robo markstory/mini-asset natxet/CssMin --dev

Note that mini-asset will suggest installing some other packages, each specific to a context you might require. The CssMin package is one such addition – without it, mini-asset wouldn’t be able to handle CSS files. Refer to the suggestions list the installation procedure outputs for more filter packages you might need.

请注意， mini-asset将建议安装其他一些软件包，每个软件包都特定于您可能需要的上下文。 CssMin软件包就是这样的一种补充-如果没有它， mini-asset将无法处理CSS文件。 请参阅安装过程输出的建议列表，以获取您可能需要的更多过滤器软件包。

We now have all the prerequisites in place. Let’s start dealing with assets.

现在，我们已经具备了所有先决条件。 让我们开始处理资产。

资产管理 (Asset Management)

The bare bones Slim3 skeleton from Rob is a bit plain – no standardized stylesheets or front end frameworks attached (as it should be in any framework, in my opinion). Let’s change that.

Rob的Slim3裸露骨骼有点平淡-没有标准化的样式表或前端框架(在我看来，它应该存在于任何框架中)。 让我们改变它。

通过BowerPHP进行引导 (Bootstrap via BowerPHP)

Let’s add in Bootstrap, and just for kicks, Bootstrap-social – this will allow us to demonstrate the merging of various CSS files along with letting us use social network button styles in our front end.

让我们添加Bootstrap，而对于Bootstrap-social来说 ，这只是个踢腿-这将使我们能够演示各种CSS文件的合并，并允许我们在前端使用社交网络按钮样式。

cd ~Code/test bowerphp install bootstrap bowerphp install bootstrap-social

A bower_components folder should now be in the test folder, containing everything we requested. We could install the components into public and use them directly in our layout code (see app/templates/home.twig), but that’s horribly inefficient, if great for debugging styles. Let us instead produce the CSS we need in a filtered, concatenated and minified manner. This is where mini-asset comes in.

现在， bower_components文件夹应该位于test文件夹中，其中包含我们要求的所有内容。 我们可以将组件安装到public ，然后直接在布局代码中使用它们(请参阅app/templates/home.twig) ，但这效率非常低，如果非常适合调试样式。 让我们以过滤，连接和缩小的方式生成所需CSS。 这是mini-asset来源。

迷你资产 (Mini-Asset)

As per the documentation, mini-asset is configured via an .ini file. Let’s add the assets.ini file to the root of our project:

根据文档 ，通过.ini文件配置mini-asset 。 让我们将assets.ini文件添加到项目的根目录：

[css] cachePath = public/css/build paths[] = bower_components/* filters[] = CssMinFilter [app.css] files[] = bootstrap/dist/css/bootstrap.min.css files[] = font-awesome/css/font-awesome.css files[] = bootstrap-social/bootstrap-social.css files[] = public/css/style.css

As per the bootstrap-social docs, we need to include Bootstrap, FontAwesome, and Bootstrap-social in our HTML. That’s exactly what we did above by merging the different libraries.

根据bootstrap-social文档，我们需要在HTML中包含Bootstrap，FontAwesome和Bootstrap-social。 这正是我们上面通过合并不同的库所做的。

cachePath tells mini-asset where to put our compiled CSS. Paths lists all the locations in which CSS files can be found. Filters lists all the additional packages used for processing the assets. In our case, it’s just the aforementioned CSSMin package.

cachePath告诉mini-asset将编译后CSS放在哪里。 路径列出了可以在其中找到CSS文件的所有位置。 过滤器列出了用于处理资产的所有其他软件包。 在我们的例子中，它只是前面提到CSSMin包。

The next section lists compiled CSS files, one by one, and the files they consist of.

下一节将逐一列出已编译CSS文件及其组成的文件。

If we now run mini-asset (and create the cachePath folder first, of course), we should get a compiled CSS file as output.

如果现在运行mini-asset (当然，首先要创建cachePath文件夹)，则应该获得一个已编译CSS文件作为输出。

mkdir public/css/build mini_asset build --config assets.ini

A final tweak we need to do is copy the fonts subfolder of font-awesome into public/css, because the paths in the compiled CSS are relative, and go up one folder to find the font. A compiled file placed in build won’t have the fonts one folder up, so we need to put them there:

我们需要做的最后一个调整是将font-awesome的fonts子文件夹复制到public/css ，因为已编译CSS中的路径是相对的，然后在一个文件夹中查找字体。 放置在build编译文件不会在一个文件夹中放置fonts ，因此我们需要将它们放在这里：

cp -R bower_components/font-awesome/fonts public/css/

Now we can replace the style link in home.twig file with this one:

现在，我们可以用以下内容替换home.twig文件中的样式链接：

<link href='/css/build/app.css' rel='stylesheet' type='text/css'>

We can also throw in a social bootstrap button for good measure, just to make sure it works.

我们也可以添加一个社会引导按钮，以确保它可以正常工作。

<a class="btn btn-small btn-social btn-twitter"> <i class="fa fa-twitter"></i> Sign in with Twitter </a>

机器人 (Robo)

At this point, it’s easy enough to re-run the compilation every time one makes an important change to the style files, but why not automate things? Robo is here to help. There are other watchers out there, too, but Robo is such a robust and versatile task runner, it would be a shame not to use it. In fact, Robo has its own asset processing built in, but given that many might opt not to use Robo in the first place, this tutorial followed a more decoupled path. Feel free to use its asset pipeline if it feels better than mini-asset, though – the sky’s the limit!

在这一点上，每次对样式文件进行重要更改时都很容易重新运行编译，但是为什么不自动化呢？ 机械人在这里为您提供帮助。 也有其他观察者 ，但是Robo如此健壮且用途广泛的任务运行器，不使用它会很可惜。 实际上，Robo内置了自己的资产处理程序 ，但是考虑到许多人可能一开始都不选择使用Robo，因此本教程采用了更为分离的方法。 不过，如果感觉比mini-asset还好，请随意使用其资产管道-天空无极限！

To run, Robo needs a RoboFile.php in the working directory. Robo can create that file for us if we just run it in a folder where there is no such file:

要运行，Robo需要在工作目录中包含RoboFile.php 。 Robo可以为我们创建该文件，只要我们在没有此类文件的文件夹中运行它即可：

> robo RoboFile.php not found in this dir ? Should I create RoboFile here? (y/n) y RoboFile.php created

The idea is to trigger a rebuild of the app.css file every time style.css in public/css changes – that’s the user’s custom stylesheet, and it’s where we’ll be putting our own styles to override or use the ones included before them (Bootstrap, etc.)

这个想法是每次更改public/css style.css触发一次app.css文件的重建–这是用户的自定义样式表，在这里我们将放置自己的样式以覆盖或使用之前包含的样式。 (引导程序等)

First, let’s set up a watcher and see if it triggers every time the file changes. This is done by defining a public method in RoboFile which houses the watching commands:

首先，让我们设置一个观察器，看看它在每次文件更改时是否触发。 这是通过在RoboFile定义一个包含监视命令的公共方法来完成的：

public function build() { $this->taskWatch() ->monitor('public/css/style.css', function () { $this->say("style.css changed!"); })->run(); }

If we launch the watcher now and change the CSS file, Robo will alert us to it.

如果我们现在启动观察程序并更改CSS文件，则Robo会提醒我们注意它。

> robo build [Watch] Watching public/css/style.css for changes... ➜ style.css changed!

Now all that’s left is triggering a mini-asset rebuild on change. This is done with the _exec or taskExec command:

现在剩下的就是触发更改后的mini-asset重建。 这是通过_exec或taskExec命令完成的：

public function build() { $this->taskWatch() ->monitor('public/css/style.css', function () { $this->say("Starting CSS rebuild"); $this->_exec('mini_asset build --config assets.ini'); $this->say("CSS rebuilt successfully!"); })->run(); }

And that’s all it took – re-running Robo, we now have an auto-rebuild file-watcher active which recompiles CSS files on every change.

仅此而已–重新运行Robo，我们现在有了一个自动重建的文件监控器，它可以在每次更改时重新编译CSS文件。

> robo build [Watch] Watching public/css/style.css for changes... ➜ Starting CSS rebuild [Exec] Running mini_asset build --config assets.ini .Complete [Exec] Done in 0.556s ➜ CSS rebuilt successfully! ➜ Starting CSS rebuild [Exec] Running mini_asset build --config assets.ini .Complete [Exec] Done in 0.558s ➜ CSS rebuilt successfully!

结论 (Conclusion)

In this tutorial, we looked at getting started with asset management (installation, concatenation, and minification) in PHP projects. We saw that NodeJS is unnecessary for this aspect of development and isn’t worth the extra trouble.

在本教程中，我们研究了PHP项目中资产管理(安装，串联和缩小)的入门。 我们看到，NodeJS对于这方面的开发是不必要的，并且不值得为此付出额外的麻烦。

We used BowerPHP as a replacement for Bower, mini-asset to concat and minify, and Robo to watch for changes and trigger the minification task. With this knowledge, you should now be able to compile more complex assets, including LESS to CSS, JavaScript, and more.

我们使用BowerPHP代替Bower，使用迷你资产进行合并和缩小，并使用Robo监视更改并触发缩小任务。 有了这些知识，您现在应该能够编译更复杂的资产，包括LESS到CSS，JavaScript等。

Do you use a different approach? Let us know in the comments!

您是否使用其他方法？ 让我们在评论中知道！

翻译自: https://www.sitepoint.com/look-ma-no-nodejs-a-php-front-end-workflow-without-node/

nodejs 节点