A collection of packages that build a website using npm scripts.
autoprefixer, browser-sync, eslint, imagemin-cli, postcss-cssnext, onchange, npm-run-all, postcss-cli, svgo, svg-sprite-generator, uglify-js.
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.jsonfile), start by runningnpm init. This will ask a few questions and use your responses to build a basicpackage.jsonfile. Next, copy the"devDependencies"object into yourpackage.json. - If this is an existing project, copy the contents of
"devDependencies"into yourpackage.json.
- If this a new project (without a
- Now, copy any tasks you want from the
"scripts"object into yourpackage.json"scripts"object. - Finally, run
npm installto 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
cat src/css/*.css | node_modules/.bin/postcss -u postcss-cssnext > dist/css/main.css
Compile postcss with cssnext
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 postcss
Alias to run the postcss. Autoprefixer removed because it is build in cssnext
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/**/*.css' -- npm run build:css
Watches for any .css 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
Run the following tasks simultaneously: serve, watch:css & watch:js. When a .scss or .js file changes in src, 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
Feel free to create an issue, tweet me, or send me an email. I'd be glad to help where I can!