https://github.com/stylelint/stylelint

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.

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

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

we could convert the template into a html file?

how do you deal with compressing HTML with this boilerplate

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.

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.

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).

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…

Should probably be globally gitignored on your system. I guess it shouldn't make its way into the repo

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.

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!

is this possible to have a amp build? I might have to start using amp for google.

https://www.ampproject.org/

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?

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?

Hej,

I wonder what this is about? 🤔

Cheers, Michael

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

Upon Sass compilation, generated CSS files are missing "webkit" prefix.

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 ...

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.

May be add doiuse and pug for complete web design stack?

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?