Sébastien Dancer-Michel's personal website
- Clone this repo — or copy the contents
"devDependencies"
into yourpackage.json
+ copy any tasks you want from the"scripts"
object into yourpackage.json
"scripts"
object. - Run
sudo npm install
- Run any taks with
npm run task
wheretask
is the name of the task from the"scripts"
object. - Quickstart:
npm run postinstall
-> NPM will build the project in the/dist
folder and start a live-reloading server after.
- Install now with
sudo npm i now -g
- Run
now
in your terminal. It will give you a unique URL and install/build/run your project automatically. Note: now will run 2 important tasks afterinstall
:build
which will build the /dist directory, andstart
which will start the micro server usingindex.js
.
rm -f dist/{index.html,css/*,js/*,images/*}
Delete existing dist files
postcss -u autoprefixer -r dist/css/*
Add vendor prefixes to your CSS automatically
node-sass --output-style compressed -o dist/css src/scss
Compile Scss to CSS
eslint src/js
"Lint" your JavaScript to enforce a uniform style and find errors
mkdir -p dist/js && uglifyjs src/js/*.js -m -o dist/js/app.js && uglifyjs src/js/*.js -m -c -o dist/js/app.min.js
Uglify (minify) a production ready bundle of JavaScript
imagemin src/images/* -o dist/images
Compress all types of images
svgo -f src/images/icons && mkdir -p dist/images && svg-sprite-generate -d src/images/icons -o dist/images/icons.svg
Compress separate SVG files and combine them into one SVG "sprite"
browser-sync start --server --files 'dist/css/*.css, dist/js/*.js, **/*.html, !node_modules/**/*.html'
Start a new server and watch for CSS & JS file changes in the dist
folder
serve -p 4444'
Serve entire project on a local URL on port 4444, does not watch for changes
pug --output-style compressed -o dist/ src/pug/*.pug
Compiles index.pug into dist/index.html
npm run scss && npm run autoprefixer
Alias to run the scss
and autoprefixer
tasks. Compiles Scss to CSS & add vendor prefixes
npm run lint && npm run concat && npm run uglify
Alias to run the lint
, concat
and uglify
tasks. Lints JS, combines src
JS files & uglifies the output
npm run imagemin && npm run icons
Alias to run the imagemin
and icons
tasks. Compresses images, generates an SVG sprite from a folder of separate SVGs
npm run build:css && npm run build:js && npm run build:images
Alias to run all of the build
commands
onchange \"src/pug\" -- npm run build:pug
Watches for any .pug file in src
to change, then run the build:pug
task
onchange 'src/**/*.scss' -- npm run build:css
Watches for any .scss file in src
to change, then runs the build:css
task
onchange 'src/**/*.js' -- npm run build:js
Watches for any .js file in src
to change, then runs the build:js
task
onchange 'src/images/**/*' -- npm run build:images
Watches for any images in src
to change, then runs the build:images
task
npm-run-all -p bsync watch:pug watch:css watch:js watch:images
Run the following tasks simultaneously: serve
, watch:pug
, watch:css
, watch:js
& watch:images
. When a .pug, .scss or .js file changes in src
or an image changes in src/images
, the task will compile the changes to dist
, and the server will be notified of the change. Any browser connected to the server will then inject the new file from dist
npm run build:all && npm run watch:all
Runs watch:all
after npm install
is finished
node --harmony-async-await index
Start the micro server (used by now)
npm run postinstall
Will build project (used by now)