{"id":16223544,"url":"https://github.com/kaisermann/crius","last_synced_at":"2025-04-08T01:45:17.067Z","repository":{"id":85332557,"uuid":"68262832","full_name":"kaisermann/crius","owner":"kaisermann","description":"A flexible and modular gulp front-end workflow","archived":false,"fork":false,"pushed_at":"2018-02-16T16:39:52.000Z","size":1174,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-14T01:49:31.906Z","etag":null,"topics":["browsersync","es6","gulp","sage","stylus","workflow"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kaisermann.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-09-15T03:13:28.000Z","updated_at":"2023-06-28T16:12:54.000Z","dependencies_parsed_at":"2023-03-16T13:15:41.444Z","dependency_job_id":null,"html_url":"https://github.com/kaisermann/crius","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Fcrius","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Fcrius/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Fcrius/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kaisermann%2Fcrius/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kaisermann","download_url":"https://codeload.github.com/kaisermann/crius/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247761030,"owners_count":20991533,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browsersync","es6","gulp","sage","stylus","workflow"],"created_at":"2024-10-10T12:19:13.062Z","updated_at":"2025-04-08T01:45:17.033Z","avatar_url":"https://github.com/kaisermann.png","language":"JavaScript","readme":"# Crius\n\n\u003e A flexible and modular gulp front-end workflow\n\nWith **crius** you can:\n\n* Write CSS with Stylus\n  * Build your website's grid with the RolleiFLEX declarative flex helper framework. (stylus)\n  * Use simplified media queries with rupture (stylus)\n  * Responsive font-size and [other useful mixins](https://github.com/kaisermann/crius/blob/master/assets/styles/config/mixins.styl)\n* Write modern Javascript\n* See live changes (CSS/JS/HTML) on your project with [browserSync](https://www.browsersync.io/)\n* Need to manage a new type of resource, like, let's say... sounds? Just define it in the [`crius.json`](https://github.com/kaisermann/crius/blob/master/crius.json) and let the magic happen!\n\n## Requirements\n\n* [Node.js](http://nodejs.org/) \u003e= 8.6.0\n* [Gulp](https://github.com/gulpjs/gulp#installation) \u003e= 4.x.x\n\n## Installation\n\n1. `git clone git@github.com:kaisermann/crius.git`\n1. `npm install` or `yarn`\n\n## Usage samples\n\n* [Selene](https://github.com/kaisermann/selene) - Wordpress theme based on [Sage](https://github.com/roots/sage) and Crius.\n* [Hyperion](https://github.com/kaisermann/hyperion) - A static web-app workflow based on Crius.\n\n## Theme Development\n\n### Build commands\n\nPretty much every task needed is covered by the `package.json` scripts:\n\n* `npm run watch|start` - Run browsersync and watch file changes;\n* `npm run build` - Build minified assets;\n* `npm run build:dev` - Build unminified assets;\n* `npm run build:production` - Build the assets, append a hash to the name;\n* `npm run clean` - Remove the `dist` folder;\n* `npm run lint` - Lint all `styl` and `js` files;\n* `npm run lint:styles` - Lint all `styl` files;\n* `npm run lint:scripts` - Lint all `js` files.\n\n### Gulp\n\n* `gulp` / `gulp build` - Erases distribution directory and builds all assets\n* `gulp compile` - Same as `gulp build` - without deleting distribution directory\n* `gulp clean` - Deletes the distribution directory\n* `gulp watch` - Starts watching the asset files\n* `gulp sizereport` - Displays the size and gzipped size of your project\n* `gulp scripts|styles|fonts|images` - Build the specified resource assets;\n* `gulp lint` - Lint all `styl` and `js` files;\n* `gulp lint:styles` - Lint all `styl` files;\n* `gulp lint:scripts` - Lint all `js` files.\n\n#### Creating new tasks\n\nTo create new generic gulp tasks, just create a file inside `gulpfile.js/tasks`, import `gulp` and create a task as if it was inside the gulpfile itself.\n\n#### Gulp Parameters\n\nYou can also pass the following parameters to gulp:\n\n* `--sync` Starts browserSync. Use only with `gulp watch`\n* `--report` or `-r` Report mode\n  * If used with `watch`, it will display the assets sizes of the current resource being edited\n* `--maps` Allows sourcemaps to be created\n* `-d` Asset debug mode. It won't minify the files\n* `-p` Production mode. File names will be appended with a hash of its content for cache-busting\n\nThe available parameters can be extended at [`gulpfile.js/Flags.js`](https://github.com/kaisermann/crius/blob/master/gulpfile.js/Flags.js).\n\n### Supported browsers\n\nThe supported browsers for CSS autoprefixing, eslint-compat plugin, etc can be configured by editing the `browserslist` array inside the [`package.json`](https://github.com/kaisermann/crius/blob/master/package.json).\n\n## Manifest (`crius.json`) Documentation\n\n### The `paths` object\n\n```json\n{\n  \"paths\": {\n    \"source\": \"app/\",\n    \"dist\": \"dist/\",\n    \"manifest\": \"assets.json\"\n  }\n}\n```\n\nThe [`paths`](https://github.com/kaisermann/crius/blob/master/crius.json#L3) object MAY have a `manifest` **string** attribute that defines the revision manifest's file name on production distributions.\n\nDefaults to `\"assets.json\"`\n\n---\n\nThe `crius.jon` object MAY have a `browserSync` **object** if it's planned to use browserSync.\n\n```json\n{\n  \"browserSync\": {\n    \"mode\": \"proxy\",\n    \"baseDir\": \"./\",\n    \"index\": \"index.html\",\n    \"devUrl\": \"localhost/crius\",\n    \"watch\": [\"{lib,templates}/**/*.{php,html}\", \"*.{php,html}\"],\n    \"whitelist\": [],\n    \"blacklist\": []\n  }\n}\n```\n\n`watch` is an **optional** **array** or a `string` of files to be watched by browserSync. **Do not** watch your asset files via browserSync as they are already being watched by `gulp.watch`. Defaults to `[]`.\n\n`whitelist` and `blacklist` are each one an **optional** **array** or a `string` of supposed watched files allowed/not allowed to be watched. Defaults to `[]`.\n\n`mode` is a **optional** `string` that defines in which mode should browserSync be initialized.\n\n* In `server` mode, it creates a temporary server for your project.\n\n* In `proxy` mode (default), it just proxies the `devUrl` to an already existing server.\n\nWith `mode: \"proxy\"`\n\n* `devUrl` is a **mandatory** `string` that specifies your projects development proxy url.\n\nWith `mode: \"server\"`\n\n* `baseDir` is a **optional** `string` that defines the root directory for the browserSync server (defaults to the gulpfile directory).\n\n* `index` is a **optional** `string`that defines the entry file for the browserSync server (defaults to `index.html`)\n\n---\n\n### The `resources` object\n\n```json\n{\n  \"resources\": {\n    \"scripts\": {\n      \"pattern\": \"*.js\",\n      \"directory\": \"scripts\",\n      \"assets\": {\n        \"main.js\": {\n          \"files\": \"index.js\"\n        }\n      }\n    }\n  }\n}\n```\n\n---\n\nEach resource type MAY have a **directory** `string` attribute, defining where the assets are inside [`paths.src`](https://github.com/kaisermann/crius/blob/master/crius.json#L4) and where the built ones will be inside [`paths.dist`](https://github.com/kaisermann/crius/blob/master/crius.json#L5). If not specified, the resource type name will be used.\n\nEach resource type MUST have a **assets** `object`, defining which assets are to be generated. The generated file output name is represented by the key:\n\n```json\n...\n  \"assets\": {\n    \"main.js\": {\n      \"files\": \"index.js\",\n      \"autoload\": \"path/relative/to/**/gulpfile.js\"\n    }\n  }\n...\n```\n\nThe value can be either a `string`, an array of `strings` or an `object` with a MUST-HAVE `files` and an OPTIONAL `autoload` properties.\n\nIf a path begins with `~`, `crius` references the `node_modules` directory. If not, the path is relative to the `resource directory`.\n\n---\n\n`crius` **automatically** creates a gulp task for each resource. All of a resource assets will be moved from the [`paths.source`](https://github.com/kaisermann/crius/blob/master/crius.json#L4) to [`paths.dist`](https://github.com/kaisermann/crius/blob/master/crius.json#L5) without you doing anything besides defining the resource in the [`crius.json`](https://github.com/kaisermann/crius/blob/master/crius.json).\n\nIf a resource assets need any type of processing, a drop-in module can be created at [`gulpfile.js/tasks/resources/${resourceName}.js`](https://github.com/kaisermann/crius/blob/master/gulpfile.js/resources/) to modify the stream with a [lazypipe](https://github.com/OverZealous/lazypipe). The file name must match the resource name.\n\nResource module format:\n\n```javascript\nconst lazypipe = require('lazypipe')\n\nmodule.exports = {\n  // Names of tasks to be ran before/after the resource task\n  tasks: {\n    before: ['nameOftaskToRunBEFOREThisOne'],\n    after: ['nameOftaskToRunAFTERThisOne'],\n  },\n  pipelines: {\n    // Pipeline attached to each asset stream\n    each: asset =\u003e {\n      return lazypipe()\n    },\n    // Pipeline attached to all assets streams merged\n    // Useful for manifests, etc\n    merged: resourceInfo =\u003e {\n      return lazypipe()\n    },\n  },\n}\n```\n\nYou can see other real examples by looking at the [`gulpfile.js/tasks/resources`](https://github.com/kaisermann/crius/blob/master/gulpfile.js/tasks/resources/) directory.\n\n## External links\n\n* [RolleiFLEX grid documentation](http://kaisermann.github.io/rolleiflex/)\n* [Ruputure: Media Queries with Stylus documentation](http://jescalan.github.io/rupture/)\n* [Sage documentation](https://github.com/roots/sage/) (Sage 9 uses webpack, please refer to the **8._._** documentation.)\n\n## Credits and Inspirations\n\n* [Asset builder](https://github.com/austinpray/asset-builder)\n* [Sage Starter Theme](https://github.com/roots/sage/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaisermann%2Fcrius","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaisermann%2Fcrius","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaisermann%2Fcrius/lists"}