Optimise Your Front-end Workflow with Prepros

Prepros is a generic front-end preprocessor, optimizer application which makes your life a little bit easier as a front-end developer.

The concept is simple: it is a GUI tool which makes similar tasks as you do in Gulp or Grunt but in a simpler way. You can’t create custom functions and call them individually, but you can compile your Less, Sass, Stylus, lint your JS or optimize your image.

We know that for a complex front-end workflow your best choice is Gulp or Grunt, but for simpler tasks, you can easily use a GUI app like Prepros which ha a beautiful and clean UI and I’m 100% sure that its features cover your basic needs. I’m using it for three years now (next to Gulp and Webpack), and I’m delighted with it! The app is available for only $29; it is well maintained and supported.

The app avialable both in dark and light UI.

One of the most popular similar GUI app is CodeKit which is also a great tool but unfortunately available just for MacOS.

The Functions of the Application

The application has a lot of features, and in this article, we check the ones that I use almost daily. For a more comprehensive list check out the official page!

Project Handling

In Prepros all of your projects are separately handled after you dropped into the GUI. The app makes a .config file which stores its settings.

After you open your project folder, you can navigate it through like you are in your file explorer. On the specific file types, you can set different settings like prefix, compress volume or compile destination.

Develop Easily

Prepros understand a lot of preprocessor like Less, Sass, Stylus in CSS; Haml, Pug, Markdown in HTML; Livescript, Typescript, Coffescript, Babel in JavaScript.

Nice to know that in the case of CSS you can set the correct auto-prefix parameters and in JS you can also config UglifyJS in detail.

You can also run a dev server with live-reload or debug your mobile pages from your desktop.

Concat Your Files

When you work with Sass or Less, it is not a problem to catenate your files with @import, but in the case of JS, it is not so easy. In Prepros you have two keywords named @prepros-prepend and @prepros-append which are works like the classic import.

Of course, you can also turn on the Source Map checkbox which makes easier the debugging of the catenated files.

FTP Upload

The app comes with an inbuilt FTP (or SFTP) client which makes comfortable your deploy process. You can also set upload on file change which also can be useful.

Summary

I think Prepros is a great tool! Of course, it is not the best for the advanced tasks, but you can cover every aspect of a basic front-end development workflow. You can download and try it for free for Mac, Linux, and Windows. If you need a simple and fast tool for your daily jobs, I can recommend it!