# @coffeekraken/webkit > Create easily website without the issues of configuring preprocessors like babel, webpack, imagemin, handlebars, etc... Latest version **0.0.11** (published 2020-01-12) · MIT license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install @coffeekraken/webkit pnpm add @coffeekraken/webkit yarn add @coffeekraken/webkit bun add @coffeekraken/webkit ``` Provides the commands `ck-webkit`, `coffeekraken-webkit`. ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 0.0.11 | | Published | 2020-01-12 | | First published | 2020-01-09 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 41 | | Unpacked size | 252.7 KB | | Known vulnerabilities | 0 (+5 in 1 direct dependencies) | | Install scripts | no | | GitHub stars | 0 | | Author | Coffeekraken | | Maintainers | olivierbossel | | Keywords | coffee, kraken, coffeekraken, webkit, webpack, babel, imagemin, sass, scripts, tests | ## Links - npm: https://www.npmjs.com/package/@coffeekraken/webkit - Repository: https://github.com/Coffeekraken/coffeekraken/tree/master/terminal/webkit - Homepage: https://coffeekraken.io - npm.io page: https://npm.io/package/@coffeekraken/webkit ## Dependencies (41) - [glob](https://npm.io/package/glob.md) ^7.1.6 - [jest](https://npm.io/package/jest.md) ^24.9.0 - [sass](https://npm.io/package/sass.md) ^1.24.3 - [config](https://npm.io/package/config.md) ^3.2.4 - [pkg-up](https://npm.io/package/pkg-up.md) ^3.1.0 - [precss](https://npm.io/package/precss.md) ^4.0.0 - [core-js](https://npm.io/package/core-js.md) ^3.6.2 - [cssnano](https://npm.io/package/cssnano.md) ^4.1.10 - [exec-sh](https://npm.io/package/exec-sh.md) ^0.3.4 - [find-up](https://npm.io/package/find-up.md) ^4.1.0 - [postcss](https://npm.io/package/postcss.md) ^7.0.26 - [webpack](https://npm.io/package/webpack.md) ^4.41.5 - [babel-cli](https://npm.io/package/babel-cli.md) ^6.26.0 - [commander](https://npm.io/package/commander.md) ^4.1.0 - [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.7.7 - [babel-jest](https://npm.io/package/babel-jest.md) ^24.9.0 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.7.7 - [http-server](https://npm.io/package/http-server.md) ^0.12.0 - [import-glob](https://npm.io/package/import-glob.md) ^1.5.0 - [scss-bundle](https://npm.io/package/scss-bundle.md) ^3.0.2 - [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.3.10 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^9.7.3 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.6 - [rucksack-css](https://npm.io/package/rucksack-css.md) ^1.0.2 - [app-root-path](https://npm.io/package/app-root-path.md) ^3.0.0 - [get-folder-size](https://npm.io/package/get-folder-size.md) ^2.0.1 - [jest-raw-loader](https://npm.io/package/jest-raw-loader.md) ^1.0.1 - [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.7.7 - [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^6.7.0 - [sass-glob-importer](https://npm.io/package/sass-glob-importer.md) ^1.0.1 - [@coffeekraken/sugar](https://npm.io/package/@coffeekraken/sugar.md) ^1.0.23 - [webpack-import-glob](https://npm.io/package/webpack-import-glob.md) ^2.0.0 - [@coffeekraken/imagemin](https://npm.io/package/@coffeekraken/imagemin.md) ^1.0.3 - [@coffeekraken/pre-view](https://npm.io/package/@coffeekraken/pre-view.md) 0.0.6 - [@symfony/webpack-encore](https://npm.io/package/@symfony/webpack-encore.md) github:symfony/webpack-encore - [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^3.6.0 - [@coffeekraken/scripts-stack](https://npm.io/package/@coffeekraken/scripts-stack.md) 0.0.22 - [babel-plugin-add-module-exports](https://npm.io/package/babel-plugin-add-module-exports.md) ^1.0.2 - [@coffeekraken/docblock-to-markdown](https://npm.io/package/@coffeekraken/docblock-to-markdown.md) 0.0.8 - [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.7.4 - [@babel/plugin-proposal-export-default-from](https://npm.io/package/@babel/plugin-proposal-export-default-from.md) ^7.7.4 ## Alternatives - [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads - [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads - [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads - [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads - [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads ## Recent versions - 0.0.11 (latest) — 2020-01-12 - 0.0.10 — 2020-01-11 - 0.0.9 — 2020-01-11 - 0.0.8 — 2020-01-11 - 0.0.7 — 2020-01-11 - 0.0.6 — 2020-01-11 - 0.0.4 — 2020-01-11 - 0.0.3 — 2020-01-11 - 0.0.2 — 2020-01-09 - 0.0.1 — 2020-01-09 ## README ![Sugar](.resources/doc-header.jpg) # Coffeekraken Webkit ![npm](https://img.shields.io/npm/l/@coffeekraken/webkit?style=flat-square) ![npm](https://img.shields.io/npm/v/@coffeekraken/webkit?style=flat-square) ![npm](https://img.shields.io/npm/dw/@coffeekraken/webkit?style=flat-square) Coffeekraken webkit package is made to help you create views (blade, twig), stylesheets using sass, postcss, etc..., and javascript bundles using babel, webpack and some plugins without having to configure anything. Here's the list of features that cover the webkit package: # Goals - Generate, compile and optimize your stylesheets - [sass-glob-importer](https://www.npmjs.com/package/sass-glob-importer) built-in - [PostCSS Autoprefixer](https://www.npmjs.com/package/autoprefixer) built-in - [PostCSS PreCSS](https://www.npmjs.com/package/precss) built-in - [PostCSS Preset Env](https://www.npmjs.com/package/postcss-preset-env) built-in - [PostCss CSS Nano](https://www.npmjs.com/package/cssnano) built-in - [PostCSS Rucksack CSS](https://www.npmjs.com/package/rucksack-css) built-in - Generate, compile and optimize your javascript files/bundles - [Babel](https://babeljs.io/) built-in - [Babel Preset Env](https://babeljs.io/docs/en/babel-preset-env) built-in - [Webpack](https://webpack.js.org/) built-in - [Import glob](https://www.npmjs.com/package/webpack-import-glob-loader) built-in - [Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) built-in - Compress and optimize your images - [Coffeekraken Imagemin](https://www.npmjs.com/package/coffeekraken-imagemin) built-in - Generate your markdown documentation files from source code - [Coffeekraken Docblock to markdown](https://www.npmjs.com/package/@coffeekraken/docblock-to-markdown) built-in - Generate a "docMap.json" file at the root of your project if wanted - Run your tests using [Jest](https://jestjs.io/) - Create a development php server to enhance your workflow - [Coffeekraken Pre-view](https://www.npmjs.com/package/@coffeekraken/pre-view) built-in - Clean and useful terminal interface to handle all these features easily - [Coffeekraken Scripts-stack](https://www.npmjs.com/package/@coffeekraken/scripts-stack) built-in - Scripts-stack configuration built-in with a nice list of scripts that handle all the webkit features - Automatically watch your sources files to launch the differents compilation scripts ## Table of content 1. [Goals](#readme-goals) 2. [Install](#readme-install) 3. [CLI](#readme-cli) 4. [Config](#readme-config) 5. [Coffeekraken](#readme-coffeekraken) # Install To install the package, simply launch the command bellow: ``` npm i @coffeekraken/webkit -save-dev ``` # CLI This package expose a CLI with multiple commands that you can use. Here's the list ## ```ck-webkit start``` Start the [Coffeekraken Scripts-stack](https://www.npmjs.com/package/@coffeekraken/scripts-stack) interface listing all the scripts needed to compile/generate your sources files ## ```ck-webkit dist``` Compile/generate/optimize all your sources files like images, javascript and stylesheets (.scss) files #### ```ck-webkit js``` Build your javascripts files stored in *src/js* directory using babel. This will not build the javascripts files that match this pattern: ```*.bundle.js``` #### ```ck-webkit js -b``` Build your javascripts bundle files stored in *src/js* that follow this pattern ```*.bundle.js``` using webpack. #### ```ck-webkit js -a``` Build your javascripts bundle files stored in *src/js* and open in the browser an interface that let you analyze your bundle. #### ```ck-webkit css``` Compile your ```.scss``` files stored in *src/css* directory. This command will handle all the ```.scss``` files that does not start with a *_* like ```_button.scss```. #### ```ck-webkit img``` Compress and optimize all your images stored in *src/img* directory. ## ```ck-webkit doc``` Generate your documentation markdown files by analyzing your sources files like ```scss|js``` ones, grabing the docblocks founded in these files and converting this to well formatted markdown files inside the *doc* directory. #### ```ck-webkit doc map``` This will analyze your documentation markdown files for ```@namespace something.something...``` docblock tags to generate a ```docMap.json``` file that will look like this: ```JSON { "my.cool.namespace": "doc/path/to/the/markdown/file.md", // etc... } ``` ## ```ck-webkit test``` This will launch all your javascript tests files stored in the *tests* directory using [Jest](https://jestjs.io/). ## ```ck-webkit pre-view``` This will launch the [Coffeekraken Pre-view](https://www.npmjs.com/package/@coffeekraken/pre-view) server to help you having a smoother workflow and display your views with ease. # Config In order to configure your webkit project, you just need to create a ```webkit.config.js``` file in your repository root folder. Here's a ```webkit.config.js``` config file sample: ```js module.exports = { dist: { js: { /** * This define the path to the javascript source folder * @type String */ sourceFolder: 'src/js', /** * This define the path to the javascript output folder * @type String */ outputFolder: 'dist/js', /** * This define a pattern to ignore when searching for the javascript files to compile * @type String */ ignorePattern: '**/*.bundle.js', bundle: { /** * This define a glob pattern to search for the javascript files to bundle * @type String */ sourceFilesPattern: './src/js/**/*.bundle.js', /** * This define the path to the bundles output folder * @type String */ outputFolder: 'dist/js' } }, css: { /** * This define a pattern to follow to find the stylesheet files inside the sourceFolder * @type String */ sourceFilesPattern: '**/!(_)*.scss', /** * This define the css source folder * @type String */ sourceFolder: 'src/scss', /** * This define the css output folder * @type String */ outputFolder: 'dist/css', /** * This define the folders to lookup when compiling the sources files * @type String */ loadPaths: [ 'node_modules', 'node_modules/@coffeekraken' ], /** * This define a glob pattern that will be added inside the source files before compiling them * @type String */ importGlobPattern: 'views/**/!(_)*.scss', /** * This define the output style of the css files * This can be "compressed, nested, expanded, compact" * @type String */ style: 'compressed' }, img: { /** * This define the source folder that hold the images to optimize * @type String */ sourceFolder: 'src/img', /** * This define the output folder for the optimized images * @type String */ outputFolder: 'dist/img', /** * This define the output quality for the images. This can be between 100 and 0 * @type Integer */ quality: 80 } }, doc: { /** * This define the glob pattern to search for files in the doc source folder * @type String */ filesPattern: 'src/**/*', /** * This define the output folder where to generate all the documentations markdown files from the docblocks * @type String */ outputFolder: 'doc' }, docMap: { /** * This define the glob pattern to find for the markdown (.md) documentation files * @type String */ srcFilesPattern: '**/*.md', /** * This define the glob patterns of the folders to avoid when searching for the documentation markdown files * @type Array */ srcFilesIgnore: ['**/node_modules/**'], /** * This define the name of the docMap file that will be generated at the monorepo root folder * @type String */ outputFilename: 'docMap.json' }, tests: { /** * This define the glob patterns to find the tests files * @type String */ testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)'], /** * This define the loaders to execute depending on the regex that define the object key * @type Object */ transform: { "\\.txt$": "jest-raw-loader", "\\.js$": ["babel-jest", { rootMode: "upward" }] } } }; ``` # Coffeekraken We are a young collective of front-end creative developers with one goal in mind. Build tools to make every team working day life better. This is our first and only concern. All our tools are build around that purpose. All what we provide are some cool tools that you can use the way you want. These tools features cover a large scope of the front-end workflow (styleguide generation, colors/fonts management, etc...). You can use only the parts that you need and let the rest aside... [![Coffeekraken](.resources/coffeekraken-logo.jpg)](https://coffeekraken.io) --- _Source: https://npm.io/package/@coffeekraken/webkit · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._