damonbauer / npm-build-boilerplate Goto Github PK
View Code? Open in Web Editor NEWA collection of packages that build a website using npm scripts.
A collection of packages that build a website using npm scripts.
Upon Sass compilation, generated CSS files are missing "webkit" prefix.
i'd love to see a new task to copy my fonts folder from src to dist. i'm not sure if there might be other similar things people just need copied.
Thanks for all these tips. I am trying to achieve something similar to zip (or gzip or tar) my artifacts. So far I've seen zlib
, node-tar
and node-zip
to accomplish that. However, they are not one line of code which I could use in my package.json file.
Do you know how to do that in a simple manner?
May be add doiuse and pug for complete web design stack?
is this possible to have a amp build? I might have to start using amp for google.
Hi @damonbauer ,
I read your article in css-tricks.com and tried to replicate it based on my needs,
I use a windows-10-x64 but the scripts only watch HTML files and ignore SCSS files completely(on the build level and page reload level).
Here is my "Package.json" and i hope you can help me.
{
"name": "devhints",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"autoprefixer": "postcss -u autoprefixer -r dist/css/*",
"scss": "node-sass --output-style compressed -o dist/css src/scss",
"serve": "browser-sync start --server --files 'dist/css/*.css, **/*.html, !node_modules/**/*.html'",
"build:css": "npm run scss && npm run autoprefixer",
"watch:css": "onchange 'src/scss/**/*.scss' -- npm run build:css",
"watch:all": "npm-run-all -p serve watch:css",
"postinstall": "npm run build:css && npm run watch:all"
},
"author": "HomamGhassemy",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^6.3.6",
"browser-sync": "^2.13.0",
"node-sass": "^3.7.0",
"npm-run-all": "^2.1.1",
"onchange": "^2.5.0",
"postcss-cli": "^2.5.2"
}
}
Please tell me if there is anything more needed.
Thanks
Thanks for that,
Is there a way that while the scripts are running in the background, when we add new images to src/images/ that they will automatically be minified into dist/images/ ?
Or at least get automatically copied from src/images/ to dist/images/ until npm restart ?
Right now when all npm scripts are running, images copied to src/images/ are not minified/copied to dist/images/ so a restart is a must and that's time consuming.
I am trying to use SVG Sprite Icons but it is not creating the positions of the icons in a stylesheet. How to use SVG Spritesheet?
we could convert the template into a html file?
I suggest to build add before watch all.
So i think when run npm install
,it will call postinstall
, and i change my postinstall
script into
npm run build:all && npm run watch:all
This will make another quickly start use this repo.
When I enter npm run clean I receive the error:
'rm' is not recognized as an internal or external command, operable program or batch file.
When I change rm to del I then receive this error:
Invalid switch - "{css".
Can anyone tell me how I need to rewrite the npm scripts file paths so that windows will not throw an error?
this doesn't seem to work on windows machines. I get an error on the uglify script when installing and the watch task for scss files also won't work
Currently, svgo optimizes the files in-place. However, it would be better not mutating any files in src/ as they may have to be manually changed/inspected in their raw state or optimizer options tweaked (which would be harder or even impossible with a optimized svg for example).
I have been using gulp for some time. For the same reasons you mentioned in your css trick article, I decided to switch to npm scripts. One thing I noticed is that the build speed is quite slow after the first build compared to how it was when I used gulp. Is there any way to speed this up? perhaps some caching ...
how do you deal with compressing HTML with this boilerplate
on the npm build boilerplate I seem to be having issues with onchange, when I test everything out separately that seems to be my issue. onchange appears to run but then doesn't seem to notice when the file has changed?
also. will onchange run async/at the same time as browser sync?
I am also trying others like npm watch no luck yet. ill let you know if I figure it out, after this I just have to setup my browsersync config and this solution will be ready for me! no more gulp!
If we keep any HTML files inside a nested folder, then build is not picking the same.
For Eg,
src
pages
page1.html
index.html
then the only index.html gets copied to dist folder. While searching this issue, I found this useful link. https://stackoverflow.com/questions/42572806/npm-copyfiles-not-correct-target-path
Whenever I run the task for generating the svg spritesheet it doesn't work. No errors in the terminal but no "sprite.svg" file is written to the dist/images/icons/ folder…
Hi Damon,
Thanks for this amazing boilerplate. I'm using it to run my static website (Hugo) build. The problem with rendered HTML pages is that their source ends messed up, with weird indentations and gaps in the HTML code.
Do you know, is it possible to minify all the .html
files recursively in a folder in root (public/
) using npm run
script? I tried minimize
from npm and while it's easy to minify one HTML file:
minimize --output public/index.html public/index.html
it's not so easy to feed the folder and make it overwrite all HTML files. The following doesn't work:
minimize --output public/**/*.html public/**/*.html
Do you know any way to minify (and overwrite) all HTML files for given folder using npm scripts?
Thank you.
Here's my question on StackOverflow, nobody replied nearly in a week.
We're using
"imagemin-cli": "^2.1.0",
but v.3 is the latest: https://github.com/imagemin/imagemin-cli
It looks like there was a breaking change, -o
flag is now required.
Double-check, but I think:
"imagemin": "imagemin src/images dist/images -p",
should be changed to:
"imagemin": "imagemin src/images -o dist/images",
I also removed -p
as there's no plugins to override. Once I did that, everything started to work fine again after update.
Hej,
I wonder what this is about? 🤔
npm-build-boilerplate/package.json
Line 24 in 1589c7a
Cheers, Michael
Should probably be globally gitignored on your system. I guess it shouldn't make its way into the repo
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.