Automatically build your code when you save a file on Sublime Text

As a Web developer, you probably use some sort of CSS and JavaScript post or pre-processor like Sass, Less, PostCSS, Pleeease, Grunt, Gulp, Webpack, Requirejs, etc. If that’s the case, then you have to manually compile your code every time you make a change if you want to see the result of your work. what if I told you there is a way to do that automatically every time you save a file?

You can set that up on Sublime Text after a few simple steps. Firstly, install the SublimeOnSaveBuild package via the Package Control. This package will simply tell Sublime Text to build your project when you save a file. To specify what to build, you need to set up your build systems. With build systems, you can launch your external scripts directly in your editor and see their output result. Here is an example of a build systems configuration in the settings of Sublime Text:

"build_systems": [
  {
    "name":        "Grunt compilation",
    "selector" :   "source.js",
    "working_dir": "/Users/fakocher/No Mushroom App/js",
    "cmd":         ["grunt", "compile"]
  },
  {
    "name":        "Pleeease compilation",
    "selector" :   "source.less",
    "working_dir": "/Users/fakocher/Secret Evil App/css",
    "cmd":         ["pleeease", "compile"]
  }
]

After setting that up according to your project, try saving a file. the compilation will start automatically in Sublime Text’s console.

Quickly empty cache and reload on Google Chrome

If you are a web developer, you are perhaps emptying the cache and reloading every time you want to check if your JavaScript works or if your CSS renders a pretty UI. Well, there is a hidden feature in Google Chrome that allows you to do that in two quick clicks.

You have to open the Developer tools for this to work. to do this, simply hit the F12 key. Then if you right-click on the reload button, a context menu appears with three options : “Normal Reload”, “Hard Reload” and “Empty Cache and Hard Reload”. Click the last option.

Chrome quick empty cache

Too often I see developers look for the clear cache option in Chrome’s settings, losing 1-2 minutes each times. It seems like a tiny amount of time but it can add up to a lot and can easily provoke frustration and anger. I hope this small tip will help you in your Web development journey.