# wcmp > A utility wrapper for handling sass and babel for the web. Latest version **1.1.1** (published 2018-06-04) · MIT license · 0 weekly downloads ## Install ```sh npm install wcmp pnpm add wcmp yarn add wcmp bun add wcmp ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.1 | | Published | 2018-06-04 | | First published | 2018-04-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 22 | | Unpacked size | 371.1 KB | | Known vulnerabilities | 0 (+6 in 3 direct dependencies) | | Install scripts | no | | Author | Koen Houtman | | Maintainers | automagisch | ## Links - npm: https://www.npmjs.com/package/wcmp - npm.io page: https://npm.io/package/wcmp ## Dependencies (22) - [chalk](https://npm.io/package/chalk.md) 2.3.0 - [moment](https://npm.io/package/moment.md) 2.20.1 - [pretty](https://npm.io/package/pretty.md) 2.0.0 - [rimraf](https://npm.io/package/rimraf.md) 2.6.2 - [yamljs](https://npm.io/package/yamljs.md) 0.3.0 - [nodemon](https://npm.io/package/nodemon.md) 1.17.5 - [any-json](https://npm.io/package/any-json.md) 3.1.0 - [babelify](https://npm.io/package/babelify.md) 8.0.0 - [chokidar](https://npm.io/package/chokidar.md) 1.7.0 - [exorcist](https://npm.io/package/exorcist.md) 1.0.0 - [minimist](https://npm.io/package/minimist.md) 1.2.0 - [mustache](https://npm.io/package/mustache.md) 2.3.0 - [ascii-art](https://npm.io/package/ascii-art.md) ^1.4.3 - [babel-cli](https://npm.io/package/babel-cli.md) 6.26.0 - [node-sass](https://npm.io/package/node-sass.md) 4.9.0 - [browserify](https://npm.io/package/browserify.md) 14.5.0 - [deep-extend](https://npm.io/package/deep-extend.md) 0.6.0 - [babel-polyfill](https://npm.io/package/babel-polyfill.md) 6.26.0 - [babel-register](https://npm.io/package/babel-register.md) 6.26.0 - [babel-preset-env](https://npm.io/package/babel-preset-env.md) 1.6.1 - [json-to-sass-map](https://npm.io/package/json-to-sass-map.md) 1.0.1 - [babel-plugin-transform-custom-element-classes](https://npm.io/package/babel-plugin-transform-custom-element-classes.md) 0.1.0 ## Recent versions - 1.1.1 (latest) — 2018-06-04 - 1.1.0 — 2018-06-04 - 1.0.2 — 2018-04-12 - 1.0.0 — 2018-04-12 ## README ![logo](https://i.imgur.com/9PTgUqD.png)

> A tiny 'web-compiler' for compiling sass and babel files, without the hassles of opinionated frameworks. It's a package that aims on writing vanilla apps with the cool features of now. Conveniant for when you wish not to use Webpack or some other over-complicated hard-to-come-by framework. It's just a bare minimum Node.js setup for creating websites and apps from scratch. Great starting point, super-extensible!

## Installation Clone the repository and install dependencies from npm: `$ git clone git@github.com:automagisch/wcmp.git` `$ cd wcmp && npm install` --- ## Usage All functionality is bundled inside package.json, and the scripts are aliased to their hooks in the tooling system: _npm_: `$ npm start` _node_: `$ babel-node index.js` Starts the SCSS and Babel watchers. Use this command if you tend to construct UI's. _npm_: `$ npm run dev` _node_: `$ nodemon --delay 2 --exec babel-node index.js --development --force-babel` Same as `npm start`, but it also uses nodemon to listen for file changes in /tooling and restart Node scripts on change. Use this mode if you intend to add functionality to WCMP. _npm_: `$ npm run html` _node_: `$ babel-node index.js --html` Compile mustache files to html in _/dist_ directory. _npm_: `$ npm run styles` _node_: `$ babel-node index.js --styles` Compile sass files to css in _/dist_ directory. _npm_: `$ npm run scripts` _node_: `$ babel-node index.js --scripts` Compile babel files once to _/dist_ directory. _npm_: `$ npm run build` _node_: `$ babel-node index.js --build` Compile both babel, sass and html sources once to the _/dist_ directory. _npm_: `$ npm test` _node_: `$ node tests` Run all the tests located in the tests folder (see `tests/include-as-module.js` for a test example - you're also free in how you like to test, be creative - be logical!). like that how you could set up a simple test.) _npm_: `$ npm run compile` _node_: `$ rm -rf tooling/build && babel tooling --out-dir tooling/build` The compile command will render ES-compliant code from the babel output. Use this if you want to run the code in production (tbh: can't imagine why at the time, but hey - it might be a usecase for somebody eventually) Recommended is to use the _npm_ aliases rather than calling babel-node straight from the cli. --- ## Development Since the setup is super-minimalistic, there is no convention, no guideline and most certainly no rules where you have to rely on. There is no exposed tech that need to be used, it is really just a bare sass/babel compiler. HTML files can go directly in the root of the `/dist` folder. There is no server implementation in this package, but if you would like to serve the HTML with node.js, the structure of the app is perfect to implement it yourself. The Node.js code lives in the `/tooling` folder. Otherwise, it's entirely safe to just preview the html in your browser. Good luck! **A practical tip for making a node-server to host the dist folder**: If you like to serve your files over http for previewing, it's probably the best idea to create a new class for an express server in `/tooling/lib` and do all your server stuff there (keep it abstract and modular for the best experience). If you want to add configuration to this feature, you may want to create some default slots in `./tooling/settings.js` and then configure them in the `config.json` file. The config.json file is always populated against the default settings object, so it's a very wise idea to implement this for any feature you like to see configured. It will prevent things from breaking, probably. --- ## Configuration All configurables are clustered in a file in the root called `config.json`. Babel and Sass settings can be implemented here. Upon start, this file is extended upon a default set of settings defined in `index.js`, and from that point passed around to every module. If you tend to extend the compilers functionality, make sure to also include some configurables in this JSON format. --- ## Testing From the same though the WCMP project has been built, so works testing. Tests are located in `/tests` and are powered by the `index.js` file in that folder. There are no testing frameworks involved so you are (like the rest of the app) entirely up to yourself to do that - the more vanilla, the better! Tests can be ran using `npm test`. ## Sidenotes to maybe confuse you less - `.babelrc` in the root accepts settings for the `babel-node` environment. The settings for the client babel can go in the `babel` section in `config.json`. - `nodemon.json` accepts the settings and configuration for the dev-mode nodemon instance. This configuration is used when `npm run dev` is called. - In theory it should be possible to have one WCMP on many projects, and use WCMP as the go-to compiler for any project. This will prove itself in a future release. - To run this package correctly, `babel-node` is used. Babel-node is a package from the Babel guys that is practically a node.js environment for babel (node.js does not yet fully support all es6 features, so by the time of writing babel-node is the go-to solution). In the case this code has to be run on a legacy node.js system, configure .babelrc and compile the `tooling` folder with babel to es5-compliant JS (what babel does, actually - uhuh) to run safely in all node.js environments. However, in most cases this will not be of use. --- ## Useful resources Stuck in the stack? Time to take a dive in these resources for some troubleshooting: - [Node.js](https://nodejs.org/en/) => Offical Node.js site/docs - [Babel](https://babeljs.io/) => Official Babel site/docs - [Sass](http://sass-lang.com/) => Official Sass site/docs - [Mustache](https://mustache.github.io/mustache.5.html) => Official Mustache site/docs - [Nodemon](https://nodemon.io/) => Official Nodemon website --- ## Issues See 'issues' button on the [top](#) of the page. --- ## Authors [Koen Houtman (Automagisch)](https://www.github.com/automagisch) - _Creative Director at [Cuckoo Sandbox](https://www.cuckoosandbox.org) / Front-end engineer and UX enthousiast_ --- ## License This package is MIT licensed. For more details see the [LICENSE](https://github.com/automagisch/wcmp/blob/master/LICENSE) file. --- _Source: https://npm.io/package/wcmp · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._