One-liners to re-generate the various min files (js and css)?

[NorseGaud]

I'm curious what one-liners you use to re-generate the various min files and test if the changes you made work or not. I'd like to use them to be sure I mimic the exact steps you take and don't commit something weird in a future PR.

I'm new to Hugo, so maybe I'm missing something dead simple that does it for me.

Thanks Toma!

[NorseGaud]

I've been using scss -C -t compressed styles/scss/main.scss styles/main.min.css --sourcemap=none && minify -o scripts/index.min.js scripts/src/index.js

[tomanistor]

Hey @NorseGaud, for this theme I use Gulp to automate the build process. It's very similar to the setup described in this tutorial: http://danbahrami.io/articles/building-a-production-website-with-hugo-and-gulp-js

Here is my gulpfile: https://github.com/tomanistor/tomanistor.com/blob/master/gulpfile.babel.js

[NorseGaud]

Great, this is what I'm using to overwrite the various min files:

import gulp         from 'gulp'
import sass         from 'gulp-sass'
import autoprefixer from 'gulp-autoprefixer'
import uglify       from 'gulp-uglify'
import hash         from 'gulp-hash'
import del          from 'del'
import pump         from 'pump'

const staticDir  = 'themes/osprey-norsegaud/static/',
      scriptsDir = `${staticDir}scripts/`,
      stylesDir  = `${staticDir}styles/`

// Minify JS
gulp.task('js', (cb) => {
  // Delete old JS files
  del([`${scriptsDir}*-*.min.js`])

  // Minifiy and hash JS files
  pump([
    gulp.src(`${scriptsDir}src/*.js`),
    uglify(),
    hash({ template: '<%= name %>.min<%= ext %>' }),
    gulp.dest(scriptsDir),
    hash.manifest('cachedAssets.json'), // Create hash map
    gulp.dest('data/') // Put hash map in data folder
  ], cb)
})

// Compile and minify SCSS files to CSS
gulp.task('scss', (cb) => {
  // Delete old CSS files
  del([`${stylesDir}main-*.min.css`])

  // Compile and hash CSS files
  pump([
    gulp.src(`${stylesDir}scss/main.scss`),
    sass({ outputStyle: 'compressed' }),
    autoprefixer({ browsers: ['last 10 versions'] }),
    hash({ template: '<%= name %>.min<%= ext %>' }),
    gulp.dest(stylesDir),
    hash.manifest('cachedAssets.json'), // Create hash map
    gulp.dest('data/') // Put hash map in data folder
  ], cb)
})

// Watch scripts and styles folders for changes
gulp.task('watch', gulp.series('js', 'scss'), () => {
  gulp.watch(`${scriptsDir}src/*.js`, ['js']),
  gulp.watch(`${stylesDir}scss/*.scss`, ['scss'])
})

// Set watch as default task
gulp.task('default', gulp.series('watch'))

Here are the dev dependencies I installed:

    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "del": "^4.1.1",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^6.1.0",
    "gulp-hash": "^4.2.2",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.2"

Then, run npx gulp