No description or website provided.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Build Status contributions welcome

Woodoo Frontend Buildtool 1.5.3

Woodoo Buildtool is a standalone gulp setup with all necessary gulp tools to build and create your frontend projects. Woodoo Buildtool come with a config file to add your project specific pathes and variables (gulp_config.json). Read more about it in the Getting Started section below this part.

Gulp Features

  • Gulp 3.x
  • Sass 4 Support
  • CSS Minify & Sourcemaps
  • CSS Autoprefixer
  • CSS Linter
  • JS Concatination
  • JS Minify
  • JS Linter
  • Spritemaps (PNG/SVG)
  • Imageoptimisation
  • Automatic Setup Process
  • Automatic merge of your Project package.json

Getting Started with automatic Setup

In this case the Buildtool setup will create and install all necessary files.

1. Installation

Step 1: Installation Woodoo with Composer

Add following lines to your composer.json

  "extra": {
      "./woodoo-buildtools/core": ["dermatz/woodoo-buildtools"]

Now run these commands in your project root to install woodoo buildtools in root/woodoo-buildtools

composer.phar config repositories.woodoo-buildtools git
composer.phar require dermatz/woodoo-buildtools --dev "^1.4.0"

Step 2: Woodoo Setup

Just switch into Woodoo-Buildtool folder and run the install script

cd woodow-buildtools
sh core/

Follow the instructions in setup. During the setup you will get new files in the woodoo-buildtools folder, if they are not exist. After the Setup you can easily build your whole frontend project from woodoo-buildtools folder. Just run gulp from the woodoo buildtool folder in your console.

Update Woodoo with Project NPM Packages

In this case you can run gulp update in the woodoo-buildtools folder. Otherwise you can run gulp update-json to simply just update the project- and wooodoo json files.

Just a tip: Get a perfect folderstructure for your asset

To get best results you can get this sample-project sturcture.

  ├── dist (will be automaticly create by running the default gulp-task ($ gulp) depending of your entries in gulp_config.json)
  |    ├── css
  |    |    ├── main.css
  |    |    └── (will be autogenerated)
  |    ├── js
  |    |    └── main.min.js  
  |    ├── images
  |    |    ├── image-one.jpg (minified)
  |    |    └── image-two.jpg (minified)
  |    └── sprites
  |         ├── scss/.. (includes all new scss-variabels, available after run the 'gulp-sprite-png' or default task)
  |         └── sprites.png (includes all collecetd sprite-images)
  └── assets
       ├── images
       |    ├──sprites
       |    |    ├── sprites-png
       |    |    └── sprites-svg     
       |    ├── image-one.jpg
       |    └── image-two.jpg
       ├── js
       |    ├── lib
       |    |     ├── my-script.js
       |    |     └── my-script2.js 
       |    ├── head
       |    |     ├── my-script.js
       |    |     └── my-script2.js
       |    ├── footer
       |    |     ├── my-script.js
       |    |     └── my-script2.js 
       └── scss
            └── project.scss


Feel free to report issues or add pull-requests. Thanks for your support!


This project is licensed under the Open Software License 3.0. Read more


(c) 2018 Mathias Elle