gryp v0.2.0

Gryp.js

Gulp on steroids

Gryp is a CLI tool built on top of Gulp.js that can compile assets based on a simple configuration file.

Installation

Install Gryp:

$ npm install gryp

A binary should have been created in the node modules directory, you can use it like this:

./node_modules/.bin/gryp

Usage

First, you need to create a .gryp.yml file at the root of your project. You can configure it in the next documentation sections.

Note: You can name and place the file wherever you want and tell Gryp to load it by adding the -c <grypFile> option when using it.

Available commands:

• gryp less Dumps the Less assets to the "css" output directory.
• gryp css Dumps the CSS assets to the "css" output directory.
• gryp js Dumps the JS assets to the "js" output directory.
• gryp dump Runs all the above commands.
• gryp watch Watches all assets to dump them all when one is modified.
• gryp revisions Dumps a manifest of all revisions into a single file. You can use the [-f <format:yml|json>] option to dump the file in yml/json. Note: You need the base manifests for this, so the command won't do anything if you run it after using --no-rev in any of the dump commands.

How it works?

Basically, Gryp takes all the sources you tell him to use, concatenates them, and dumps them in another directory (default to web).

You can actually compile less, css and js files.

If you add the --prod option, Gryp will do some cool things for you:

• For less and css, Gryp uses gulp-autoprefixer and gulp-minifycss.
• For js files, Gryp will use gulp-uglyfyjs and gulp-sourcemap to fasten debugging in prod.

Additionnally, Gryp creates a "versioned" version of the file so that you can use it in your production environment to avoid the browser caching the assets when you need them to be reloaded (you can avoid this behavior by adding the --no-rev option to your command).

As all versioned files names are dynamic, the revisions command can dump all of the revisions into a single file so you can just use it in your application when resolving the assets' path.

Configuration file

Here is an example of a .gryp.yml simple file:

assets:
    global_css:
         type: css
         sources:
             - web/css/base.css
             - web/css/custom_theme.css
         output: global.css
    global_js:
         type: js
         sources:
             - web/js/jquery.min.js
             - web/js/custom_functions.js
         output: global.js

Take a look at the .gryp.example.yml file to see what you can do, and what is the default configuration.

Example:

/var/www/my_app $ node_modules/.bin/gryp dump --prod

Processed CSS "global_css" to output "/var/www/my_app/web/css/global.css"

Processed JS "global_js" to output "/var/www/my_app/web/js/global.js"

The manifest was dumped to /var/www/my_app/cache/rev-manifest.json

Long-term roadmap:

• Add the possibility to separate the single manifest from all other manifests
• Change the behavior of the gulp.dest calls to allow specifying more "custom" compilation outputs, like css/global.css instead of {working_dir}/{type}/global.css.
• Find a way to "automatize" resolution of paths in CSS (like cssrewrite filter from Assetic)