如何在 Netlify 上运行 Gulp 任务

Question

您好，我正在尝试在 netlify 上运行一些 gulp 任务以构建 Hugo 网络。

我想知道如何在 netlify 上运行串行 gulp 任务，

顺便说一下，这是我的 gulpfile.js

var gulp = require('gulp');
var removeEmptyLines = require('gulp-remove-empty-lines');
var prettify = require('gulp-html-prettify');
var rm = require( 'gulp-rm' );
var minifyInline = require('gulp-minify-inline');

gulp.task('tojson', function () {
  gulp.src('public/**/*.html')
  .pipe(removeEmptyLines())
  .pipe(gulp.dest('public/./'));
});

gulp.task('htmlClean', function () {
  gulp.src('public/**/*.html')
  .pipe(removeEmptyLines({
    removeComments: true
  }))
  .pipe(gulp.dest('public/./'));
});

gulp.task('templates', function() {
  gulp.src('public/**/*.html')
    .pipe(prettify({indent_char: ' ', indent_size: 2}))
    .pipe(gulp.dest('public/./'))
});

gulp.task('minify-inline', function() {
  gulp.src('public/**/*.html')
    .pipe(minifyInline())
    .pipe(gulp.dest('public/./'))
});

在 Netlify 中我应该将命令放在哪里运行我的所有 gulps 任务？

Answer 1

在 Netlify 中有两个地方可以设置您的构建命令。

管理选项

将您的命令放在站点设置部分下的在线管理员中，然后转到构建和部署（部署设置）并更改构建命令：

Netlify 配置文件 (netlify.toml) 选项

编辑/添加 netlify.toml 文件到存储库的根目录，并将构建命令放入您想要定位的上下文中。

netlify.toml

# global context
[build]
  publish = "public"
  command = "gulp build"
# build a preview (optional)
[context.deploy-preview]
  command = "gulp build-preview"
# build a branch with debug (optional)
[context.branch-deploy]
  command = "gulp build-debug"

注意：

• 命令可以是任何有效的命令字符串。如果您不想创建 gulp 序列来运行它们，则序列化 gulp 命令可以正常工作。例如，gulp htmlClean && hugo && gulp tojson 将是一个有效命令。
• netlify.toml 中的命令将覆盖站点管理命令。

Answer 2

你可以像这样把你的任务串起来：

使用 NPM 添加另一个插件： https://www.npmjs.com/package/run-sequence

var runSequence = require('run-sequence');

gulp.task('default', function (callback) {
  runSequence(['tojson', 'htmlClean', 'templates', 'minify-inline'],
    callback
  )
})

然后运行 ​​$gulp

此页面上有一个关于运行序列的部分会有所帮助： https://css-tricks.com/gulp-for-beginners/