IMPROVE BUILD SYSTEM BEFORE WE START PHASE II

[thatkookooguy]

IMPROVE BUILD SYSTEM BEFORE WE START PHASE II

FEATURE

---

I want to include a lot of changes to our build system. Here they are in a jiffy:

First, we need to replace JSCS with ESLint since it was merged into ESLint (for replacing the formatter as well http://stackoverflow.com/questions/37107999/how-to-fix-file-with-gulp-eslint)

Cross Browser Support

• autoprefixer - parse CSS and add vendor prefixes to rules by Can I Use

Size Optimization

• gulp-uncss - remove unused CSS from your projects
• gulp-htmlmin - neat HTML minificator
• psi - PageSpeed Insights with reporting.
• tmi - TMI (Too Many Images) - discover your image weight on the web.
• gulp-csso - very cool CSS minificator
• gulp-useref - parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets

Code Clarity & Maintenance

• gulp-complexity - evaluates code maintainability using Halstead and Cyclomatic metrics.
• gulp-jscpd — copy/paste detector for programming source code (This helps to find out if there are pieces of code that can be merged into a function)
• gulp-buddy.js - magic number detection for javascript (Forces you to have all numbers in variables for readability, instead of having them inline)
• gulp-jsonlint - JSON validator
• gulp-uglify - JavaScript compressor (MAYBE!)
• gulp-csscomb - CSS\SCSS Formatter
• gulp-csslint - CSS linter.
• gulp-htmlhint - HTML validator (their site's demo uses ace.js and shows the errors inline. We might implement this in our ace.js as well for a easy win :-))

Graphics

Not sure if this is useful to us yet, since we don't have so many graphics. But I'll implement this if I'll have time and WCS, we won't use it

• gulp-iconfont - SVG to webfont converter (might be nice as a kibibit service to convert fonts)
• gulp-svgstore - merge SVGs from a folder (might be interesting)
• gulp-imacss - application and library that transforms image files to data URIs
• gulp-spritesmith - converting a set of images into a spritesheet and corresponding CSS variables

Others

• gulp-notify - automatic error messages in system notifications center when Gulp tasks fail
• gulp-git - able to use Git commands (might use this for version numbers or git hooks)
• gulp-bump - increments versions in package JSON and gulp-update, which automatically updates packages
• gulp-jsdoc - generate JavaScript documentation by running JSDoc3
• main-bower-files - inject Bower packages (YESS! no more adding bower packages ourselves in our index.html)
• gulp-removelogs - remove console logging statements (we want to remove at least assert statements in production
• gulp-changed and gulp-newer — run Gulp tasks with only those source files modified since the last successful run (will allow us to format files on save and more neat stuff)
• gulp-clean and gulp-copy - respectively remove and copy sources (for creating the deployed folder)
• gulp-replace - Search and replace strings in text files
• gulp-filesize - displays sizes of files in a readable format
• gulp-plumber - prevents pipe breaking caused by errors from gulp plugins
• gulp-browser-sync - keep multiple browsers & devices in sync when building websites

This Might be Awesome

• ngrok - Introspected tunnels to localhost (can help us expose kibibit without the secret gist mechanism!!!! need to check this out)

We need kibibit to optimize itself when serving as the finished product (also known as production 😜 ). So, we'll have a deploy folder with all the compressed files and kibibit will be actually served from there. Every time you'll save a file, it will run through the correct process (linting, formatting, giving statistics on our original files, and compiling, evaluating, and optimizing our deploy folder and giving more statistics for that as well)