A collection of packages that build a website using npm scripts.

• List of packages used
• Using in your project
• List of available tasks
• Need help?

autoprefixer, browser-sync, eslint, imagemin-cli, node-sass, onchange, npm-run-all, postcss-cli, svgo, svg-sprite-generator, uglify-js, pug.

Many, many thanks go out to Keith Cirkel for his post and his useful CLI tools!

• First, ensure that node.js & npm are both installed. If not, choose your OS and installation method from this page and follow the instructions.
• Next, use your command line to enter your project directory.
  • If this a new project (without a package.json file), start by running npm init. This will ask a few questions and use your responses to build a basic package.json file. Next, copy the "devDependencies" object into your package.json.
  • If this is an existing project, copy the contents of "devDependencies" into your package.json.
• Now, copy any tasks you want from the "scripts" object into your package.json "scripts" object.
• Finally, run npm install to install all of the dependencies into your project.

You're ready to go! Run any task by typing npm run task (where "task" is the name of the task in the "scripts" object). The most useful task for rapid development is watch. It will start a new server, open up a browser and watch for any SCSS or JS changes in the source directory; once it compiles those changes, the browser will automatically inject the changed file(s)!

rm -f dist/{styles/*,scripts/*,images/*}

Delete existing dist files

postcss -u autoprefixer -r dist/styles/*

Add vendor prefixes to your CSS automatically

node-sass --output-style compressed -o dist/styles source/styles

Compile Scss to CSS

eslint source/scripts

"Lint" your JavaScript to enforce a uniform style and find errors

mkdir -p dist/scripts && uglifyjs source/scripts/*.js -m -o dist/scripts/app.js && uglifyjs source/scripts/*.js -m -c -o dist/scripts/app.min.js

Uglify (minify) a production ready bundle of JavaScript

imagemin source/images/* -o dist/images

Compress all types of images

svgo -f source/images/icons && mkdir -p dist/images && svg-sprite-generate -d source/images/icons -o dist/images/icons.svg

Compress separate SVG files and combine them into one SVG "sprite"

pug --output-style nested -o dist/template/ source/template/*.pug

Render pug files to html format

browser-sync start --server --files 'dist/styles/*.css, dist/scripts/*.js, **/*.html, !node_modules/**/*.html'

Start a new server and watch for CSS & JS file changes in the dist folder

run-s scss autoprefixer

Alias to run the scss and autoprefixer tasks. Compiles Scss to CSS & add vendor prefixes

run-s lint concat uglify

Alias to run the lint, concat and uglify tasks. Lints JS, combines source JS files & uglifies the output

run-s imagemin icons

Alias to run the imagemin and icons tasks. Compresses images, generates an SVG sprite from a folder of separate SVGs

run-s pugtohtml

Alias to run the pugtohtml tasks. Render pug file to html from a folder of separate templates

run-s build:*

Alias to run all of the build commands

onchange 'source/**/*.scss' -- run-s build:styles

Watches for any .scss file in source to change, then runs the build:styles task

onchange 'source/**/*.js' -- run-s build:scripts

Watches for any .js file in source to change, then runs the build:scripts task

onchange 'source/images/**/*' -- run-s build:images

Watches for any images in source to change, then runs the build:images task

onchange \"source/template/*.pug\" -- run-s build:pug

Watches for any pugs in source to change, then runs the build:pug task

run-p serve watch:*

Run the following tasks simultaneously: serve, watch:styles, watch:scripts & watch:images. When a .scss or .js file changes in source or an image changes in source/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

run-s build watch

Runs watch after npm install is finished

Feel free to create an issue, tweet me, or send me an email. I'd be glad to help where I can!