We should automate our development process whenever possible. But there are so many tools available and new ones are published every week. Even though these tools help us, it could be very time consuming to learn and to handle all of these tools.
In this post I'll show you how to automate development process using only Atom packages.
Let's say we're starting a new project. It's an open source project, a
Beautiful source code
Beautiful source code is a must. Nobody wants to work on a code that is not properly aligned or formatted. But not every developer could produce beautiful code. Most of the times this is not intentional, because when we are in a process of development, we're not focused on beautiful code, we're focused on functional code.
But that doesn't feel right, too. Who has the time to copy-paste code back and forth.
We should use editorconfig, a set of rules which define how our code should be formatted. These rules should be written in
.editorconfig file which should be placed in a root folder of our project. editorconfig provides plugins for almost every popular text editor. That's awesome, because our plugin will be beautiful no matter who works on it. Yaay!
editorconfig rules are out of scope of this article. For full documentation, refer to editorconfig official page.
Sure, we should use editorconfig here, too. But what if we want to sort
CSS properties, for example? Or add missing semicolons? Easy, we could use csscomb.
csscombis a tool which formats
files based on configuration file
.csscomb. There was an online
is unnecessary cope-paste back and forth again.
To create our config file, we could refer to all available options or to online config builder. We should put our config file in a root folder of a project.
This won't work unless we install Atom package for csscomb. There are several packages available, but my favorite is atom-css-comb.
CSS files are beautiful, too.
We should publish our plugin on package manager, like bower or npm. That means we should create and configure
JSON files should be pretty, too. That's where pretty-json package steps in.
This very popular plugin formats
JSON files on command. As a bonus, this plugin could warn us if our
JSON files are not properly formatted.
Minification and uglification
Our source code is beautiful, now's the time to compress our files. Compressed files are usually used in production. Final user doesn't need beautiful file, user doesn't even care about the file, user just want a super fast and fluid experience. Every byte matters, because smaller files equals faster load.
CSS files are minified and
What we want is a tool which creates compressed versions of our source code files in a separate files automatically. And for that task we should use tools like Gulp. Gulp is a task runner based on Node.js. Gulp community created and shared quite a large number of plugins. For our tasks to compress our files, let's use gulp-cssmin and gulp-uglify.
Gulp tasks are out of scope of this article, please refer to official Gulp documentation.
After we installed Gulp and defined Gulp tasks, we should run it from console by typing "gulp" and the name of our task. For example,
gulp cssmin. When Gulp finishes with a task, our
CSS file should be compressed. The same is with
JS files, run
gulp uglify inside console.
Although this is very easy, it is also a little bit clumsy, switching from Atom to console all the time. Fortunately, we could run these tasks from Atom using gulp-manager.
gulp-manager is a package that could run Gulp tasks from Atom. This package doesn't work without bottom-dock, therefore we should install this package, too. After installation, we should run it through default keybinding for gulp-manager:
We should see a new dock with 3 main sections:
- task list,
- input field and
- console output.
If we want to run a task, we could click it from task list. On the right side we could see a console output for these task. It is very useful when debugging invalid or failed task. Alternatively, we could write the name of the task inside input field and then press Enter.
Our files are now compressed and tasks are run from Atom. We don't need a console anymore.
Most of this tools are available as a standalone solutions. But why use them separately, when we could run them from inside Atom editor.
Once when you get comfortable with this kind of automation, you won't think of manual tasks again.
Which Atom packages are you using to automate your development process? Do you like ones mentioned in this article?
Don't be a stranger, leave a comment or send me a tweet.