Sandpaper

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 --lint can be used to check for syntax errors, style errors, and other common problems in HTML, CSS, and JavaScript. Add the --watch flag to perform linting on every file save.
• sandpaper --lint --strict is used to check for code style problems, keeping code consistently readable across different developers.
• sandpaper --build uses minification to reduce the size of HTML, CSS, JavaScript. Additionally, images will be optimized.
• sandpaper --sync watches 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

1. Create and edit all your .html, .css, and .js files inside a folder named src.
2. Open command prompt above the src folder, for instance, if you have /SomeProject/src open command prompt in the /SomeProject folder.
3. Run the sandpaper command 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

• gulp
• meow
• browserSync

Libraries used for linting

• htmlhint
• htmlhint-stylish
• stylelint
• postcss
• postcss-reporter
• markdownlint

if --strict flag is not specified

• jshint
• jshint-more-stylish

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