Chisel is a Yeoman generator for scaffolding and developing front-end and WordPress website projects.
If the intro sentence sounds like Latin to you, this article can help you to understand modern website development workflows. There’s nothing wrong with feeling nostalgic about the old times when developing websites was as simple as saving a file and reloading the browser. However, the modern workflows, even though more complicated, can make our work more efficient and the resulting code better and easier to maintain.
In this article, I’ll explain how the old school workflows transformed into new workflows. We will take a look how generators like Chisel can make your life easier. Once you understand how they work, you will be ready to use any of them as they operate on similar principles.
Note: In the diagrams below, the solid yellow line shows the workflow of a developer, and how they switch between various tools and files.
The old school website development workflow is pretty straightforward – you create and edit source files like HTML, CSS or JavaScript – and then reload the page in the browser to display the updated version of the website which is made of these files.
The source files get loaded in the browser as they are saved on the disk, so there isn’t any transformation going on. For example, if you compare the source of CSS in the browser it should be the same as in the file you are editing in the text editor.
The second approach is just a slight variation of the first one. To save time when doing a project setup, the developer has files prepared as templates and copies them to a new project folder. They can have various templates prepared for various project types. The rest of the workflow is the same as the first workflow.
It may seem that such small variation shouldn’t take this workflow to a separate place in our list. However, as we will see, templates are an important part of a generator concept, so it’s good to understand through which steps the modern workflow optimization has occurred.
Modern website development workflows had emerged when new extensions to web development languages appeared, for example, Sass as an extension to CSS. Because browsers don’t understand Sass, we need to transform the original Sass file to CSS before we send it to the browser. Instead of doing this transformation manually using external tools, we can set up tools as part of our project and define tasks which will take care of such changes.
Tools are usually various Node.js modules. Node.js is a JavaScript runtime we need to install on our computer so we can use Node modules. We can install Node modules using the Node Package Manager – npm. There are thousands of modules for various tasks, e.g., gulp-sass module which transforms Sass to CSS.
How do we instruct the computer which tools to run our project files? We do it by creating tasks. Tasks can be run manually from the command line or automatically when files change. This is achieved by a special watch task which watches for changes in the files and runs other tasks when the files change. In conjunction with other tasks for automatic reloading website in a browser, it can create a favorable development environment.
Tools and tasks definitions are written in a special file – package.json. Tasks are also often defined using separate task runners like Gulp which can allow further tasks customization.
Files transformed by tasks are usually stored in a special dist folder. Dist stands for distributable or distribution and means that these files are ready for production use (eg. they are minified).
There are a vast number of tasks we can define in our projects, let’s name a few:
There is one variation of this workflow. Applications like Prepros or Codekit allow quick setup and support a lot of tasks mentioned above like preprocessors, file optimization, live reloading.
This workflow is like the previous one, but we use templates to save time and avoid setting up our project from scratch. This time we also use templates for the tasks and tools definitions.
Once we copy required files, we can edit the files and adjust them to specific project needs.
The last approach is the evolution of modern website development workflow. We use a generator to set up a project according to our needs.
We run the generator from the command line in the new project folder. The generator asks a couple of questions about our preferences for the particular project which we answer directly in the command line. Then it sets up the project structure and files and also installs Node modules for us. This process is also called scaffolding.
A generator has templates stored in it and besides copying them to our project folder it can process their content based on our answers. So, for example, it can fill in project names to the files. Or it can create certain files and tasks depending on our answers.
A generator can also have individual commands which allow us to do further project modification even once the project is already set up, for example, to add new pages to our project.
The most common tool for creating generators is Yeoman. There are a number of generators, each for different project types. So first, we need to pick up one which is suitable for our project type. We install it globally, and we can start using it. If we don’t find a suitable generator, we can even create our own generator.
Some of the most popular web development libraries out there like React or Vue.js also have tools for creating new projects which use similar concepts like Yeoman generators, even they don’t use Yeoman. (Check out Create React App or vue-cli.)
Compare all workflows next to each other on one image.
Now that you understand common website development workflows, you can try a generator yourself. At Xfive, we have created Chisel, which is a Yeoman generator for setting up and developing front-end and WordPress projects.
Chisel is unique by its approach to WordPress website development. It creates WordPress projects which are based on the Timber library. Hence, Chisel, a tool for crafting perfect websites with Timber.
Chisel comes packed with a lot of features supporting modern front-end development from scratch. Such as:
Starting with Chisel is easy. First install Node.js so you can work with npm, Node package manager. Version 6+ is required.
Then install Yeoman, Gulp, and Chisel from your command line.
npm install -g yo generator-chiselYou are now ready to use Chisel. Create a new project folder, open a command line in it and type:
yo chiselAnswer Chisel questions according to your project needs and wait until installation ends.
Then to add your first-page type:
yo chisel:page "Home"Finally start a development server and tasks which will process your templates, styles and scripts.
npm run devContinuing development on existing project is easy too – just remember such project was already set up with Chisel, so you don’t have to set it up again. All you need to do when you cloned the existing repository is to run
npm installto install Node modules. Then you can run
npm run devIf you continue development on a WordPress project, run the following command, it will create wp-config-local.php and dev-vhost.conf file (if you need it)
yo chisel:wp-configThen create database, import DB dump and run
npm installto install Node modules. Finally, you can build the project using
npm run buildor run the development task
npm run devFor the detailed documentation refer to getchisel.co
—
May your hand be steady and your creations well crafted!
