Code Monkey home page Code Monkey logo

Comments (3)

NorseGaud avatar NorseGaud commented on July 20, 2024

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

from osprey.

tomanistor avatar tomanistor commented on July 20, 2024

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

from osprey.

NorseGaud avatar NorseGaud commented on July 20, 2024

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

from osprey.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.