Comments (3)
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.
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.
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)
- adding a carousel HOT 1
- Projects can't be clicked on iPad HOT 5
- Adding smooth scrolling to the anchor tags HOT 1
- hugo server onlocal host not see blog HOT 1
- Don't steal jQuery $ HOT 1
- Permalinks Support HOT 1
- Param for og:image/twitter card in front-matter HOT 1
- No CSS on Gitlab Pages HOT 4
- Navbar drawing over homepage HOT 2
- link underlines not showing on chrome HOT 2
- When building/serving, "error calling index: index of untyped nil" HOT 3
- Use fontawesome in footer (and elsewhere) HOT 1
- main.min.css but not looking for that in head.html HOT 1
- Theme demo broken on Hugo Themes Showcase HOT 6
- Local Gallery Item Pop-up Functionality
- Docs on how to use sass variables to change font etc HOT 2
- I am not able to generate index.html for anything but about page HOT 1
- Add support for more contact options in the footer
- Adding SVG icon at the bottom of the Footer
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from osprey.