Here’s my gulpfile which I used to work with before I switched to Hugo’s pipeline. Perhaps this helps:
import gulp from 'gulp';
import autoprefixer from 'gulp-autoprefixer';
import cleanCss from 'gulp-clean-css';
import {spawn} from 'child_process';
import hugoBin from 'hugo-bin';
import BrowserSync from 'browser-sync';
import concat from 'gulp-concat';
import hash from 'gulp-hash';
import htmlmin from 'gulp-htmlmin';
import imagemin from 'gulp-imagemin';
import del from 'del';
import notify from 'gulp-notify';
import rename from 'gulp-rename';
import sass from 'gulp-sass';
import sourcemaps from 'gulp-sourcemaps';
import uglify from 'gulp-uglify';
import gzip from 'gulp-gzip';
import environments from 'gulp-environments';
import confPlugins from './gulp/gulp-plugins.json';
import jsModules from './src/assets/js-user/modules.js';
/***************************************************************************************
** Constants
***************************************************************************************/
// https://www.npmjs.com/package/gulp-environments
const development = environments.development;
const staging = environments.make("staging");
const production = environments.production;
const browserSync = BrowserSync.create();
const hugo = {
src: './src/assets',
site: './site',
static: './site/static',
build: './build',
}
const paths = {
styles: {
src: hugo.src + '/scss',
dest: hugo.static + '/css',
},
scripts: {
src: hugo.src + '/js-user',
dest: hugo.static + '/js',
},
images: {
src: [
hugo.src + '/images/*.{jpg,png,gif,svg}',
hugo.src + '/img/*.{jpg,png,gif,svg}',
],
dest: hugo.static + '/images/',
optim: hugo.static + '/images/*',
},
html: {
src: hugo.build + '/public/**/*.html',
dest: hugo.build + '/public',
},
partials: hugo.site + '/layouts/partials/',
}
const sassPaths = [
// Checkbox
'./node_modules/checkbox.css/dist/scss',
// Owl Carousel
'./node_modules/owl.carousel/src/scss',
// Animate
'./node_modules/animate.css',
// Slider Pro
// Einzelne Dateien können importiert werden:
// ./node_modules/slider-pro/src/css
'./node_modules/slider-pro/dist/css',
// Foundation 6 Pro
'./node_modules/foundation-sites/scss',
'./node_modules/motion-ui/src',
// Hover
'node_modules/hover.css/scss',
// Vendor
'src/assets/scss/vendor',
'src/assets/scss/vendor/foundation-blocks',
];
const breakpoints = {
small: 0, // or wider
medium: 640, // or wider
large: 1024, // or wider
}
/***************************************************************************************
** Minimize HTML
***************************************************************************************/
function html () {
return gulp
.src(paths.html.src)
.pipe(htmlmin(confPlugins.htmlmin))
.pipe(gulp.dest(paths.html.dest))
}
gulp.task(
'html-min',
gulp.series(html)
)
/***************************************************************************************
** GZIP
***************************************************************************************/
function allgzip () {
return gulp.src(hugo.build + '/public/**/*.{html,xml,json,css,js}')
.pipe(gzip())
.pipe(gulp.dest(hugo.build + '/public'));
}
gulp.task(
'prod-gzip',
gulp.series(allgzip)
)
/***************************************************************************************
** CSS
***************************************************************************************/
function css () {
return gulp
.src(paths.styles.src + '/main.scss')
.pipe(development(sourcemaps.init()))
.pipe(sass({
includePaths: sassPaths
})
.on('error', sass.logError))
// Autoprefixer only in production mode
.pipe(production(autoprefixer({ browsers: ['>1%'] })))
// CleanCSS only in production mode
.pipe(production(cleanCss({compatibility: 'ie8'})))
.pipe(development(sourcemaps.write('.')))
// Hashes only in production mode
.pipe(production(hash()))
.pipe(gulp.dest(paths.styles.dest))
.pipe(browserSync.stream())
// Hashes only in production mode
.pipe(production(hash.manifest('css.json')))
// Store Map in data folder
.pipe(production(gulp.dest('./site/data/hashes')))
}
gulp.task(
'scss',
gulp.series(css)
)
/***************************************************************************************
** JavaScript
***************************************************************************************/
function js (cb) {
return gulp
.src(jsModules.js)
.pipe(concat('user.js'))
// Uglify only in production mode
.pipe(production(uglify()))
// Hashes only in production mode
.pipe(production(hash()))
.pipe(gulp.dest(paths.scripts.dest))
.pipe(browserSync.stream())
// only in production mode
.pipe(production(hash.manifest('user.json')))
// Store Map in data folder
.pipe(production(gulp.dest('./site/data/hashes')))
}
function jsvendor (cb) {
return gulp
.src(jsModules.libs)
.pipe(concat('vendor.js'))
.pipe(production(uglify()))
.pipe(production(hash()))
.pipe(gulp.dest(paths.scripts.dest))
.pipe(browserSync.stream())
.pipe(production(hash.manifest('vendor.json')))
.pipe(production(gulp.dest('./site/data/hashes')))
}
gulp.task(
'js-all',
gulp.series(js, jsvendor)
)
/***************************************************************************************
** Image Copy
***************************************************************************************/
function imgcopy (done) {
return gulp
.src(paths.images.src)
.pipe(gulp.dest(paths.images.dest))
done()
}
gulp.task(
'img-copy',
gulp.series(imgcopy)
)
/***************************************************************************************
** Hugo
***************************************************************************************/
// Hugo arguments
const hugoArgsDefault = ["-d", "../build/dev", "-s", "site", "-v"];
const hugoArgsPreview = ["--buildDrafts", "--buildFuture"];
const hugoArgsPublic = ["-d", "../build/public", "--config", "site/config.toml,site/config_public.toml"];
const hugoArgsStage = ["-d", "../build/stage", "--config", "site/config.toml,site/config_stage.toml"];
const hugoArgsLocal = ["-d", "../build/local", "--config", "site/config.toml,site/config_local.toml"];
// Development Tasks
gulp.task('hugo-development', (cb) => buildSite(cb));
gulp.task('hugo-development-preview', (cb) => buildSite(cb, hugoArgsPreview));
// Production Task
gulp.task('hugo-production', (cb) => buildSite(cb, hugoArgsPublic));
// Stage Task
gulp.task('hugo-stage', (cb) => buildSite(cb, hugoArgsStage));
// Local Task
gulp.task('hugo-local', (cb) => buildSite(cb, hugoArgsLocal));
// Dev Server with BrowserSync
gulp.task('server', () => {
browserSync.init({
server: {
baseDir: "./build/dev"
},
open: false
});
gulp.watch(paths.scripts.src + "/**/*.js", gulp.series("js-all"));
gulp.watch(paths.styles.src + "/**/*.scss", gulp.series("scss"));
gulp.watch(paths.images.src, gulp.series("img-copy"));
gulp.watch(hugo.site + "/**/*", gulp.series("hugo-development-preview"));
});
// Start Hugo and create site
function buildSite(cb, options, environment = "development") {
const args = options ? hugoArgsDefault.concat(options) : hugoArgsDefault;
process.env.NODE_ENV = environment;
return spawn(hugoBin, args, {stdio: "inherit"}).on("close", (code) => {
if (code === 0) {
browserSync.reload();
cb();
} else {
browserSync.notify("Hugo build failed :(");
cb("Hugo build failed");
}
})
};
. Unfortunately, no this site is not yet online, nor is the repo public.