gulp定义函数

gulp定义函数

Everyone wants to be unique. I guess you won’t be super happy if in your surroundings there are many people looking just like you, right? This holds true for the other people too. Your friends also won’t be happy to see clones of you everywhere. The same is true for our websites.

每个人都希望与众不同。 我想如果周围有很多人看起来像您，您不会感到非常高兴，对吗？ 其他人也是如此。 您的朋友也不会高兴到处都看到您的克隆。 我们的网站也是如此。

Nowadays, building a website with a front-end framework is common. The problem though is that many people blame such frameworks for making all websites “look the same”. But the tool isn’t to blame if developers aren’t willing to make the necessary customizations.

如今，建立具有前端框架的网站已经很普遍。 但是，问题在于，许多人将这种框架归咎于使所有网站“看起来都一样”。 但是，如果开发人员不愿意进行必要的自定义，则不必责怪该工具。

For those of you who want the websites you build to stand out from the crowd, I’ll demonstrate how you can use UIkit’s Customizer to create different themes and theme variations (styles). The process is straightforward, but you need a proper workflow to do it with a minimum amount of headache.

对于那些希望自己构建的网站在人群中脱颖而出的人，我将向您演示如何使用UIkit的定制程序来创建不同的主题和主题变体(样式)。 该过程很简单，但是您需要一个适当的工作流程来以最小的麻烦来完成它。

设置自定义 (Setting Up Customization)

Let’s say that you want to create a dark theme for your website with orange as an accent color. Also, you want two more variations of that theme with blue and green accent colors. Let’s see how we can do it. (Note: For the sake of brevity, I’ll use only buttons to demonstrate the process).

假设您要为网站创建一个深色主题，并使用橙色作为强调色。 另外，您还需要该主题的两个其他变体，分别带有蓝色和绿色的强调色。 让我们看看我们如何做到这一点。 (注意：为简洁起见，我将仅使用按钮来演示该过程)。

We’ll need to start with ensuring the following steps are complete:

我们首先需要确保完成以下步骤：

Download or clone the UIkit repository.

下载或克隆UIkit存储库 。

Install Node and Gulp, if you don’t have them already.

如果尚未安装Node和Gulp ，请安装它们。

Install UIkit’s development dependencies. You can do this by navigating to the UIkit root directory and running npm install from the terminal.

安装UIkit的开发依赖项。 您可以通过导航到UIkit根目录并从终端运行npm install来执行此操作。

When all of this is set up correctly, we can start creating our theme.

所有这些设置正确后，我们就可以开始创建主题了。

创建我们的主题 (Creating our Theme)

Still in the root directory, create a folder called “custom”. In that folder, create another one called “dark” and inside it create a file called uikit.less. Open the file and add the following:

仍在根目录中，创建一个名为“ custom”的文件夹。 在该文件夹中，创建另一个名为“ dark”的文件夹，并在其中创建一个名为uikit.less的文件。 打开文件并添加以下内容：

@import "../../src/less/uikit.less"; @import "button.less";

The first line will get all Less files from the core framework and the second line will import the file you’re going to use to modify the default UIkit buttons. Save and close the file and create the aforementioned button.less file in the same directory.

第一行将获取核心框架中的所有Less文件，第二行将导入您将用于修改默认UIkit按钮的文件。 保存并关闭文件，并在同一目录中创建上述button.less文件。

Before making any further customizations, you need to make your theme available locally in the Customizer. To do so, in the UIkit root directory, run the following in the terminal:

进行任何进一步的自定义之前，您需要在定制器中本地提供主题。 为此，请在UIkit根目录中的终端中运行以下命令：

gulp indexthemes

Now launch your local copy of the UIkit website (the one you installed) and click “Customizer” in the navigation bar. When you open the “Select a theme” drop-down list you should see “Dark” at the end of it. At this point, when you select it, you’ll see that there is no styling. Why not? Let’s see.

现在启动UIkit网站的本地副本(已安装的副本)，然后在导航栏中单击“定制程序”。 当您打开“选择主题”下拉列表时，应该在其末尾看到“深色”。 此时，当您选择它时，您将看到没有样式。 为什么不？ 让我们来看看。

One thing not mentioned in UIkit’s documentation and which can cost you a lot of headache, is that your theme needs a file called uikit-customizer.less. Create the file and add the following line:

UIkit文档中未提及的一件事是，您的主题需要一个名为uikit-customizer.less的文件，这可能会让您头疼。 创建文件并添加以下行：

@import "uikit.less"

You must put that file, with the above line, in the theme’s root directory (inside the “dark” folder, in our case). If this file is not present, you can’t use the Customizer properly – the theme’s name will appear in the list, but the styles will be missing.

您必须将上面一行的文件放在主题的根目录中(在本例中为“ dark”文件夹中)。 如果此文件不存在，则无法正确使用定制程序-主题名称将出现在列表中，但样式将丢失。

Note: As a rule of thumb, the uikit-customizer.less file should import all files that your theme uses. In our example, importing uikit.less meets this requirement because it includes both the default UIkit styles and your custom button styles.

注意：根据经验， uikit-customizer.less文件应导入主题使用的所有文件。 在我们的示例中，导入uikit.less满足此要求，因为它既包含默认UIkit样式，又包含您的自定义按钮样式。

After adding the uikit-customizer.less file, you will see that this time all components are properly styled. So, we’re ready to move on.

添加uikit-customizer.less文件后，您将看到这次所有组件的样式都正确。 因此，我们准备继续前进。

In the component’s drop-down list, placed at the top left corner of the panel on the right side of the Customizer, switch to “Button”. This way you’ll be able to see all available button styles. Now we can open the button.less file and start adding our modifications:

在组件的下拉列表中，将其置于“定制器”右侧面板的左上角，切换到“按钮”。 这样，您将能够看到所有可用的按钮样式。 现在我们可以打开button.less文件并开始添加修改：

@button-color: #f90; @button-hover-color: fade(@button-color, 75%); @button-active-color: @button-color; @button-background: #000; @button-hover-background: lighten(@button-background, 20%); @button-active-background: @button-hover-background;

In the above code we’ve modified the variables for the default button’s text and background colors in their normal, hovered, and active states. For other specific buttons, we need to change those variables too:

在上面的代码中，我们修改了默认按钮的文本和背景色的变量，这些变量处于其正常，悬停和活动状态。 对于其他特定按钮，我们也需要更改这些变量：

@button-primary-color: darken(@button-primary-background, 20%); @button-success-color: darken(@button-success-background, 20%); @button-danger-color: darken(@button-danger-background, 20%); @button-primary-hover-color: fade(@button-primary-color, 75%); @button-success-hover-color: fade(@button-success-color, 75%); @button-danger-hover-color: fade(@button-danger-color, 75%); @button-primary-active-color: lighten(@button-primary-color, 35%); @button-success-active-color: lighten(@button-success-color, 35%); @button-danger-active-color: lighten(@button-danger-color, 35%);

在UIkit中使用挂钩 (Using Hooks in UIkit)

Modifying UIkit’s variables is the easiest way to change the appearance of the framework’s components when dealing with simple modifications. But for more complex customizations, such as adding new rules and/or changing the existing ones without breaking the core, UIkit provides a special mechanism. It uses hooks to safely append your changes. Let’s see this in action. Put the following code below the variables, inside the button.less file:

修改UIkit变量是在处理简单修改时更改框架组件外观的最简单方法。 但是对于更复杂的自定义，例如添加新规则和/或在不破坏核心的情况下更改现有规则，UIkit提供了一种特殊的机制。 它使用挂钩安全地附加您的更改。 让我们来看看实际情况。 将以下代码放在button.less文件内的变量下方：

.hook-button() { border-radius: 5px 15px; box-shadow: 2px 2px; }

Here, the hook for the button component is used to add a border radius and a drop-shadow effect.

在此，按钮组件的钩子用于添加边框半径和阴影效果。

For even more specific changes, UIkit provides miscellaneous hooks. Each component has such a hook. This is useful for creating new selectors or modifying the ones that have neither a variable nor a hook available for customization. Let’s demonstrate this by adding the following code:

对于更具体的更改，UIkit提供了其他挂钩。 每个组件都有这样的挂钩。 这对于创建新的选择器或修改既没有变量也没有钩子可用于自定义的选择器很有用。 让我们通过添加以下代码来演示这一点：

.hook-button-misc() { .uk-button:active:not(:disabled) { box-shadow: none; } .uk-button-link:hover, .uk-button-link:focus, .uk-button-link:active, .uk-button-link.uk-active { text-decoration: none; } .uk-button-link:focus { outline: none; border: 1px solid @button-link-hover-color; } }

Here we remove the drop-shadow for every active button that is not disabled. Then we remove the underline of links in all states. Finally, we remove the outline of the button link and instead add a nice border, shown when the link is focused. Save the button.less file.

在这里，我们为每个未禁用的活动按钮删除了阴影。 然后，我们删除所有状态下的链接下划线。 最后，我们删除了按钮链接的轮廓，而是添加了一个漂亮的边框，当链接被聚焦时会显示出来。 保存button.less文件。

Note: You can see all available hooks for a particular component by looking at the very end of its corresponding .less file. Here is an example for the button component.

注意：通过查看相应的.less文件的最后，可以查看特定组件的所有可用挂钩。 这是按钮组件的示例。

// Hooks .hook-button-misc; .hook-button() {} .hook-button-hover() {} .hook-button-active() {} .hook-button-primary() {} .hook-button-primary-hover() {} .hook-button-primary-active() {} .hook-button-success() {} .hook-button-success-hover() {} .hook-button-success-active() {} .hook-button-danger() {} .hook-button-danger-hover() {} .hook-button-danger-active() {} .hook-button-disable() {} .hook-button-link() {} .hook-button-large() {} .hook-button-misc() {}

So now the main theme is ready and you can check it out in the Customizer. Just reload the page and enjoy.

现在，主题已经准备就绪，您可以在定制器中签出主题。 只需重新加载页面即可。

为我们的主题创建样式 (Creating Styles for our Theme)

Now we’re ready to create the theme’s styles. In our dark theme’s directory, we’ll create a new folder called “styles” and inside that we’ll create another one called “blue”. In that folder create a blank style.less file. Copy the first three lines of code from your button.less file and paste them into the file, then change the value of @button-color to #09f and save the file. The contents of the file will look like this:

现在，我们准备创建主题的样式。 在我们深色主题的目录中，我们将创建一个名为“ styles”的新文件夹，并在其中创建另一个名为“ blue”的文件夹。 在该文件夹中创建一个空白的style.less文件。 复制button.less文件中的前三行代码并将其粘贴到文件中，然后将@button-color的值更改为#09f并保存文件。 该文件的内容如下所示：

@button-color: #09f; @button-hover-color: fade(@button-color, 75%); @button-active-color: @button-color;

Run gulp indexthemes in the terminal again to include the newly created style, then go back to the Customizer and refresh the page. Now at the end of the themes list you should see a “Dark-blue” option. Select it and you’ll see that now the buttons appear with a nice blue accent. For the green style, repeat the same procedure but instead use a color value of #9c0.

再次在终端中运行gulp indexthemes以包含新创建的样式，然后返回到Customizer并刷新页面。 现在，在主题列表的末尾，您应该看到“深蓝色”选项。 选择它，您将看到按钮现在带有漂亮的蓝色装饰。 对于绿色样式，重复相同的步骤，但使用#9c0的颜色值。

When you’re satisfied with your theme you can build it by running this task:

当您对主题感到满意时，可以通过运行以下任务来构建它：

gulp dist -t dark

This will build the dark theme and will put it in a “dist” folder in the UIkit root directory. Then, in the “css” folder you’ll find uikit.dark.css and uikit.dark.min.css files. Unfortunately, these files contain only styles from your main theme. The blue and green styles are not included. But you can get the CSS files for those too by using the GUI Customizer, as I’ll explain next.

这将构建深色主题，并将其放在UIkit根目录中的“ dist”文件夹中。 然后，在“ css”文件夹中，您将找到uikit.dark.css和uikit.dark.min.css文件。 不幸的是，这些文件仅包含主主题中的样式。 不包括蓝色和绿色样式。 但是，您也可以使用GUI Customizer来获得这些文件CSS文件，这将在下面解释。

使用GUI定制器 (Using the GUI Customizer)

I showed you how to create a theme manually, because it’s always good to know the underlying mechanism of a particular process. But if you don’t need complex modifications, you can use the GUI Customizer directly. Let’s explore the needed steps.

我向您展示了如何手动创建主题，因为了解特定过程的基础机制总是一件好事。 但是，如果您不需要复杂的修改，则可以直接使用GUI Customizer。 让我们探索所需的步骤。

Go to Customizer and select the theme you want to customize.

转到“定制程序”，然后选择要定制的主题。 Use the left panel to modify the variables. Usually, only the global variables are shown. For the components’ variables to be visible you need to activate the “Advanced Mode” option. By default, a variable whose values are defined through another variable are hidden. In advanced mode you can see a “(more)” button next to groups that include these kinds of variables.

使用左面板修改变量。 通常，仅显示全局变量。 为了使组件的变量可见，您需要激活“高级模式”选项。 默认情况下，其值是通过另一个变量定义的变量是隐藏的。 在高级模式下，您可以在包含此类变量的组旁边看到一个“(更多)”按钮。

Make the changes you want and hit the “Get CSS” button. This will give you the final CSS file for your theme. You can use this button to get the CSS files for your blue and green styles. Just select “Dark-blue” or “Dark-green” and click the button.

进行所需的更改，然后单击“获取CSS”按钮。 这将为您提供主题的最终CSS文件。 您可以使用此按钮获取蓝色和绿色样式CSS文件。 只需选择“深蓝色”或“深绿色”，然后单击按钮。

If you want a minified version, check the “Minify CSS” option

如果您需要缩小版本，请选中“缩小CSS”选项 If you use left-to-right languages, check “RTL Mode” and the whole theme will convert automatically.

如果使用从左到右的语言，请选中“ RTL模式”，整个主题将自动转换。 If you hit the “Get Less” button instead of the “Get CSS” button, the output file will contain only the changed variables. In this way you can create styles automatically when you create theme variations.

如果您单击“获取较少”按钮而不是“获取CSS”按钮，则输出文件将仅包含已更改的变量。 这样，您可以在创建主题变体时自动创建样式。

Every theme uses a customizer.json file defining which variables are displayed by default or only in advanced mode. By modifying this file, you can control the visibility and availability of the variables in the Customizer’s left panel. For more details on this, see the Customizer.json page.

每个主题都使用customizer.json文件，该文件定义默认或仅在高级模式下显示哪些变量。 通过修改此文件，您可以在定制器的左侧面板中控制变量的可见性和可用性。 有关更多信息，请参见Customizer.json页面 。

Note: When you run the indexthemes task, if your theme doesn’t have its own customizer.json file (which is the case when you create a new theme), UIkit uses the file from the default theme (/themes/default/customizer.json). If you plan to customize this file, you need to copy and paste it in your theme’s root directory and run gulp indexthemes again to update the theme.

注意：当您运行indexthemes任务，如果你的主题没有自己的customizer.json文件(当你创建一个新的主题是哪种情况)，UIKit中使用了默认的主题文件( /themes/default/customizer.json )。 如果计划自定义此文件，则需要将其复制并粘贴到主题的根目录中， gulp indexthemes再次运行gulp indexthemes来更新主题。

结论 (Conclusion)

You saw that customizing a particular front-end framework is not as hard a task as it may seem at first. With some knowledge of Gulp and some extra effort you can make your websites unique enough to stand out from the crowd without being labeled as having been built with a specific framework.

您已经看到，自定义特定的前端框架并不像乍看起来那样困难。 借助一些Gulp知识和一些额外的精力，您可以使您的网站足够独特，以在与众不同的情况下脱颖而出，而不必将其标记为使用特定框架构建。

翻译自: https://www.sitepoint.com/custom-uikit-theme-with-gulp-less/

gulp定义函数

相关资源：jdk-8u281-windows-x64.exe