How to setup Build System in Sublime Text3 for Grunt?

Question

HTML

Good afternoon. I am a beginner coder and have very little work experience. The other day we had Grunt implemented for our projects. When coding in Sublime Text, I find it very inconvenient now to compile SCSS with Compass to CSS. If earlier the ctrl + B keyboard shortcut was enough, then after installing the Grunt plugin for Sublime Text, you have to open the panel, select Grunt, and then select an action in it. In this case compass:compile.
With the help of the Build System, it seems that this problem can be solved by hanging this operation again on ctrl+B, but I can't figure out the syntax for writing Build'a. I would be grateful for any help. Thank you.

Answer 1

Add the grunt-contrib-watch and grunt-contrib-compass plugins to Grunt .
Gruntfile.js is something like this:

module.exports = function(grunt) {

  grunt.initConfig({
    compass: {
      dist: {
        options: {
          sassDir: 'sass',
          cssDir: 'css',
          environment: 'production'
        }
      }
    },
    watch: {
      scss: {
        files: ['sass/*.scss'],
        tasks: ['compass']
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['watch']);

};

Then run Grunt . You make changes to your Compass files in Sublime Text, Grunt monitors that the file has changed and starts compiling Compass to CSS.
PS I'm not very familiar with Grunt and not at all familiar with Compass, so I could confuse something in the commands, but I'll state the essence.