Automatically converts JS and CSS pre-processor formats such as Sass, SCSS, Less and CoffeeScript. Plus, with the use of Javier Marín's css_optimizer, dealing with pesky CSS annoyances like vendor prefixes are a thing of the past.
Cinch checks the status of your web files and automatically loads new styles and scripts when a change is detected.
Don’t need minification? Only using .less files? Cinch loads only the dependencies you need, keeping server load small and speeding up execution times.
Cinch creates a static version of your combined JS/CSS files anytime changes have been detected in your site’s files, which it will serve to users until new changes are made.
If the user already has the latest version of your files, ‘304 Not Modified’ headers are sent to the user instead of sending the site files again.
Cinch combines all of your JS and CSS files into just one file. This reduces the number of HTTP requests your users' browser will need to make, speeding up your site and making scripts run more consistently.
Minifying files gets rid of all unnecessary white space and comments in your files, decreasing the amount of bandwidth and time needed to download them.
Cinch uses gzip when available to compress files even further before sending them to your users.
looks like this in cinch:
All settings can be applied to any group of files. Settings can be adjusted by adding them to the query string in a <script> or <link> tag, separated by ampersands (&), as shown below.
<link href="/cinch/?files=[normalize],!/css/layout.less,/css/text.scss&force=true" type="text/css">
Also worth noting, default settings can be changed by editing the
$defaults variable in
A list of JS or CSS files to include.
NOTE: Files should contain relative path from site root to the files being listed (eg. /js/scripts.js).
To disable minification on an individual file, simply add ‘!’ to the beginning of that file’s path.
To include an external package, enclose the name of the package and the version number (optional) in a pair of square brackets, separated by a forward slash(/). If no version is given, the most recent version of the package will be used.
A full list of Bower packages can be found on the Bower website.
Settings can be adjusted by adding them to the query string in a <script> or <link> tag, separated by an ampersand (&).
Indicates the type of files being sent to cinch. When set to auto, cinch will do it’s best to automatically detect which type of files are being used, based on the extension of the first file in the list.
Forces cinch to rebuild the cache and update the user’s browser with the newest code on every page load, even if no changes have been detected.
Adjusts minification/obfuscation settings on web files.
NOTE: Files marked with an exclamation mark (!) will not be minified regardless of this setting’s value.
When enabled, debug information (such as filenames and errors) are displayed at the top of the output files. Otherwise, errors are ignored and all extra annotations are hidden.
Automatically checks for changes to your web files and reloads those files if a new version is found.
Once development has completed on a site, it is highly recommended that you enable 'Production Mode' within cinch. Production Mode allows developers to disable the creation of new cache files and prevents cinch from clearing old cache files. This has two major effects:
1. Reduces server load (as this mode bypasses most of cinch's code and loads directly from cache)
2. Increases security (by preventing unwanted scripts from being created on the server)
To enable Production Mode, open
cinch/config.php and change the the
define('PRODUCTION', false); to
There could be a lot of things causing cinch not to run properly on your site: invalid links to cinch or your web files, errors in your code, etc. If you're getting a 404 error on your cinch links, then make sure cinch is properly loaded on your server and your links are correct. If your site is loading cinch, then you can check the top of the output JS/CSS files to see if cinch ran into any bugs or errors. Debug output in cinch is enabled by default.
Just overwrite the cinch folder with the new version! All of your dependencies will be automatically re-downloaded and all of your cache files will be rebuilt the next time you visit your page. After you've rebuilt your cache files, don't forget to set the 'PRODUCTION' constant at the top of the
cinch/config.php file if you want to protect your cache folder.
type=js properties to your file links.
Some servers are configured to not allow the downloading of files on remote servers, which is what cinch does to load package files. Fortunately, there is an easy workaround: Just copy the files you need to your server and link to them directly with cinch.
Don't worry! This happens a lot as part of the development process. You can delete all of the files in your
/cinch/cache folder and cinch will rebuild all of your cache files automatically. Or just wait a month and cinch's automatic clean-up scripts will delete old cache files for you.