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.

Leave a Reply