grunt-contrib-watch + sass: как указать файлы назначения?

У меня есть такой рабочий процесс: 

module.exports = function(grunt) {

    require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

    grunt.initConfig({
    sass: {
        options: {
        sourceMap: true
        },
        dist: {
        }
    },
    watch: {
      files: ['src/*.scss'],
      tasks: ['sass']
    }
    });

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

    grunt.registerTask('default', ["sass"]);

};

После запуска grunt watch и изменения файла src/*.scss, я получаю следующее:

Файл " src / main.СКСС " изменился. Выполнение задачи" sass:dist " (sass)

Сделано, без ошибок. Завершено в 0.949 s В Вт фев 02 2016 11: 25: 11 GMT+0100 (CET) - ожидание...

Моя проблема: где сгенерированный файл? как указать файл назначения?

Я также пробовал использовать это рабочий процесс: 

module.exports = function(grunt) {

    require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

    grunt.initConfig({
    sass: {
        options: {
        sourceMap: true
        },
        dist: {
          files: [{
            expand: true,
            cwd: 'src',
            src: ['*.scss'],
            dest: '.',
            ext: '.css'
          }]
        }
    },
    watch: {
      files: ['*.scss'],
      tasks: ['sass']
    }
    });

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

    grunt.registerTask('default', ["sass"]);

};

И работает также grunt watch, но когда я изменяю src/*.scss, ничего не происходит..

EDIT : это мой файл grunt после ответов: 

module.exports = function(grunt) {

    require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

    grunt.initConfig({
    sass: {
        options: {
        sourceMap: true
        },
        dist: {
          files: [{
            expand: true,
            cwd: '.',
            src: ['src/**/*.scss'],
            dest: '.',
            ext: '.css'
          }]
        }
    },
    watch: {
      files: ['src/**/*.scss'],
      tasks: ['sass']
    }
    });

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

    grunt.registerTask('default', ["sass"]);

};
3 5
gruntjs grunt-contrib-watch

3 ответа:

Давайте предположим, что у вас есть файл main.scss и что @import находится из _sassfile.scss в папке layout. Звучит неплохо?

sass: {
    options: {
      sourceMap: true,
      outFile: 'dist/main.css.map'    // so you get a sourceMap file
    },
    dist: {
      files: {
        'dist/main.css' : 'src/main.scss'
      }
    }
  },
  watch: {
    files: ['src/layout/*.scss'],
    tasks: ['sass']
  }

Это означает, что grunt watch будет отслеживать изменения в отдельных компонентах файлов sass/scss, затем он запустит задачу sass, которая обработает все до dist/main.css.

Если вы используете только 1 файл Sass, то есть main.scss является вашим единственным файлом, или если вы помещаете дополнительные файлы _partial.scss Sass в тот же каталог, вы можете сохранить команду watch как 

watch: {
    files: ['src/*.scss'],
    tasks: ['sass']
}

Последнее. cwd для ваших файлов Sass, src/ не будет переноситься на files, указанный для watch. Итак, ваш Gruntfile искал изменения файлов в каталоге выше src/ во втором рабочем процессе.

2

Вам нужно указать выход: 

module.exports = function(grunt) {

  require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

  grunt.initConfig({
  sass: {
    options: {
      sourceMap: true
    },
    dist: {
      files: {
        //output added here
        'dist/main.css' : 'src/*.scss'
      }
    }
  },
  watch: {
    files: ['src/*.scss'],
    tasks: ['sass']
  }
  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', ["sass"]);
};

Примечаниеgrunt-sass также должен поддерживать все стандартные параметры конфигурации .

С вашей первоначальной конфигурацией задача была успешно выполнена, но не нашла файлов для обработки. Если я бегу с grunt --debug --verbose, я получаю: 

[D] Task source: /Users/edeustace/dev/github/edeustace/stack-overflow-questions/grunt-watch/node_modules/grunt-sass/tasks/sass.js

Running "sass:dist" (sass) task
[D] Task source: /Users/edeustace/dev/github/edeustace/stack-overflow-questions/grunt-watch/node_modules/grunt-sass/tasks/sass.js
Verifying property sass.dist exists in config...OK
File: [no files]

Я думаю, вы можете считать это ошибкой вgrunt-sass .

1

Причина, по которой grunt watch не срабатывает во второй конфигурации задачи grunt в вашем вопросе, заключается в том, что за неправильным путем к файлу следят. 

watch: {
  files: ['*.scss'],
  tasks: ['sass']
}

Это только просмотр всех файлов .scss, присутствующих в корне проекта (не внутри любой папки, как src). Вам нужно будет установить путь files для watch такой же, как конфигурация задачи 1-го grunt в вашем вопросе, и он должен работать 

watch: {
  files: ['src/*.scss'],
  tasks: ['sass']
}

Примечание: в случае, если есть подпапка под папкой src содержащий файлы .scss, то вам придется изменить шаблон на src/**/*.scss в массиве watch files и на src: ['**/*.scss'] в объекте sass files

Также во 2-й конфигурации grunt параметр files объекта dest для задачи sass установлен в .. Это создает файлы CSS в корне проекта. Чтобы сгенерировать их внутри src или других папок, укажите соответственно

Вы можете проверить рабочий пример по адресу https://github.com/pra85/grunt-sass-example (Проверьте подпапка ветвь для обработки случая вложенных папок в src, содержащих файлы SASS)

1