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

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

• prettier
• babel-cli
• autoprefixer
• browser-sync
• eslint
• imagemin-cli
• node-sass
• onchange
• npm-run-all
• postcss-cli
• svgo
• svg-sprite-generator
• uglify-js

• Make sure you have Node and Npm installed on your machine , go here
• From the terminal cd into your project directory and run npm install to install all the dependencies in the package.json file.
• Then you can run any of the scripts from the package.json file by running npm run script-name, for example the the most frequently used script would be npm run watch:all which runs the server and watches for changes in scss, js,and images folders in src. Once a change is detected it converts to es5 and creates the production ready minified, prettified and bundled files in the dist directory. The dist/js folder contains the compiled js files without compressing which are useful for development. So the script in index.html is set to the dist/js/main.js but if you want to see minified and bundled production version just change the script src to dist/js-min/app.min.js.

• 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:all. It will start a new server, open up a browser and watch for any SCSS or JS changes in the src directory; once it compiles those changes, the browser will automatically inject the changed file(s)!

rm -f dist/{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

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/**/*.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 serve watch:css watch:js watch:images

Run the following tasks simultaneously: serve, watch:css, watch:js & watch:images. When a .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