npm 包 wp-automation 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，自动化任务极为常见，而在进行 WordPress 主题开发时同样如此。 wp-automation 是一个开源的 npm 包，旨在帮助开发者快速构建自动化工作流程，从而提高工作效率，降低出错率。

安装 wp-automation

首先，使用 npm 命令安装 wp-automation :

npm install wp-automation

使用 wp-automation

wp-automation 还需要另外两个依赖包：

gulp：自动化任务管理工具
browser-sync：一个轻量的服务器，可以帮助你在任何设备上轻松地构建项目和测试网站

npm install gulp browser-sync --save-dev

引入依赖：

const gulp = require('gulp');
const wpAutomation = require('wp-automation');

const browserSync = require('browser-sync').create();

wp-automation 包括了以下任务：

JS 任务

在开发 WordPress 主题时，大多数情况下都需要使用 JavaScript 脚本，wp-automation 的 JS 任务会将所有 .js 文件压缩到一个文件中以减少 HTTP 请求的数量。

gulp.task('js', function () {
  wpAutomation.generateJs(
    gulp.src(['./src/js/*.js']),
    './dist/js',
    'all.js'
  );
});

CSS 任务

同样地，wp-automation 提供有一个 CSS 任务，它会将所有 .css 文件压缩到一个文件中。

gulp.task('css', function () {
  wpAutomation.generateCss(
    gulp.src(['./src/css/*.css']),
    './dist/css',
    'all.css'
  );
});

HTML 任务

wp-automation 的 HTML 任务，是将 HTML 文件中所有的 CSS、JS 文件的链接都替换为打包后的文件名，同时也可以压缩 HTML。

gulp.task('html', function () {
  wpAutomation.processHtml(
    gulp.src(['./src/*.html']),
    './dist'
  );
});

图片任务

wp-automation 会自动压缩所有的图片，并将它们移到 /dist/img/ 文件夹中。

gulp.task('images', function () {
  wpAutomation.processImages(
    gulp.src(['./src/img/**/*', '!./src/img/**/*.svg']),
    './dist/img'
  );
});

服务启动任务

运行服务启动任务，就可以在本地服务器上看到你的网站了。

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: './dist'
    }
  });
});

监测文件任务

wp-automation 包含了一个启动可以用来监视源代码的任务，每当源代码有变更时，会自动重新加载网站。

gulp.task('watch', gulp.series('js', 'css', 'images', 'html', 'serve', function () {
  gulp.watch(['./src/js/*.js'], gulp.series('js', reload));
  gulp.watch(['./src/css/*.css'], gulp.series('css', reload));
  gulp.watch(['./src/img/**/*'], gulp.series('images', reload));
  gulp.watch(['./src/*.html'], gulp.series('html', reload));
}));

构建任务

最后，wp-automation 包括一个构建任务，会依此运行所有的构建任务。在提交代码之前，应该运行构建任务来检查代码是否能正常工作。

gulp.task('build', gulp.series('js', 'css', 'images', 'html'));

概括

在本篇文章中，我们了解了如何使用 npm 包 wp-automation 来构建一个 WordPress 主题的自动化工作流。 wp-automation 提供了许多任务，涵盖了构建项目所需的所有方面。希望这篇文章能够帮到你学习 wp-automation ，并在你的下一个 WordPress 项目中提高你的效率。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005562881e8991b448d3131