@sammwy/milkshake
Version:
<p align="center"> <img src="https://raw.githubusercontent.com/sammwyy/milkshake/master/docs/milkshake.png" height="64px"> <h1 align="center">MilkShake</h1> <p align="center"> <b>Automatize Tasks, Compile, concatenate and minify automaticall
128 lines (119 loc) • 7.42 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="milkshake.png" type="image/x-icon">
<title>Milkshake - Documentation</title>
</head>
<body class="main">
<div class="navbar">
<a href="index.html">
<img class="logo" src="milkshake.png" alt="milkshake icon">
<div class="brand-container">
<h1 class="brand">Milkshake</h1>
</div>
</a>
</div>
<div class="container-get-started">
<div class="side">
<ul class="item-list">
<li class="item"><a href="#get-started">Get started</a></li>
<li class="item"><a href="#prepare-and-run-task">Prepare and run Task</a></li>
<li class="item"><a href="#javascript-minify-task">Javascript minify Task</a></li>
<li class="item"><a href="#image-compress-task">Image compress Task</a></li>
<li class="item"><a href="#less-compile-task">Less compile Task</a></li>
<li class="item"><a href="#sass-compile-task">Sass compile Task</a></li>
<li class="item"><a href="#stylus-compile-task">Stylus compile Task</a></li>
</ul>
</div>
<div class="content">
<h2>Get started</h2>
<p>To start using MilkShake we must first install it, we can use the following command in your preferred terminal::
<pre><span class="color-1">npm</span> <span class="color-2">install</span> <span class="color-3">@sammwy/milkshake</span></pre>
<i>Note: You need to have Node.js and NPM installed on the system.</i>
</p>
<h2 class="spaced">Prepare and run Task</h2>
<p>We will start by preparing a simple task that concatenates and minifies CSS files and then processes them into a single file. In turn, each source file is modified, created or deleted then the process will be repeated.
<pre>
<!-- --><span class="color-4">const</span> <span class="color-2">milkshake</span><span class="color-3"> = </span>require(<span class="color-11">"@sammwy/milkshake"</span>);
<!-- -->
<!-- --><span class="color-2">milkshake</span><span class="color-3">.</span><span class="color-13">tasks</span>({
<!-- --> cssTask: {
<!-- --> source: <span class="color-11">"./demo/source/css"</span>,
<!-- --> dist: <span class="color-11">"./demo/dist/bundle.css"</span>,
<!-- --> messageEnd: <span class="color-11">"CSS Minified succefully"</span>
<!-- --> }
<!-- -->});</pre>
</p>
<h2 class="spaced">Javascript minify Task</h2>
<p>We can concatenate and minify Javascript files into one with the following task:
<pre>
<!-- --><span class="color-4">const</span> <span class="color-2">milkshake</span><span class="color-3"> = </span>require(<span class="color-11">"@sammwy/milkshake"</span>);
<!-- -->
<!-- --><span class="color-2">milkshake</span><span class="color-3">.</span><span class="color-13">tasks</span>({
<!-- --> jsTask: {
<!-- --> source: <span class="color-11">"./demo/source/js"</span>,
<!-- --> dist: <span class="color-11">"./demo/dist/bundle.js"</span>,
<!-- --> useES6: <span class="color-11">true/false</span>,
<!-- --> messageEnd: <span class="color-11">"JS Minified succefully"</span>
<!-- --> }
<!-- -->});</pre>
</p>
<h2 class="spaced">Image compress Task</h2>
<p>We can compress and optimize JPG and PNG files with the following task:
<pre>
<!-- --><span class="color-4">const</span> <span class="color-2">milkshake</span><span class="color-3"> = </span>require(<span class="color-11">"@sammwy/milkshake"</span>);
<!-- -->
<!-- --><span class="color-2">milkshake</span><span class="color-3">.</span><span class="color-13">tasks</span>({
<!-- --> imageTask: {
<!-- --> source: <span class="color-11">"./demo/source/images"</span>,
<!-- --> dist: <span class="color-11">"./demo/dist/images"</span>,
<!-- --> messageEnd: <span class="color-11">"Images compressed succefully"</span>
<!-- --> }
<!-- -->});</pre>
</p>
<h2 class="spaced">Less compile Task</h2>
<p>We can compile and minify Less files with the following task:
<pre>
<!-- --><span class="color-4">const</span> <span class="color-2">milkshake</span><span class="color-3"> = </span>require(<span class="color-11">"@sammwy/milkshake"</span>);
<!-- -->
<!-- --><span class="color-2">milkshake</span><span class="color-3">.</span><span class="color-13">tasks</span>({
<!-- --> lessTask: {
<!-- --> source: <span class="color-11">"./demo/source/less"</span>,
<!-- --> dist: <span class="color-11">"./demo/dist/bundle.css"</span>,
<!-- --> messageEnd: <span class="color-11">"Less compiled succefully"</span>
<!-- --> }
<!-- -->});</pre>
</p>
<h2 class="spaced">Sass compile Task</h2>
<p>We can compile and minify Sass files with the following task:
<pre>
<!-- --><span class="color-4">const</span> <span class="color-2">milkshake</span><span class="color-3"> = </span>require(<span class="color-11">"@sammwy/milkshake"</span>);
<!-- -->
<!-- --><span class="color-2">milkshake</span><span class="color-3">.</span><span class="color-13">tasks</span>({
<!-- --> sassTask: {
<!-- --> source: <span class="color-11">"./demo/source/sass"</span>,
<!-- --> dist: <span class="color-11">"./demo/dist/bundle.css"</span>,
<!-- --> messageEnd: <span class="color-11">"Sass compiled succefully"</span>
<!-- --> }
<!-- -->});</pre>
</p>
<h2 class="spaced">Stylus compile Task</h2>
<p>We can compile and minify Stylus files with the following task:
<pre>
<!-- --><span class="color-4">const</span> <span class="color-2">milkshake</span><span class="color-3"> = </span>require(<span class="color-11">"@sammwy/milkshake"</span>);
<!-- -->
<!-- --><span class="color-2">milkshake</span><span class="color-3">.</span><span class="color-13">tasks</span>({
<!-- --> stylusTask: {
<!-- --> source: <span class="color-11">"./demo/source/stylus"</span>,
<!-- --> dist: <span class="color-11">"./demo/dist/bundle.css"</span>,
<!-- --> messageEnd: <span class="color-11">"Stylus compiled succefully"</span>
<!-- --> }
<!-- -->});</pre>
</p>
</div>
</div>
</body>
</html>