Как настроить Build System в Sublime Text3 для Grunt?

Question

[Сергей]

Добрый день. Я начинающий верстальщик и имею весьма малый опыт работы. На днях у нас был внедрен Grunt, для наших проектов. Верстая в Sublime Text, я сталкиваюсь с тем, что теперь мне очень неудобно компилировать SCSS с помощью Compass в CSS. Если раньше было достаточно сочетания клавиш ctrl+B, то после установки плагина Grunt для Sublime Text приходится открывать панель, выбирать Grunt, а затем в нем уже выбирать действие. В данном случае compass:compile.

С помощью Build System вроде бы эту проблему можно решить, повесив эту операцию опять на ctrl+B, но я не могу разобраться с синтаксисом написания Build'a. Был бы благодарен любой помощи. Спасибо.

Answer 1

[Michael Danilov]

Добавьте в Grunt плагины grunt-contrib-watch и grunt-contrib-compass.
В Gruntfile.js примерно следующее:

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']);

};

После запускайте Grunt. Вы в Sublime Text делаете изменения в ваших Compass-файлах, Grunt отслеживает, что файл изменился, и запускает компиляцию Compass в CSS.

P.S. Я не очень хорошо знаком с Grunt и совсем не знаком с Compass, поэтому мог что-то в командах напутать, но суть изложить.

Comments

[Сергей]

Спасибо за ответ, пока нет возможности проверить. Как попробую отпишусь. Единственное, я боюсь что если где то в командах ошибка, это будет для меня фатально, так как я не знаю js абсолютно. Даже его синтаксис. Но в любом случае, этот вариант, я так понял, даже лучше того, что я просил. Как я понял, он будет сам отслеживать изменения и мне даже не придется использовать хот-кеи. А это конечно большой плюс.