Use dizmoGen to speed up your development workflow

Introduction

In a typical workflow for developers, a lot of time is spent:

• compiling SASS to CSS,
• Linting code and validation,
• concatenating and minifying CSS and JavaScript
• deploying files to the correct location.

All those tasks must be repeated manually every time you make a change to the source code, time you would rather spend writing code. To automate all that, you need a task runner or build process, which will automate the most frustrating and time consuming tasks so you can concentrate on writing code.

Builds tools such as ‘GNU make’ have been available for a long time, but cross-platform and web-centric build tools are relatively new. Since you already use a lot of JavaScript to write dizmos, it makes sense to apply a familiar language. And with node.js as the runtime, your build environment will be cross-platform.

Grunt is one of the first successful JavaScript task runners, but has some issues. Gulp built on the success of Grunt, with one of the main advantages being that data is passed between tasks in streams instead of writing files to disk every time. This makes the build process much faster. Since the creation of Gulp, alternative task runners like broccoli.js, Brunch and webpack have also been created, each with its pros and cons. Gulp remains in wide use however.

As JavaScript is developing as a language, several variants of it have been created that compile to pure Javascript. Most notable of those projects are CoffeeScript and TypeScript. While CoffeeScript makes it syntactically easier to write code, TypeScript allows for type-checking. A build system should have the design and flexibility to support alternative languages.

Another task that you repeatedly do when creating a new dizmo, is writing code that is repeated for every dizmo e.g most content in index.html and some of the basic functionality in index.js. Here a scaffolding system could help you to create a new dizmo rapidly.

Yeoman is a scaffolding system that uses templates (which come within so-called generators) to create new project.

What is dizmoGen?

DizmoGen builds on and extends Gulp and Yeoman to create a complete build system for writing dizmos. It uses Gulp to automate common tasks when writing a dizmo, such as language transpilation, SCSS compilation, linting, minification and the ability to upload a dizmo to the dizmoStore.

DizmoGen uses Yeoman generators to create the scaffolding for a new dizmo, supporting JavaScript, CoffeeScript and TypeScript.

How to get started with dizmoGen?

To create a new project, invoke the dizmo generator with a name of your choice, for example my-dizmo and answer a few questions:

yo dizmo my-dizmo

Then, use npm to run the gulp task make:

npm run make

This will create the finished and installable dizmo in the build directory, where it can be dragged and dropped onto dizmoViewer to install it.

For further convenience and speed of development, dizmoGen also allows automatic deployment and watching. Automatic deployment copies the new version of a dizmo to the correct location, which leaves the developer to only need to reload it via its dizmo menu. Automate this process even more by running make and/or deploy on every detected file change. This means the developer can focus on writing code, and the build system does the repetitive grunt work in the background.

Documentation: https://www.dizmo.com/docs/complete-guide/dizmogen
Github Project: https://github.com/dizmo/yeoman-generator-dizmo

DizmoGen is an open source project and is hosted on Github. We welcome any feedback and pull requests!