Codekit is a preprocessing master for the Mac. It really does what it says on the tin 'Code kit helps you build websites faster and better'. It has many advance features, but even if you didn't want to use preprocessing it also gives you a live browser reload on save, optimises your images and compresses all your javascript and CSS. The Build Process How to define the steps CodeKit performs when it builds your project. Styling Remote Websites. How to get 70% smaller PNG, JPG, and GIF files for faster websites. Also, how to pronounce 'gif'. Optimizing SVGs Modern image editors write pretty sloppy SVGs. Here's how to get rid of the cruft with SVGO in CodeKit. Babel: choice mac os x. Snapz pro x 2 6 1.
- Website Builder
- How To Build Websites
- Build Websites For Free
- Website
- Codekit 2 2 – Build Websites Faster And Better Than Less
- Codekit is a preprocessing master for the Mac. It really does what it says on the tin 'Code kit helps you build websites faster and better'. It has many advance features, but even if you didn't want to use preprocessing it also gives you a live browser reload on save, optimises your images and compresses all your javascript and CSS.
- CodeKit helps you build websites faster and better.Compile Everything: Process Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript, and Compass files automatically each time you save. Easily set options for each language.Live Browser Reloads: Instantly see changes in your brow.
It's hard to summarize years of work in a single list. But hell, let's do it anyway:
The Build System
- Process every file in your project with one click.
- Migrate existing projects to use a build folder by checking one box.
- Automatic support for 'source/build' folder patterns.
- Customize the build process in an intuitive GUI.
- Run any number of Bash Scripts or AppleScript during builds.
- Drag-and-drop to reorder build steps.
- Files build automatically as you add them to your project.
- Massively multi-threaded to rip through builds quickly.
Babel
- Transpile ECMAScript 7, 6 or 2015 into ES5.
- Compile React projects.
- Easily configure Babel options
- Add your own plugins/presets in CodeKit's interface.
- Support for .babelrc files if you (or your team) use them.
Image Optimizers
- Optimize SVGs with SVGO.
- MASSIVELY improved PNG optimization using PNGQuant. (File size reductions of 75% or more with no visible changes in quality.)
- Optimize GIFs with Gifsicile.
- Optional 'lossy' JPEG optimization.
- Faster processing, especially for PNGs.
ES6 JavaScript Bundling
- Use import statements in JavaScript
- Automatically combine JS modules into a single file that web browsers understand
- Simple, one-click setup. No writing complex config files.
npm
- npm is the new default package manager
- Install, update, and manage over 1,300,000 open-source packages with a single click
- See safe and breaking updates automatically
- Install custom, unlisted packages
- View changelogs for most packages right in the app
- (Bower is still included for legacy projects.)
ESLint
- ESLint, the mother of all syntax checkers, is now built-in
- Infinitely configurable in CodeKit's UI.
- Syntax Issues are much neater and cleaner in the log.
- Automatic skipping of issues in common libraries like jQuery, etc.
- See documentation for every option right in the app.
- Support for .eslintrc files if you (or your team) use them.
Automatic Cache-Busting
- Makes sure your users always receive the latest files you upload to your server instead of cached copies on their local machines.
- Available for all 'HTML-like' languages (Slim, Kit, Markdown, etc) and your own custom languages.
- Zero configuration; it just works
- Uses file hashes to only bust the cache when a file's content has actually changed.
HTML Minifier
- Strip comments, extra whitespace, and unneeded attributes from HTML to reduce file size.
- Works for HTML files themselves and anything that compiles to HTML, like HAML, Markdown, Kit, Slim, and more.
TerserJS
- The new JavaScript minifier supports ES6 syntax so you can minify without having to transpile first.
SSL
- Automatic SSL (TLS) support for browser previewing.
- No fussing with certificates or OpenSSL; just check a box.
- Works across all devices.
Hooks
- More matching options for Hooks, including full RegEx support.
- Much easier pattern: each Hook now runs once for each file that triggers it. (In CodeKit 2, each Hook ran only one time after all files were processed, so they were harder to write. You had to handle multiple files in your Hook. Now you only ever have to handle one at a time.)
- Output and errors from Hooks now appear in CodeKit's log, just like other result information.
Add Your Own Languages
- Easily tell CodeKit about custom file types.
- Set default output paths and output actions for your custom file types using the same UI as every other language in the app.
- Combine with Hooks to extend CodeKit to process any kind of file.
Bower
- Automatic creation and updating of bower.json files.
- Install specific versions of a component.
- Specify the local name of a component.
- The components list is now cached for must faster operation.
- Easily rename and relocate the bower_components folder.
- The components list is now cached for must faster operation.
Pug
- The successor to Jade.
- Fully integrated with all options available in the UI.
- Backwards support for legacy Jade files.
Kit
- New 'optionals' syntax for variables, modeled on Swift: . These make it easy to do things like active states on nav menu items.
- The content of imported files is now properly indented with leading whitespace.
- Special comments declaring a variable no longer produce blank lines in the output file, as long as there's no trailing whitespace after the comment.
- Support for root-relative (absolute) @import statements
CSS
Website Builder
- You can now minify regular CSS files.
- You can also run Autoprefixer and Bless on regular CSS files.
- Hell, you can even get a Source Map for them.
- Honestly, just write Sass. It's 2016. Ain't nobody got time for regular CSS.
How To Build Websites
Bitters
Build Websites For Free
- The Bitters Framework (from the folks who make Bourbon and Neat) is now built-in
Website
More
Codekit 2 2 – Build Websites Faster And Better Than Less
- A brand new UI, obviously.
- Seamless migration of 2.0 projects to 3.0.
- Massive performance increases for large projects with 50,000+ files—project refreshes are much faster.
- File-watching is automatically paused when you switch to a Version Control app or (optionally) the Terminal.
- You can override remote stylesheets with local copies
- You can now create your own Groups to organize Projects in the list.
- Search field added for Projects.
- Search field added for the Files tree.
- Precise control over when CodeKit posts notifications, comes to the front, or beeps.
- The safe-start shortcut has been changed from holding down the Shift key to holding down the Option key.
- Expanded AppleScript APIs to control CodeKit from any workflow.
- Support for JavaScript import statements when determining linked files.
- Lock and unlock Output Paths for files so they update or don't update automatically as the source file moves.
- The ability to simply copy files and folders from one location to another, if needed.
- Custom dock icons for both dark and light menu modes in macOS.
- Enhanced reliability for the Preview Server—you can now use the back and forward buttons in your browser without dropping the connection.
- On slow WiFi networks, you can now hide the 'unstable connection' banner that shows up in your browser.
- Ability to hide the config.codekit3 project settings file.
- Hundreds of bug fixes
