How to Run Gulp Task on Netlify

Question

Hi i'm trying to run some gulp task on netlify for building Hugo web.

I wonder how to run serial gulp task on netlify,

by the way this is my 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/./'))
});

where should i put the command to run all my gulps task in Netlify?

Answer 1

There are two places to setup your build commands in Netlify.

Admin Option

Put your commands in the online admin under the Settings section of your site and go to Build & Deploy (Deploy settings) and change the Build command:

enter image description here

Netlify Config file (netlify.toml) Option

Edit/add a netlify.toml file to the root of your repository and put your build commands into the context you want to target.

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"

NOTE:

• The commands can be any valid command string. Serializing gulp commands would work fine if you do not want to create a gulp sequence to run them. In example, gulp htmlClean && hugo && gulp tojson would be a valid command.
• Commands in the netlify.toml will overwrite the site admin command.

• Yudy Ananda: thank you, as I mentioned before that I also build Hugo in the same time, so if I set netlify.toml and the command on the netlify consol into gulp build how my hugo will build? the flow that i want to achieve is install some gulp, build hugo then run gulp task.
• talves: There is no mention of the netlify.toml in your original question. Also your answer is based on a misconception of how the deploy process works on netlify. There is no reason to install dependencies, that is done for you as part of the deploy when Netlify starts the process.
• talves: The same commands you use locally to build the production Hugo site should be used in your build commands on Netlify for best practices. This will help you to test all the commands prior to a deploy.

Answer 2

You can string your tasks together like this:

add another plugin with 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
 )
})

Then run $ gulp

There's a section on run-sequence on this page that will help: https://css-tricks.com/gulp-for-beginners/

• Mark: I would avoid gulp.start for various reasons - not a documented part of the plugin for one. Look at npmjs.com/package/run-sequence instead and put return statements in all your tasks or you will have problems.
• Greg: @Mark: I corrected the answer and learned something in the process - thanks!
• Yudy Ananda: @Greg thanks for the answer, but what i mean is i need step to run gulp task on the netlify not in my local env.