Gulp-Hugo? Hugo NPM?

dev
1

Started working with a new workflow (nodejs,npm, bower, gulp).

Since gulp can watch all kinds of files which can then trigger innumerable tasks (like run Hugo even) plus do livereload I’m thinking of using it instead of hugo watch, in fact conditionally like for dev/prod/testing.

Probably don’t need any special gulp plugin for hugo but it might be cool to have gulp-hugo plugin so gulp can easier pass switches to hugo (like how gulp-sass passes to node-sass). In this way hugo doesn’t need any special workflow switches (like dev vs prod) as I asked about before since that would be done in gulp.

Even cooler how about a npm package for installing hugo? Then Hugo blends in the whole workflow from “hugo” in packages.json maintained by npm to gulp integration with gulp-hugo in gulpfile.js.

Anyone know enough glup and nodejs to help me tackle this? Could be good for hugo in terms of wider adoption since it would be trivial to incorporate into what is becoming a popular workflow (npm and gulp)…

Thoughts? Anyone already doing this?

2

I’m not sure why you’d want to run hugo as part of a stream. But I’m sure it could be done. It would be useful to do something fun with the auto reloading though.

Personally I just create a separate gulp task like this:

var exec = require('child_process').exec;
    
// Run Hugo to copy finished files over to public folder
gulp.task('hugo', ['css', 'js'], function (fetch) {
    return exec('hugo -s ../../', function (err, stdout, stderr) {
        // console.log(stdout); // See Hugo output
        // console.log(stderr); // Debugging feedback
        fetch(err);
    });
})

Run it after CSS and JS stuff and before any HTML stuff.

1 Like
3

There something similar in https://github.com/jbrodriguez/hugulp. It’s hugo + gulp :slight_smile:

2 Likes
4

Based on an article I read on NPM, I am working on creating a package.json file that I can run to watch for changes, build themes and hugo.

5

The package.json file is here https://gist.github.com/iampeterbanjo/170d8ea332797c2a6ea8

(I couldn’t put both links in the same post as a new user)

6

I have a non-stream gulp task for hugo
https://github.com/dkebler/Hugo-Sass-Bower-Gulp-S3-Starter/blob/master/gulpfile.js/tasks/html.js
as part of a bigger workflow project am am working toward

would love to turn hugo into a pipeable/streamable like gulp-sass has done to libsass
see my comments in this thread about making that possible.

7

I’ve been on a bit of a Gulp journey, creating a pipeline to deal with css preprocessing and performance related tasks. I started with a Gulp + Hugo script from this forum which intergrated Hugo into the stream.

But quickly one huge disadvantage becomes evident; build speed and therefore reload speed.

Integrating libsass makes much more sense as it is naturally part of a bigger process. Hugo with a Gulp stream loses it’s fundmental development advantage; speed.

So I don’t think Hugo is a good candidate for such a pipeline. Unlike libsass, it’s a workflow in itself (and a very fast one),

What I evenetually did was re-write the Gulp script to become two separate scripts. One is a small script for CSS pre-processing, which watches for changes and places complied css in the static folder (prompting Hugo to reload). The other is for finished sites only, working from an already fully built Hugo site, taking care of all CSS and image performace related tasks.

An all in one wrapper just means everything gets slow for development. With the workflow I have, all the awesome Hugo reload / building speed is there for development, CSS preprocessing is taken care of if needed, and only finished sites need the rest.

8

After reading quite a few proposed solutions to the pre-processor / build tool integrations discussions, I really like yours. Any chance in you sharing your gulp file that you mention above?

9

Yes, I’ve been planning on making a more generic version of one of the gulp files I described with a tutorial, not only to help others but also to see if there’s anything I could do better. I am stilll tweaking it.

However, to clarify, it ended up being nothing to do with Hugo. What I mean is, any wrapper just meant losing the awesome Hugo speed (and my little game of trying to catch Hugo doing the reload affter changes), so that approach has completely gone for me.

So for development, it’s just Hugo. For my .less files I just manually run a gulp less task (a separate command line window stays open for that) each time i make changes. I could addd a watch / reload to that i guess.

The rest, actually just for the finished site, I realised is usable on any static site. Just the folder names need changing (of course at the moment is assuming there is a ‘public’ folder).

So what I want to say is, in the end it became nothing to do with integration with Hugo, but a gulp script that does performance related tasks on a finished site. This potentially also makes it not a solution to this thread I guess.

1 Like
10

Thank you for your reply. I ended up diving in, and essentially came to the same conclusion.
I’m just running a js / sass gulp command to concat / minify / distribute the files into the static directory, and then run hugo when I need to build after dev, like you mentioned.

I supposed I could look into hooking into the Hugo livereload (or maybe setting a livereload alias to the same as the Hugo webserver and forcing the reload), but that doesn’t seem quite right.

1 Like