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
andcss
, Gryp usesgulp-autoprefixer
andgulp-minifycss
. - For
js
files, Gryp will usegulp-uglyfyjs
andgulp-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, likecss/global.css
instead of{working_dir}/{type}/global.css
. - Find a way to "automatize" resolution of paths in CSS (like
cssrewrite
filter from Assetic)