{"id":15280565,"url":"https://github.com/swissquote/crafty","last_synced_at":"2025-04-05T17:03:43.538Z","repository":{"id":37470244,"uuid":"112519571","full_name":"swissquote/crafty","owner":"swissquote","description":"The task runner that binds them all","archived":false,"fork":false,"pushed_at":"2025-03-25T05:53:33.000Z","size":64846,"stargazers_count":31,"open_issues_count":10,"forks_count":13,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-29T19:02:54.001Z","etag":null,"topics":["babel","build-tool","eslint","gulp","postcss","rollup","stylelint","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://swissquote.github.io/crafty/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/swissquote.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","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":"2017-11-29T19:39:34.000Z","updated_at":"2025-03-25T05:52:33.000Z","dependencies_parsed_at":"2022-07-14T05:30:27.818Z","dependency_job_id":"527fa493-c60e-4b26-b8ed-3bf00ec16281","html_url":"https://github.com/swissquote/crafty","commit_stats":{"total_commits":2968,"total_committers":19,"mean_commits":"156.21052631578948","dds":0.5909703504043127,"last_synced_commit":"fdd127fba162d1edf706e499f8a6c8c10368cfe1"},"previous_names":[],"tags_count":59,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swissquote%2Fcrafty","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swissquote%2Fcrafty/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swissquote%2Fcrafty/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/swissquote%2Fcrafty/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/swissquote","download_url":"https://codeload.github.com/swissquote/crafty/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369953,"owners_count":20927928,"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":["babel","build-tool","eslint","gulp","postcss","rollup","stylelint","typescript","webpack"],"created_at":"2024-09-30T12:11:48.708Z","updated_at":"2025-04-05T17:03:43.524Z","avatar_url":"https://github.com/swissquote.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Crafty\n\n[![Latest Version](https://img.shields.io/github/release/swissquote/crafty.svg?style=flat-square)](https://github.com/swissquote/crafty/releases)\n[![license](https://img.shields.io/github/license/swissquote/crafty.svg?style=flat-square)](https://github.com/swissquote/crafty/blob/master/LICENSE.md)\n[![Build Status](https://img.shields.io/travis/swissquote/crafty/master.svg?style=flat-square)](https://travis-ci.org/swissquote/crafty)\n[![Build Status](https://github.com/swissquote/crafty/workflows/Node%20CI/badge.svg)](https://github.com/swissquote/crafty/actions)\n[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=crafty\u0026metric=alert_status)](https://sonarcloud.io/dashboard?id=crafty)\n[![npm](https://img.shields.io/npm/dt/@swissquote/crafty.svg?style=flat-square)](https://npmjs.com/package/@swissquote/crafty)\n[![Renovate](https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square)](https://renovatebot.com)\n\nCrafty is a build configuration manager, Opinionated but configurable, you can use its presets to build your applications with Webpack, Gulp, Babel, ESLint, TypeScript, PostCSS, Stylelint and other tools.\n\nCrafty has a default configuration and provides possibilities to extend that default configuration.\n\n## Installation and usage\n\n### Install\n\n```bash\nnpm install @swissquote/crafty \\\n  @swissquote/crafty-preset-babel \\\n  @swissquote/crafty-preset-postcss \\\n  @swissquote/crafty-preset-jest \\\n  @swissquote/crafty-runner-webpack \\\n  @swissquote/crafty-runner-gulp\n```\n\n### Configure\n\nIn `crafty.config.js` add\n\n```javascript\nmodule.exports = {\n  presets: [\n    \"@swissquote/crafty-preset-babel\",\n    \"@swissquote/crafty-preset-postcss\",\n    \"@swissquote/crafty-preset-jest\",\n    \"@swissquote/crafty-runner-webpack\",\n    \"@swissquote/crafty-runner-gulp\",\n  ],\n  js: {\n    app: {\n      runner: \"webpack\",\n      source: \"js/app.js\",\n    },\n  },\n  css: {\n    app: {\n      source: \"css/app.scss\",\n      watch: [\"css/**\"],\n    },\n  },\n};\n```\n\n### Run\n\nYou can run the commands using [npx](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) or by adding them to the `scripts` section of your `package.json`\n\n```bash\nnpx crafty run\nnpx crafty test\n```\n\nWith this configuration you get:\n\n- Create a JavaScript bundle compiled with [Webpack](https://webpack.js.org/) and [Babel](https://babeljs.io/).\n- Linted your JavaScript with [ESLint](https://eslint.org/).\n- Create a CSS bundle compiled with [PostCSS](http://postcss.org/).\n- Lint your CSS with [Stylelint](https://stylelint.io/).\n- Run your tests with [Jest](https://facebook.github.io/jest/) and compile them with [Babel](https://babeljs.io/).\n\n## Why\n\nGetting started in a web application is easy, write an `index.html`, a\n`style.css`, and a `script.js` file and you're good to go.\n\nBut on bigger apps you might want some CSS preprocessing ? but which one to\nchoose ? **Sass**, **Less**, **Stylus**, **PostCSS** ? Then you want to write\nyour JavaScript using EcmaScript 2015+, but do you transpile it with **Traceur** or\n**Babel** ? Then you have to package your JavaScript in bundles, you have the\nchoice between **rollup.js**, **Browserify**, **Webpack** or **Pundle**. Now you\nwant to lint your JavaScript, do you choose **ESLint** or **JSHint** ? To\norchestrate all this, do you use **Gulp**, **Broccoli** or **Grunt** ?\n\nYou guessed it, each tool in the JavaScript stack has at least two alternatives,\nand there is not always a clear winner. This lead to a \"JavaScript Fatigue\" in\nthe community these last years and people got lost in what tools to choose\nto do these tasks.\n\nBut even when you chose the tool you want to work with, you still have to\nconfigure it, maintain it up to date and follow up on changes.\n\n**Crafty** is an attempt to create a package that is simple to install and\nconfigure. Specify your JavaScript and CSS files in entry and get them compiled,\ncompressed and linted with the best tools available.\n\nEach tool is fine-tuned to give the best and to follow Swissquote's Guidelines\nand best practices for Frontend development.\n\nMost aspects of **Crafty** are configurable and updates are painless.\n\n[More on Why](https://swissquote.github.io/crafty/Why.html)\n\n## Features\n\nThe main feature of **Crafty** is to compile your JavaScript, CSS, compress your\nimages and deliver them in the target directory.\n\nBut shortening the list of features you gain with **Crafty** to one sentence\ndoesn't give it's full measure. Here's some other features it has:\n\n### JavaScript\n\n- Write **EcmaScript 2015**, transpiled to JavaScript all browsers understand\n  with Babel.\n- Write **TypeScript**, transpiled to EcmaScript 5 with the TypeScript compiler.\n- Bundle all JavaScript files together with the help of **Webpack**.\n- Compress the output with **SWC** and **Terser** to create the smallest possible bundles.\n- Lint your code with **ESLint**, points you to possible mistakes and formatting\n  errors.\n- Simple debugging with Source Maps.\n\n[Read more about features here](https://swissquote.github.io/crafty/Use_Cases/Compiling_JavaScript.html)\n\n### CSS\n\n- Preprocess your CSS using **PostCSS** and plugins that will allow you to write in a syntax approaching the one of Scss.\n- Use future CSS Syntax and features today like nesting, advanced colors, and custom properties.\n- Compress the CSS output with `lightningcss` to get the smallest possible file.\n- Automatically add or remove vendor prefixes where they are needed.\n- Simple Debugging with Source Maps\n\n[Read more about features here](https://swissquote.github.io/crafty/Use_Cases/Compiling_CSS.html)\n\n### Images\n\nWith the help of\n[`crafty-preset-images`](https://swissquote.github.io/crafty/Packages/crafty-preset-images.html) you can also\ncompress your images (svg/png/jpg/gif).\n\n[Read more about features and configuration here](https://swissquote.github.io/crafty/Use_Cases/Compressing_Images.html)\n\n### Watching for Changes / Hot Module Replacement\n\nBy running the `gulp watch` command, a process is launched to trigger a rebuild\nof your asset on each change in `src/main/frontend`.\n\nA change on the configuration while Watching will reconfigure itself.\n\nFor Assets built with **Webpack** this can be even more powerful : after\ncompiling your code, it can change the code within the browsers **without\nreloading**.\n\nHere's an example:\n\n![React Hot Module Reload example](docs/react-hot-loader.gif)\n\n[Read more about `watch`](https://swissquote.github.io/crafty/User_Guides/Developing_Faster_with_Crafty_watch.html)\n\n## Maven, Node and Gulp\n\nSwissquote's build environment is based mainly on Maven and it's plugin\necosystem. But the Frontend world solely relies on Node tooling to build\nJavaScript and CSS assets.\n\nTo use the best of both worlds, we take advantage of the\n`maven-frontend-plugin`. This plugin will ensure a Node version is installed and\nwill run an `npm install` to install our JavaScript dependencies.\n\nWe also use Gulp, a JavaScript task runner (can be seen a bit like Ant but for\nthe JavaScript world).\n\n**Crafty** is the glue that will take all these pieces we mentioned, and build\nyou assets with the best-in-class tools. Working with Swissquote's JavaScript and CSS Guidelines as well.\n\nEverything bundled in a way that `mvn clean install` will build your assets like\nyou would expect with pure Java plugins.\n\n## Getting started\n\nTo get started, follow [the guide](https://swissquote.github.io/crafty/Getting_Started.html)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswissquote%2Fcrafty","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fswissquote%2Fcrafty","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fswissquote%2Fcrafty/lists"}