如何在Netlify上运行Gulp任务

Question

嗨，我正在尝试在netlify上运行一些gulp任务来构建Hugo web。

我想知道如何在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中有两个地方可以设置构建命令。

管理员选项

将您的命令放在网站“设置”部分下的在线管理员中，然后转到Build＆amp;部署（部署设置）并更改构建命令：

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

gapminder_test$lifeExp <- as.numeric(gapminder_test$lifeExp)
gg <- ggplot(gapminder_test, aes(gdpPercap, lifeExp, color = continent)) +
  geom_point(aes(size = pop, frame = year, ids = country)) +
  scale_x_log10()
ggplotly(gg)

然后运行$ gulp

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

Answer 3

我找到了答案，所以我认为这可能对想要在Netlify中构建Hugo加上一些gulp任务的人有所帮助

解决方案是

1. 将 netlify.toml 中的命令从hugo更改为npm run gulptask，或者将其命名为您想要的任何内容

2. 使用您的任务添加 package.json 中的脚本

例如

"scripts": {
  "gulptask": "hugo; gulp templates",
},