sage主题哪里有

sage主题哪里有

A few years back, we published an article about Roots, a Theme Framework for WordPress. Now Roots has turned into a company and they’ve turned the Roots theme framework into two sets of tools namely Sage and Bedrock.

几年前，我们发表了有关Roots(WordPress的主题框架)的文章。 现在Roots变成了一家公司，他们已经将Roots主题框架变成了两套工具，即Sage和Bedrock 。

In this article, I’m going to walk you through Sage. It utilizes HTML5 Boilerplate, gulp, Bower, and the Bootstrap front-end framework. First I’ll give you a brief overview of each of the tools that I’ve just mentioned and then we’ll go through the installation and customization of the framework. Finally we’ll go through the basic Sage workflow.

在本文中，我将引导您了解Sage。 它利用HTML5 Boilerplate，gulp，Bower和Bootstrap前端框架。 首先，我将为您简要介绍我刚刚提到的每个工具，然后我们将介绍框架的安装和自定义。 最后，我们将介绍基本的Sage工作流程。

工具类 (Tools)

HTML5 Boilerplate – a front-end template.

HTML5 Boilerplate –前端模板。

Gulp – a build system used for automating tasks such as minification and concatenation of front-end assets, optimizing images, running tests and many others.

Gulp –一种用于自动化任务的构建系统，例如前端资产的最小化和连接，优化映像，运行测试等。

Bower – a package manager for front-end assets. It’s used for pulling JavaScript libraries like jQuery or Lodash into your project.

Bower –前端资产的程序包经理。 它用于将jQuery或Lodash之类JavaScript库拉入您的项目。

Browsersync – synchronises file changes and interactions in multiple devices.

Browsersync –同步文件更改和在多个设备中的交互。

asset-builder – used for collecting assets in your theme and putting them together.

资产生成器 –用于收集主题中的资产并将它们放在一起。

wiredep – used for injecting Sass and Less dependencies from Bower into the main theme stylesheet.

wiredep –用于将Bower的Sass和Less依赖项注入到主主题样式表中。

Bootstrap – a front-end framework that allows us to easily create responsive websites.

Bootstrap –一个前端框架，使我们能够轻松创建响应式网站。

安装 (Installation)

To install Sage, navigate to your WordPress theme directory and execute the following command from your terminal. Don’t forget to replace theme-name with the name of your theme:

要安装Sage，请导航到WordPress主题目录，然后从终端执行以下命令。 不要忘记用theme-name替换theme-name ：

git clone https://github.com/roots/sage.git theme-name

Note that the command above uses Git. If you don’t have Git installed on your machine, you can just download the zip file from the git repo, create a new folder in your WordPress theme directory and copy the contents of the extracted zip file.

请注意，上面的命令使用Git 。 如果您的计算机上未安装Git，则可以从git repo下载zip文件，在WordPress主题目录中创建一个新文件夹，然后复制提取的zip文件的内容。

Once that’s done, you need to add the following to your wp-config.php file:

完成后，您需要将以下内容添加到wp-config.php文件中：

define('WP_ENV', 'development');

This sets WordPress to a development environment.

这将WordPress设置为开发环境。

目录结构 (Directory Structure)

The directory structure is pretty much like that of any WordPress theme. You still have the familiar looking files in the root of the theme:

目录结构非常类似于任何WordPress主题的目录结构。 您仍然可以在主题的根目录中找到熟悉的外观文件：

index.php

index.php

functions.php,

functions.php ，

404.php

404.php

search.php

search.php

single.php

single.php

page.php

page.php

The only difference is that it’s got the lib directory where the theme configuration and utilities are stored. Note that including the front-end assets is done from the assets.php instead of functions.php. Registering widgets, menus and adding theme support is done from init.php. Specifying page titles can be done from titles.php.

唯一的区别是它有一个lib目录，用于存储主题配置和实用程序。 请注意，包括前端资产是通过assets.php而不是functions.php 。 从init.php完成小部件，菜单的注册和主题支持的添加。 可以从titles.php指定页面标题。

There’s also the assets directory which contains .scss files which get compiled later into a single main.css file. This is after you use gulp to concatenate and minify the .scss files. The lang directory contains a sage.pot file which is basically used for translating the text used in Sage. By default, there are no translations in there, just the text to be translated. If you need to support another language in your theme, then you can check out the sage-translations repo, which contains translations of Sage in different languages. Just copy the translations and put it on the sage.pot file. If you’re using other text that needs to be translated, then you can also add it on that file.

还有assets目录，其中包含.scss文件，这些文件随后被编译成单个main.css文件。 这是在使用gulp连接并缩小.scss文件之后。 lang目录包含一个sage.pot文件，该文件基本上用于翻译Sage中使用的文本。 默认情况下，其中没有翻译，只有要翻译的文本。 如果您需要在主题中支持另一种语言，则可以查看sage-translations回购，其中包含不同语言的Sage译文。 只需复制译文并将其放在sage.pot文件中即可。 如果您要使用其他需要翻译的文本，则也可以将其添加到该文件中。

Lastly, there’s the templates directory where all the templates that you usually have in a WordPress theme are stored. The only difference is that the templates are based on HTML5 Boilerplate so it has some default ARIA roles to improve the accesibility of your theme.

最后，还有templates目录，用于存储您通常在WordPress主题中拥有的所有模板。 唯一的不同是，模板基于HTML5 Boilerplate，因此它具有一些默认的ARIA角色，以提高主题的可访问性。

客制化 (Customization)

Next we’ll look into customizing Sage to fit your needs. Open up the lib/init.php file in your new theme. Here are some of the things that you can customize:

接下来，我们将研究定制Sage以适应您的需求。 在新主题中打开lib/init.php文件。 您可以自定义以下内容：

标题标签 (Title Tag)

The title-tag allows your theme to enable modifying of the title tag in your web page. This is a feature added to WordPress 4.1 and you can toggle the functionality by adding or removing the following line:

title-tag允许您的主题启用对网页中标题标签的修改。 这是WordPress 4.1中新增的功能，您可以通过添加或删除以下行来切换功能：

add_theme_support('title-tag')

导航菜单 (Navigation Menus)

By default, Sage adds a primary navigation to the navigation menus. This is where you can add more.

默认情况下，Sage将主导航添加到导航菜单。 您可以在此处添加更多内容。

register_nav_menus([ 'primary_navigation' => __('Primary Navigation', 'sage') ]);

发表缩图 (Post Thumbnails)

Post Thumbnails or better known as Featured Images with version 3.0 of WordPress, is an image representing a post, page or any custom post type. You can enable or disable this feature on your theme by adding or removing the following:

发布缩略图或WordPress 3.0版中的称为“特色图片”，是代表帖子，页面或任何自定义帖子类型的图像。 您可以通过添加或删除以下内容来在主题上启用或禁用此功能：

add_theme_support('post-thumbnails')

发布格式 (Post Formats)

These are the types of posts that are enabled by default. You can add or remove items from the array depending on your needs.

这些是默认启用的帖子类型。 您可以根据需要在阵列中添加或删除项目。

add_theme_support('post-formats', ['aside', 'gallery', 'link', 'image', 'quote', 'video', 'audio']);

HTML5标记 (HTML5 Markup)

This allows you to add support for HTML5 Markup. By default, it’s allowed on captions, comment forms and comment lists.

这使您可以添加对HTML5标记的支持。 默认情况下，标题，评论表单和评论列表允许使用。

add_theme_support('html5', ['caption', 'comment-form', 'comment-list']);

编辑器样式表 (Editor Stylesheet)

This allows you to specify the path of the stylesheet for customizing the TinyMCE Editor that is used by WordPress.

这使您可以指定样式表的路径，以自定义WordPress使用的TinyMCE编辑器。

add_editor_style(Assets\asset_path('styles/editor-style.css'));

注册侧边栏 (Register Sidebars)

Lastly, we have the code for registering sidebars on widgets_init. By default, Sage comes with two sidebars: primary and footer.

最后，我们有用于在widgets_init上注册边栏的代码。 默认情况下，Sage带有两个侧边栏：主要和页脚。

function widgets_init() { register_sidebar([ 'name' => __('Primary', 'sage'), 'id' => 'sidebar-primary', 'before_widget' => '<section class="widget %1$s %2$s">', 'after_widget' => '</section>', 'before_title' => '<h3>', 'after_title' => '</h3>' ]); register_sidebar([ 'name' => __('Footer', 'sage'), 'id' => 'sidebar-footer', 'before_widget' => '<section class="widget %1$s %2$s">', 'after_widget' => '</section>', 'before_title' => '<h3>', 'after_title' => '</h3>' ]); } add_action('widgets_init', __NAMESPACE__ . '\\widgets_init');

工作流程 (Workflow)

Now let’s move on to the workflow. In this section, you’ll learn how to use the tools which I’ve talked about earlier when developing WordPress themes with Sage.

现在，让我们继续工作流程。 在本节中，您将学习在使用Sage开发WordPress主题时如何使用我之前提到的工具。

First, let’s install the tools into your development machine. The main dependency of most of the tools that were going to use is Node.js. Luckily it can be easily installed using an installer. Go ahead and download the installer that is applicable to your platform, open it and go through the instructions provided. Normally you’d only have to click on ‘Next’ until the installer finishes installing Node.js. Once that’s done, you can install the rest of the tools by using the npm install command from your terminal:

首先，让我们将工具安装到开发机器中。 大多数将要使用的工具的主要依赖项是Node.js。 幸运的是，可以使用安装程序轻松安装它。 继续并下载适用于您的平台的安装程序 ，打开它并按照提供的说明进行操作。 通常，您只需要单击“下一步”，直到安装程序完成安装Node.js。 完成后，您可以在终端上使用npm install命令安装其余工具：

npm install gulp bower browser-sync asset-builder wiredep --save

The command above installs gulp, Bower, Browsersync, Asset Builder and wiredep into your project.

上面的命令将gulp，Bower，Browsersync，Asset Builder和Wiredp安装到您的项目中。

使用凉亭 (Using Bower)

When using Bower, you only need to keep in mind the search, install, list and uninstall commands. First is the search command. You can use it if you’re not sure of the name of the package that you want to install. This command takes up the name of the package. It doesn’t have to be exact though. For example if you want to search for ‘jQuery’, you can just use ‘query’ and it will list all the packages which have that string in their name. In this case, jQuery would also be listed.

使用Bower时，只需要记住search ， install ， list和uninstall命令。 首先是search命令。 如果不确定要安装的软件包的名称，可以使用它。 此命令占用软件包的名称。 不一定要确切。 例如，如果要搜索“ jQuery”，则可以仅使用“ query”，它将列出名称中包含该字符串的所有软件包。 在这种情况下，还将列出jQuery。

bower search query

Once you already know the name of the package, you can install it with the install command:

一旦知道软件包的名称，就可以使用install命令安装它：

bower install jquery

This installs jQuery into the bower_components directory. If you do not want packages to be installed in there, you can edit the .bowerrc file in the root of your WordPress theme and change the directory to the path where you want to install.

这会将jQuery安装到bower_components目录中。 如果您不想在其中安装软件包，则可以在WordPress主题的根目录中编辑.bowerrc文件，然后将directory更改为要安装的路径。

Next is the list command. This shows you the list of packages you’ve installed using Bower in a tree form. This means that if a specific package is a dependency of another package then you will also see it.

接下来是list命令。 这会以树形形式显示使用Bower安装的软件包列表。 这意味着，如果特定程序包是另一个程序包的依赖项，那么您还将看到它。

Lastly, we have the uninstall command. This allows you to remove Bower packages from your project. For example, if you no longer want jQuery:

最后，我们有uninstall命令。 这使您可以从项目中删除Bower软件包。 例如，如果您不再需要jQuery：

bower uninstall jquery

使用口水 (Using gulp)

In order to use gulp, we first need to install the gulp plugins used by Sage:

为了使用gulp，我们首先需要安装Sage使用的gulp插件：

npm install gulp-autoprefixer gulp-changed gulp-imagemin gulp-less --save

Once that’s done, we can now use the gulp command to compile and optimize your project assets. Executing the gulp command shows the following output:

完成后，我们现在可以使用gulp命令来编译和优化您的项目资产。 执行gulp命令将显示以下输出：

[08:50:10] Using gulpfile ~/www/wordpress/wp-content/themes/my-theme/gulpfile.js [08:50:10] Starting 'clean'... [08:50:10] Finished 'clean' after 45 ms [08:50:10] Starting 'default'... [08:50:10] Starting 'build'... [08:50:10] Starting 'wiredep'... [08:50:11] Finished 'default' after 1.39 s [08:50:12] Finished 'wiredep' after 1.57 s [08:50:12] Starting 'styles'... [08:50:22] Finished 'styles' after 10 s [08:50:22] Starting 'jshint'... [08:50:23] Finished 'jshint' after 638 ms [08:50:23] Starting 'scripts'... [08:50:29] Finished 'scripts' after 6.51 s [08:50:29] Starting 'fonts'... [08:50:29] Starting 'images'... [08:50:29] Finished 'fonts' after 162 ms [08:50:37] gulp-imagemin: Minified 2 images (saved 405.06 kB - 35.1%) [08:50:37] Finished 'images' after 7.79 s [08:50:37] Finished 'build' after 27 s

On the first line, you can see that it’s using the gulpfile.js file. This file contains all the instructions to be carried out by Gulp. The first task is ‘clean’, this removes all the files in the dist directory. This is where all the compiled and optimized files are stored. Next, the ‘default’ task is called. This basically just calls the ‘build’ task. Then the ‘build’ task calls the styles, scripts, fonts and images tasks.

在第一行，您可以看到它正在使用gulpfile.js文件。 该文件包含Gulp将执行的所有指令。 第一个任务是“ clean”，这将删除dist目录中的所有文件。 这是所有编译和优化文件的存储位置。 接下来，调用“默认”任务。 这基本上就是所谓的“构建”任务。 然后，“ build”任务调用样式，脚本，字体和图像任务。

At this point you can open up the gulpfile.js so I can walk you through each task. First is the ‘styles’. This depends on ‘wiredep’ which allows us to inject Less and Sass Bower dependencies into the main.css file found at the dist/styles directory. Once that’s done, it then compiles the Sass and Less files in your assets/styles directory.

此时，您可以打开gulpfile.js以便我gulpfile.js您完成每个任务。 首先是“风格”。 这取决于“ wiredep”，它允许我们将Less和Sass Bower依赖项注入到dist/styles目录中的main.css文件中。 完成后，它将在您的assets/styles目录中编译Sass和Less文件。

gulp.task('styles', ['wiredep'], function() { var merged = merge(); manifest.forEachDependency('css', function(dep) { var cssTasksInstance = cssTasks(dep.name); if (!enabled.failStyleTask) { cssTasksInstance.on('error', function(err) { console.error(err.message); this.emit('end'); }); } merged.add(gulp.src(dep.globs, {base: 'styles'}) .pipe(cssTasksInstance)); }); return merged .pipe(writeToManifest('styles')); });

If you want to add page specific CSS, you can do that by through the manifest.json file which you can find at the root of the assets directory.

如果要添加页面特定CSS，可以通过manifest.json文件来实现，该文件可以在assets目录的根目录中找到。

Here’s an example where I’ve added other-page.css. You can then specify the files that will be used as a source by specifying an array of paths in the files property. In this case, I’m only using the other-page.less file in the styles directory.

这是添加了other-page.css 。 然后，您可以通过在files属性中指定路径数组来指定将用作源的files 。 在这种情况下，我只使用styles目录中的other-page.less文件。

{ "dependencies": { "main.js": { "files": [ "scripts/main.js" ], "main": true }, "main.css": { "files": [ "styles/main.scss" ], "main": true }, "editor-style.css": { "files": [ "styles/editor-style.scss" ] }, "other-page.css": { "files": [ "styles/other-page.less" ] }, "modernizr.js": { "bower": ["modernizr"] } }, "config": { "devUrl": "http://example.dev" } }

Next is the ‘scripts’ task. This depends on the ‘jshint’ task which checks for the quality of your JavaScript code. For example, always putting curly braces, or prohibiting the use of == or != in your code because they can cause bugs related to equality of the variables that you’re trying to compare.

接下来是“脚本”任务。 这取决于“ jshint”任务，该任务检查JavaScript代码的质量。 例如，始终在代码中加上花括号，或禁止在代码中使用==或!= ，因为它们可能导致与您要比较的变量相等有关的错误。

gulp.task('scripts', ['jshint'], function() { var merged = merge(); manifest.forEachDependency('js', function(dep) { merged.add( gulp.src(dep.globs, {base: 'scripts'}) .pipe(jsTasks(dep.name)) ); }); return merged .pipe(writeToManifest('scripts')); });

You can customize JSHint by editing the .jshintrc file found at the root of your theme. Sage has already added some options by default, so be sure to check out the list of all the available options and customize JSHint according to your needs.

您可以通过编辑主题根目录下的.jshintrc文件来自定义.jshintrc 。 Sage默认已经添加了一些选项，因此请确保签出所有可用选项的列表，并根据需要定制JSHint。

{ "bitwise": true, "browser": true, "curly": true, "eqeqeq": true, "eqnull": true, "esnext": true, "immed": true, "jquery": true, "latedef": true, "newcap": true, "noarg": true, "node": true, "strict": false }

After checking the quality of your code, the ‘scripts’ task concatenates all the JavaScript files in your Bower dependencies together with your scripts/main.js file. Finally, it will minify the resulting script with uglify.js. Note that you can customize the default behavior through your manifest.json file. For example, if you don’t want all your Bower dependencies to get combined together with your main script. Then you can remove the main property in your main.js. Then add a bower property, this takes up the array of the Bower components that your script depends on. In the example below, I’ve set jQuery as the dependency.

检查代码质量后，“脚本”任务将Bower依赖项中的所有JavaScript文件与scripts/main.js文件连接在一起。 最后，它将使用uglify.js缩小生成的脚本。 请注意，您可以通过manifest.json文件来自定义默认行为。 例如，如果您不希望将所有Bower依赖项与主脚本结合在一起。 然后，您可以在main.js删除main属性。 然后添加一个bower属性，该属性将占用脚本所依赖的Bower组件数组。 在下面的示例中，我将jQuery设置为依赖项。

"main.js": { "files": [ "scripts/main.js" ], "main": true, //remove this line "bower": ["jquery"] },

Next is the ‘fonts’ task. What this does is it gets all the fonts in the assets/fonts directory as well as any fonts used by your Bower dependencies. It puts them all in the dist/fonts directory. This task uses gulp-flatten which flattens the directory structure. This means you will only find fonts in the dist/fonts directory. This is good since you no longer have to specify lots of directories when linking your fonts.

接下来是“字体”任务。 它的作用是获取assets/fonts目录中的所有字体以及Bower依赖项使用的所有字体。 它将它们全部放在dist/fonts目录中。 此任务使用gulp-flatten平目录结构。 这意味着您只能在dist/fonts目录中找到字体。 这很好，因为在链接字体时您不必再指定很多目录。

gulp.task('fonts', function() { return gulp.src(globs.fonts) .pipe(flatten()) .pipe(gulp.dest(path.dist + 'fonts')) .pipe(browserSync.stream()); });

Lastly, we have the ‘images’ task. This compresses the images in the assets/images directory using lossless compression. This effectively reduces the size of the image without any perceivable reduction in the image quality. Optimized images are then stored in the dist/images directory.

最后，我们有“图像”任务。 这将使用无损压缩来压缩assets/images目录中的assets/images 。 这有效地减小了图像的尺寸，而没有图像质量的任何明显降低。 然后将优化的图像存储在dist/images目录中。

gulp.task('images', function() { return gulp.src(globs.images) .pipe(imagemin({ progressive: true, interlaced: true, svgoPlugins: [{removeUnknownsAndDefaults: false}, {cleanupIDs: false}] })) .pipe(gulp.dest(path.dist + 'images')) .pipe(browserSync.stream()); });

Aside from the gulp command, there’s also the gulp watch command. You can use this to speed up your development process. It does the same thing as the gulp command, only it does it every time you make changes to an asset. But before you can use it, you have to update the assets/manifest.json file so that the devUrl is the same as the URL of your WordPress install.

除了gulp命令，还有gulp watch命令。 您可以使用它来加快开发过程。 它的作用与gulp命令相同，只是每次您对资产进行更改时都会执行。 但是，在使用它之前，必须先更新assets/manifest.json文件，以便devUrl与WordPress安装的URL相同。

"config": { "devUrl": "http://localhost/wordpress/" }

Once that’s done, you can now execute the gulp watch command, make some changes to your assets and watch the browser inject the changes you’ve just made. This works by creating a proxy URL for the devUrl you specified in your config. This contains the script which injects the changes to the page.

完成后，您现在可以执行gulp watch命令，对资产进行一些更改，并观看浏览器注入您刚刚进行的更改。 这可以通过为您在配置中指定的devUrl创建代理URL来实现。 它包含将更改注入页面的脚本。

http://localhost:3000/wordpress/

If you want to simultaneously test with another device that’s connected to your home network, you can determine the local IP address of your computer and access that from a browser on your device. The URL should look something like the following:

如果要同时与连接到家庭网络的另一台设备进行测试，则可以确定计算机的本地IP地址，并从设备上的浏览器访问该IP地址。 该网址应类似于以下内容：

http://192.168.xxx.xxx:3000/wordpress/

加快速度 (Speeding Things Up)

While I was testing Sage, I noticed that gulp watch takes around 10 seconds to finish doing all the tasks. This is no good, since you can’t see the changes immediately. For that reason, we have to make a few changes on the gulpfile.js file. First is the enabled variable. This is used to enable or disable specific tasks by specifying an option when using the gulp watch command.

在测试Sage时，我注意到gulp watch需要大约10秒钟才能完成所有任务。 这不好，因为您无法立即看到更改。 因此，我们必须对gulpfile.js文件进行一些更改。 首先是enabled变量。 使用gulp watch命令时，通过指定选项来启用或禁用特定任务。

var enabled = { // Enable static asset revisioning when `--production` rev: argv.production, // Disable source maps when `--production` maps: argv.maps, // Fail styles task on error when `--production` failStyleTask: argv.production, // minify only when `--minify` is specified minify: argv.minify };

In the code above, I’ve set to disable source maps and minifying files by default. So if you want to use those tasks then you would need to specify them as options:

在上面的代码中，我默认设置为禁用源地图并缩小文件。 因此，如果要使用这些任务，则需要将它们指定为选项：

gulp watch --minify --maps

Now we have to change the cssTasks and jsTasks so it utilizes the changes we’ve made to the enabled variable. First is the source maps, we use gulpif to check if source maps is enabled and only call the function that generates sourcemaps when it is enabled.

现在我们必须更改cssTasks和jsTasks以便它利用我们对enabled变量所做的更改。 首先是源地图，我们使用gulpif来检查源地图是否已启用，并且仅在启用时调用生成源地图的函数。

.pipe(function() { return gulpif(enabled.maps, sourcemaps.init()); })

Next is the ‘minify’ task.

接下来是“缩小”任务。

.pipe(function(){ return gulpif(enabled.minify, minifyCss({ advanced: false, rebase: false })); })

Your cssTasks should now look like the following:

您的cssTasks现在应如下所示：

var cssTasks = function(filename) { return lazypipe() .pipe(function() { return gulpif(!enabled.failStyleTask, plumber()); }) .pipe(function() { return gulpif(enabled.maps, sourcemaps.init()); }) .pipe(function() { return gulpif('*.less', less()); }) .pipe(function() { return gulpif('*.scss', sass({ outputStyle: 'nested', // libsass doesn't support expanded yet precision: 10, includePaths: ['.'], errLogToConsole: !enabled.failStyleTask })); }) .pipe(concat, filename) .pipe(autoprefixer, { browsers: [ 'last 2 versions', 'ie 8', 'ie 9', 'android 2.3', 'android 4', 'opera 12' ] }) .pipe(function(){ return gulpif(enabled.minify, minifyCss({ advanced: false, rebase: false })); }) .pipe(function() { return gulpif(enabled.rev, rev()); }) .pipe(function() { return gulpif(enabled.maps, sourcemaps.write('.')); })(); };

Next is the jsTask, modify the ‘uglify’ task so that it checks first if minify is enabled before it executes the function that minifies the scripts:

接下来是jsTask ，修改' jsTask '任务，以便在执行缩小脚本的功能之前先检查是否启用了minify：

.pipe(function(){ return gulpif(enabled.minify, uglify()) })

Your jsTasks should now look like the following:

您的jsTasks现在应如下所示：

var jsTasks = function(filename) { return lazypipe() .pipe(function() { return gulpif(enabled.maps, sourcemaps.init()); }) .pipe(concat, filename) .pipe(function(){ return gulpif(enabled.minify, uglify()) }) .pipe(function() { return gulpif(enabled.rev, rev()); }) .pipe(function() { return gulpif(enabled.maps, sourcemaps.write('.')); })(); };

结论 (Conclusion)

That’s it! In this tutorial you’ve learned how to work with Sage to modernize your process in developing a WordPress theme. You’ve also learned how to use tools like Bower, gulp and Browsersync to speed up your development.

而已！ 在本教程中，您学习了如何与Sage合作，以现代化开发WordPress主题的过程。 您还学习了如何使用Bower，gulp和Browsersync等工具来加快开发速度。

翻译自: https://www.sitepoint.com/modernizing-wordpress-theme-development-with-sage/

sage主题哪里有

相关资源：sage的安装和使用