cpettaSandpaper
What is Sandpaper
- Sandpaper is a command line tool that's used to smooth out the rough edges when coding websites using HTML, CSS, and JavaScript.
- Heavily inspired by XO, Sandpaper is a build system wrapper. It originally started as a gulpfile and has since been updated to use the commandline.
Primary Project Goals
- Provide tools to help developers avoid common errors in HTML, CSS, and JavaScript.
- Improve maintainability of code produced by developers.
- Improve performance of webpages.
- Automate common development tasks.
How Sandpaper helps achieve these goals
sandpaper --lintcan be used to check for syntax errors, style errors, and other common problems in HTML, CSS, and JavaScript. Add the--watchflag to perform linting on every file save.sandpaper --lint --strictis used to check for code style problems, keeping code consistently readable across different developers.sandpaper --builduses minification to reduce the size of HTML, CSS, JavaScript. Additionally, images will be optimized.sandpaper --syncwatches files for changes, and automatically builds and reloads a webserver with your site.
Installation
npm install sandpaper -g
from your project folder which contains an /src folder run:
npm init sandpaper
Workflow
- Create and edit all your .html, .css, and .js files inside a folder named
src. - Open command prompt above the
srcfolder, for instance, if you have/SomeProject/srcopen command prompt in the/SomeProjectfolder. Run the
sandpapercommand with your desired flags. all available flags are listed under [flags]Note: Running sandpaper with no flags is equivlent to running sandpaper --
Flags
--lint
Check code for errors.
--build
Optimize code and save to /dev or /dist (if --production is specified.)
--sync
Start browser synchronized server, compiles code on change.
--strict
Lint codding style in addition to errors.
--fix
fixes coding style issues, such as tabs/spaces, indentation, and css property order.
--watch
Remain running, re-lint or re-build whenever a file is changed.
--prod
Build for production, do not include source maps and minify code.
Sandpaper would not be possible without these great open-source libraries
Libraries used for linting
if --strict flag is not specified
if --strict flag is specified
- eslint
- XO
- unified
- rehype-parse
- rehype-stringify
- rehype-retext
- remark-retext
- unified-engine-gulp
- retext-english
- retext-contractions
- retext-indefinite-article
- retext-passive
- retext-quotes
- retext-repeated-words
- retext-sentence-spacing
- retext-redundant-acronyms
Libraries used for building
- autoprefixer
- cssnano
- gulp-cache
- gulp-changed
- gulp-htmlmin
- gulp-html-postcss
- gulp-if
- gulp-imagemin
- gulp-uglify
- gulp-zip
- node-css-mqpacker
- postcss
- postcss-unprefix
- postcss-reporter
- postcss-preset-env
- pump
- through2
License
