A simple webpage starter template with bootstrap and webserver using only npm-scripts.
When version upgraded, you need to type npm install once again to install newly added packages and run correctly.
- Use Bootstrap as base css framework.
- Other CSS is built as custom.css from node-sass.
- Do not use other task runners such as Grunt, Gulp, etc.
- Local web server with live reload detecting the file updates of html, scss by Browsersync.
- OSX 10.14.5 Mojave
- homebrew 2.1.4
- bootstrap 3.3.1 (minimumly included)
(Installed from homebrew. Not tested other than latest)
- node v12.4.0
- npm 6.9.0
- browser-sync 2.26.7
- node-sass 4.12.0
- nodemon 1.19.1
- html-minifier 4.0.0
- imagemin 6.1.0
- imagemin-cli 4.0.1
- imagemin-mozjpeg 8.0.0
- imagemin-pngquant 8.0.0
- imagemin-gifsicle 6.0.1
- imagemin-svgo 7.0.0
Currently, opening 2 shell windows are required. One is for watching sass to convert to css (window1), the other is for local web server with live reloading (window2).
on window1:
npm run watch
then open window2 and:
npm start
so you can see localhost:3000 as src/index.html. When you update src/scss/styles.scss or any html files on dist directory, the changes are detected by live-reloading process at window2 with scss files converted to src/css/custom.css, then the page is automatically reloaded.
Building all the assets minifying custom.css by using node-sass (with css-compression option), index.html by html-minifier, and images by imagemin. Use the command:
npm run build
then it will compress src/img/, src/css/custom.css, src/index.html and save the files to dist/img/, dist/css/custom.css, dist/index.html. This doesn't combine other css file.
npm run Lp
Type this command to run build process and production webserver to check out the built HTML on dist directory. You can see localhost:3000 opened from dist/index.html (No live-reloading) with all minified assets.
- clean all the files when building
- join css files to make one (concat)
The references of all the commands. Only four commands with (*) at the bottom are good to be used.
| Command | Description |
|---|---|
| test | test command to say "Hello World!" |
| build:css-dev | build scss (src/scss/styles.scss) to src/css (src/css/custom.css) |
| watch:css-dev | watching build:css-dev |
| build:css | build scss (src/scss/styles.scss) to dist/css (dist/css/custom.css) |
| minify:customcss | minifying dist/css/custom.css and overwrite |
| minify:html | minifying src/index.html and saving at dist/index.html |
| minify:images | minifying all the images at src/img/* and saving at dist/img/* |
| start-prd | running webserver to localhost:3000 from dist directory with livereloadingoption |
| watch * | shortcut command of watch:css-dev |
| start * | running webserver to localhost:3000 from src directory with livereloading option |
| build * | build:css + minify:customcss + minify:html + minify:images |
| Lp * | build + start-prd |