yslow_YSlow开发：设置

yslow

As promised, let's setup for YSlow development using the easiest option - the bookmarklet version. The journey of conquering the world with your rules and extensions... starts with the first step.

如所承诺的，让我们使用最简单的选项-小书签版本来设置YSlow开发。用您的规则和扩展征服世界的旅程……从第一步开始。

退房 (Checkout)

First you need to get teh codez. Go to the Github repository and click that big ol' Fork button. Then checkout the repository somewhere.

首先，您需要获取Codez。转到Github存储库，然后单击那个大的Fork按钮。然后在某处签出存储库。

Alternatively, if you don't have a github account and don't care to install and deal with git on your computer, this is OK. Just download the repository as a 1.1MB zip file from:

或者，如果您没有github帐户，并且不关心在计算机上安装和处理git，则可以。只需从以下位置以1.1MB的zip文件下载存储库：

https://github.com/marcelduran/yslow/zipball/master

使 (Make)

For this next step you need make. Good luck if you're on Windows. On Mac, seems like the most "blessed" version you can by installing this package called Command Line Tools for Xcode. Which (I'm not sure but probably) also requires Xcode. Xcode in the App Store. It's about 1.5GB. You go, I'll wait.

对于下一步，您需要make 。如果您使用Windows，祝您好运。在Mac上，似乎可以通过安装称为Xcode的命令行工具的软件包来获得最“祝福”的版本。哪一个(我不确定但可能)也需要Xcode。 App Store中的Xcode。大约1.5GB。你走，我等。

In the top directory of the code you've downloaded, there's a readme and /src (where it gets interesting) and a Makefile.

在您下载的代码的顶层目录中，有一个自述文件和/ src (在其中很有趣)和一个Makefile 。

Since we're building the bookmarklet we'll go like:

由于我们正在构建小书签，因此我们将像这样：

$ make bookmarklet

But. Not yet. First things first.

但。还没。首先是第一件事。

The bookmarklet consists of one largish JS file and one smallish CSS. The bookmark that you'll click in the browser will load the JS file. Then the JS needs to know where to find the CSS. So you need a big of config.

书签由一个较大的JS文件和一个较小CSS组成。您将在浏览器中单击的书签将加载JS文件。然后，JS需要知道在哪里可以找到CSS。因此，您需要大量的配置。

If you look in /src/bookmarklet you'll see some config-*.js files. You need a new one for you too.

如果您查看/ src / bookmarklet ，则会看到一些config-*。js文件。您也需要一个新的。

Let's say you'll host the bookmarklet at http://www.phpied.com/files/yslow.

假设您将在http://www.phpied.com/files/yslow托管书签。

You start by copying config-local.js:

首先复制config-local.js：

$ cp src/bookmarklet/config-local.js src/bookmarklet/config-phpied.js

Next you edit one line there so it looks like:

接下来，您在此处编辑一行，如下所示：


YUI.add('yslow-config', function (Y) {
Y.namespace('YSLOW').config = {
host: 'http://www.phpied.com/files/yslow/',
js: '{{BOOKMARKLET_JS}}',
css: '{{BOOKMARKLET_CSS}}'
};
});

Now, time to build! All you need is to run `make` pointing to your config:

现在，该建造了！您所需要做的就是运行`make`指向您的配置：

$ make bookmarklet config="config-phpied.js"
building YUI...
done
building BOOKMARKLET files...
done
merging YUI and BOOKMARKLET...
done

Now look what you've done! You've created a directory build/bookmarklet

现在看看你做了什么！您已创建目录build/bookmarklet

$ ls build/bookmarklet/
yslow-bookmarklet.js    yslow-style.css

(you can also do `make pkg-bookmarklet` to create a minified version, but let's keep things readable for now)

(您也可以执行“ make pkg-bookmarklet”来创建缩小版本，但让我们暂时保持可读性)

主办 (Host)

Now you need to copy the .js and .css to a server of your choosing, be it localhost or now. I'd go:

现在，您需要将.js和.css复制到您选择的服务器，无论是本地主机还是现在。我去：

$ scp build/bookmarklet/* username@perfplanet.com:~/phpied.com/files/yslow

安装书签 (Install bookmarklet)

If you've already installed the YSlow bookmarklet in your browser, you can go and edit the location of the JS file. If not, visit http://yslow.org/mobile for the instructions.

如果您已经在浏览器中安装了YSlow小书签，则可以编辑JS文件的位置。如果没有，请访问http://yslow.org/mobile获取说明。

This page will update the hash in the url to:

该页面会将网址中的哈希值更新为：

http://yslow.org/mobile/#javascript:.....more stuff...

All you need to do is change yslow.org to your location, e.g. phpied.com/files/yslow.

您需要做的就是将yslow.org更改为您的位置，例如phpied.com/files/yslow 。

Then bookmark the page.

然后将页面添加为书签。

Then edit the bookmark and remove everything up to and including the hash # (http://yslow.org/mobile/#)

然后编辑书签并删除所有内容，直到并包括＃号(http://yslow.org/mobile/#)

跑 (Run)

Go to a page of your choosing
转到您选择的页面
Click the bookmarklet
点击书签
See YSlow UI appears
看到出现YSlow UI

It works so well that you even need to look at a network analyzer to believe it's really using your own hosted version.

它运行得非常好，您甚至需要查看网络分析仪以确保它确实在使用您自己的托管版本。

And your own version is just a big javascript really, so there's nothing new and nothing extension-y to learn like XUL or manifest.json. You can just start tinkering immediately. You can even edit that .js file directly and make it like a real tight web programming loop: save-refresh. Or you can edit source files and rebuild, repush combining the make and scp commands. Let's do that.

而且您自己的版本确实只是一个大型javascript，因此没有什么新东西，也没有扩展名-y像XUL或manifest.json这样学习。您可以立即开始修补。您甚至可以直接编辑该.js文件，并使其像真正的紧缩Web编程循环一样：save-refresh。或者，您可以编辑源文件，然后重新生成，重新组合make和scp命令。来做吧。

控制台：最好的朋友 (Console: the best friend)

YSlow takes extra care to run unobtrusively to the page. In an iframe, not leaving any globals behind. Meh, I want to play in the console. So I want to access the two globals: YUI and YSLOW. Let's see how you add your codes to YSlow. That's as good an exercise as any.

YSlow会格外小心地运行到页面上。在iframe中，不要遗漏任何全局变量。嗯，我想在控制台上玩。因此，我想访问两个全局变量： YUI和YSLOW 。让我们看看如何将代码添加到YSlow。这和其他练习一样好。

Create a new file in a new dir like: mystuff/stuff.js with this in it:

在新目录中创建一个新文件，例如： mystuff/stuff.js其中包含以下内容：

parent.YUI = parent.YUI || YUI;
parent.YSLOW = YSLOW;

You know YSlow bookmarklet runs in an iframe, so we want to expose the iframe's two globals to the parent.

您知道YSlow小书签在iframe中运行，因此我们想向父对象公开iframe的两个全局变量。

Add your new file in the Makefile in the bookmarklet-files part:

在小bookmarklet-files部分的Makefile中添加新文件：


bookmarklet-files:
@echo "building BOOKMARKLET files..."
@if [ ! -d $(BUILD_BOOKMARKLET) ]; then mkdir -p $(BUILD_BOOKMARKLET); fi
@cat $(SRC_COMMON)/yslow.js \
$(SRC_COMMON)/version.js \
[....]
$(SRC_COMMON)/peeler.js \
$(SRC_COMMON)/peeler-bm-ch-ph.js \
$(SRC_BOOKMARKLET)/$(BM_CONFIG) \
mystuff/stuff.js \
$(SRC_BOOKMARKLET)/controller.js | \
sed s/{{YSLOW_VERSION}}/$(YSLOW_VERSION)/ | \
sed s/{{BOOKMARKLET_JS}}/$(BOOKMARKLET_JS)/ | \
sed s/{{BOOKMARKLET_CSS}}/$(BOOKMARKLET_CSS)/ \
> $(BUILD_BOOKMARKLET)/$(BOOKMARKLET_YSLOW_JS)

Then build and deploy:

然后构建并部署：

$ make bookmarklet config="config-phpied.js"; \
scp build/bookmarklet/* \
username@perfplanet.com:~/phpied.com/files/yslow

Now you can run the bookmarklet and start exploring what's available to you in the console:

现在，您可以运行书签并开始探索控制台中可用的功能：

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/yslow-development-setup/

yslow