Hugo, Netlify and Gulp Task

Hi, i’m using netlify for my Hugo web. My flow is local>gitlab repo>netlify.

On my local developement I’m using gulp to do some stuff like minify css & prettyfy HTML (add gulpfile.js and run the task manually after hugo build). The problem I have no idea how to implement the gulp task on the Netlify.

Is there anyone here have any experience how to run gulp task on netlify after hugo build.

regards

Cursory look, but I see several posts in here after searching for netlify gulp, so perhaps those would help?

I use the GitLab CI for building my site, so I’d include the gulp tasks there. Are you building the site on Netlify? I think their continuous deployment docs point out how to set up build commands.

1 Like

@maiki yes, my flow is deploy to my gitlab repo then netlify build it automaticly.

I’m using this config below and it works like a charm
[build]
publish = "public"
command = “hugo”

[context.production.environment]
  HUGO_VERSION = "0.32.4"
  HUGO_ENV = "production"
  HUGO_ENABLEGITINFO = "true"

[context.deploy-preview.environment]
  HUGO_VERSION = "0.32.4"

[context.branch-deploy.environment]
  HUGO_VERSION = "0.32.4"

[context.next.environment]
  HUGO_BASEURL = "https://mydomain.com/"
  HUGO_ENABLEGITINFO = "true"

the problem is i cant figure it out how to add gulp task after build hugo.

Is is possible to use gitlab CI on gitlab for netlify?

1 Like

Hi @RickCogley thanks for remind me, and yes i have read some posts there like

but i’m too dumb to figure out how to run gulp task with flow like mine.

I suggest you roam around in the Netlify repo for some examples:

I know they use Gulp. And they use Hugo. I guess they use both on Netlify.

Just a tip, the command doesn’t need to be just hugo.

I don’t know Gulp, so I do minification and cache busting on Netlify using a shell script. So the command that I set is ./build.sh.

So you can pack everything you need to do from the command line into that build script and simply call hugo in the end. You can even use a Makefile instead of a shell script, put that file in your repo root, and set command to make.

@kaushalmodi thanks for what you share, sounds promising and quite simple so i will give it a try

@bep I’ll look around for their repo thanks

@kaushalmodi just add build.sh in the root of my project then deploy it to my repo

the result is failed

7:29:34 PM: Build ready to start
7:29:37 PM: Fetching cached dependencies
7:29:37 PM: Starting to download cache of 53.2MB
7:29:37 PM: Finished downloading cache in 517.642059ms
7:29:37 PM: Starting to extract cache
7:29:39 PM: Finished extracting cache in 1.920558777s
7:29:39 PM: Finished fetching cache in 2.556147757s
7:29:39 PM: Starting to prepare the repo for build
7:29:40 PM: Preparing Git Reference refs/heads/master
7:29:42 PM: Found netlify.toml. Overriding site configuration
7:29:42 PM: Different build command detected, going to use the one specified in the toml file: './build.sh' versus 'hugo' in the site
7:29:42 PM: Running build command: ./build.sh
7:29:42 PM: Installing dependencies
7:29:45 PM: v6.12.3 is already installed.
7:29:46 PM: Now using node v6.12.3 (npm v3.10.10)
7:29:46 PM: Using version v6.12.3 of node
7:29:47 PM: Using /opt/buildhome/.rvm/gems/ruby-2.1.2
7:29:47 PM: Installing NPM modules using NPM version 3.10.10
7:29:50 PM: NPM modules installed
7:29:51 PM: Installing Hugo 0.32.4
7:29:51 PM: Installing missing commands
7:29:51 PM: Executing user command: ./build.sh
7:29:51 PM: /usr/local/bin/build: line 26: ./build.sh: Permission denied
7:29:51 PM: Caching artifacts
7:29:51 PM: Cached NPM modules
7:29:51 PM: Build complete: exit code: 126
7:29:51 PM: Error running command: Build script returned non-zero exit code: 126
7:29:51 PM: Failing build: Failed to build site
7:29:51 PM: failed during stage 'building site': Build script returned non-zero exit code: 126
7:29:51 PM: Finished processing build request in 15.281855215s 

this is my command on build.sh

npm init
npm install --save-dev gulp
npm install --save-dev gulp-remove-empty-lines
npm install --save-dev gulp-html-prettify
npm install --save-dev gulp-minify-inline
hugo
gulp htmlClean
gulp templates
gulp minify-inline

am i missing something? or should i alse change the “hugo” command to “./build.sh” from the netlify consol just like my netlify.toml?

I’d check the permissions set for the script (make it an executable chmod 744 ..).

Also make sure that git is preserving the permissions,there’s a git config variable for that.

No, the console settings are overridden by the netlify.toml settings.

Or, maybe you are trying to do something in the build script that’s not allowed on Netlify. Best bet would be to put echo statements before each command in the script, and then figure out which step failed.

tried with echo but the result still the same “the permission denied”

Personally I use the package.json scripts to build everything so I only give netlify the command: eenpm run whatever (providing the name of your script is whatever ;))
Then from inside package json build:

  "scripts": {
    "whatever": "grunt; hugo"
  },

It avoids file permission issues.
I use grunt and not gulp but your get the idea. Netlify reads your package.json automatically and uses it to install dependencies.

1 Like

@regis you save my day works like a charm, thank you

1 Like

Great! Sorry, I couldn’t help much with the gulp/npm stuff.

But I am still curious why the permissions thing didn’t get resolved. Just for anyone else facing this issue, and also not familiar with npm, etc., this should have worked (works on my end):

  1. Ensure that your git repo is preserving file permissions… make sure you have this in your <REPO>/.git/config:

    [core]
        filemode = true
    
  2. With the build script at <REPO>/build.sh, ensure that the script has a valid shebang header like #!/usr/bin/env bash, and the right permissions:

    chmod 744 <REPO>/build.sh
    
  3. Commit that build script… with the updated permissions.

Then, with command set to ./build.sh in Netlify, the build should work.

@Yudy_Ananda If you still have time, I am curious to know if these steps work for you :slight_smile:

@kaushalmodi give me a minute i will try :slight_smile:

@kaushalmodi sorry for the late reply

done step 1 change the git config and add shebang header on the step 2 and lastly set the command to ./build.sh in my netlify console but the result still the same bro :frowning:

anyway thank you so much for trying :slight_smile:

1 Like

Oh well, thanks for trying at least!