craffft is a api wrapper for the most popular file processing systems e.g. webpack, gulp, grunt. It was built to serve as build system with a low level api, making it possible to replace the technologies and frameworks in the background without affecting projects using it e.g. moving from grunt to gulp without the need to replace all configurations in your projects.
- Install craffft via npm
$ npm install craffft
- Add craffft commands to your package.json's scripts.
- Run those commands as you defined them. For example, the compile script
$ npm run compile
If you need additional logs, run a command like this:
$ npm run compile -- --outputLog
Processing following languages or file formats:
- Supports multiple bundles and mixing of ES6, TypeScript and ES5
- Processes Sass, Stylus, Less
- Transpile CSS Selector Level 4
- Auto prefixing for different vendors
- Optimize and minimize jpg, png, gif and svg
- Mirror changes to the browser, live, via browserSync
- Sync scrolling, typing and other interactions to all connected devices
Why use it?
With “black boxed” we mean, it should serve as an interface to whatever build system or technology is running in the background. As an example, the build system could change from grunt to gulp one day because gulp seems faster, but for the developer using the Craffft it doesn't matter. He can still use the same configurations, he can still rely on Sass, what ever one needs for his projects.
The main goal is to make it work out of the box with precompilers or techniques are most popular and make it easy to upgrade without changing configs.
To change default configuration, add a craffft-config.json to your root directory.
Here's how a config can look like:
Folder where the source files are stored.
Folder where processed files will be stored. They will keep their original file structure.
Global processing options
Default: Version of your package.json
Sets the version of your application. This will be used to show the version in several places.
Is used to store temporary files during processing.
Change this if you changed the location of your node_modules store.
Change this if you changed the location of your browser components store.
Whether to use Source M`aps in development builds or not.
Use all watchers in polling mode. This is needed for some operating systems which do not have inotify built in in the OS. So if your watcher doesn't work, try setting this to true. Might be a needed option for development inside vagrant.
true: use polling
- number: use polling with specified interval
Options for the servers used during development mode.
An array of servers running during development.
Options for processing styles.
Options for processing images.
Options for processing markup files. At this moment, it only copies the specified files.
Options for copying processes. This can be used for other files that don't need any processing e.g. .txt
This configuration controls how your project's versioning works. These settings are used to automatically bump your project's version number and create changelogs.
Array of strings.
- Migrate config to json
- Can be installed via npm
- Includes precompiling for the most popular CSS syntaxes
- Sass > v3.3
- CSS Selector Level 4 - using postCSS
- ES6 - using babel
- Configurable copy tasks for markup files
- CSS Testing
- Add CSS testing suite via BackstopJS.
- Global CLI runner for project inititalization, configuration and upgrades.
craffft currently uses following dependencies:
- Gulp with several addons for running tasks
- PostCSS and Autoprefixer
- Node-Sass, gulp-stylus and gulp-less for processing Sass and Stylus
Run npm test task to link the binaries and make a test build.
$ npm test