Использование Grunt.js для динамического просмотра и последующего компиляции каталога SASS-файлов в один файл CSS

Question

Я новичок в Grunt.js, но я начинаю разглядывать его. Главное, что я хотел бы сделать с ним, но я не могу прищуриться.

Моя цель здесь состоит в том, чтобы указывать хрюкать в каталог и следить за всеми соответствующими файлами, а также при изменениях компилировать их в новый отдельный файл CSS.

Вот мой текущий gruntfile:

module.exports = function(grunt) { 
    // Project configuration. 
    grunt.initConfig({ 
     // CONFIG =========================/ 
     pkg: grunt.file.readJSON('package.json'), 
     sass: { 
      dist: { 
       files: { 
        'assets/css/style.css' : 'assets/css/sass/*.scss' 
       } 
      } 
     }, 
     watch: { 
      css: { 
       files: 'assets/css/sass/*.scss', 
       tasks: ['sass'] 
      } 
     } 
    }); 
    // DEPENDENT PLUGINS =========================/ 
    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.loadNpmTasks('grunt-contrib-sass'); 

    // TASKS =====================================/ 
    grunt.registerTask('default', ['watch']); 
}; 

До сих пор я использую черновую-вно-часы, и черновую-вно-дерзость. Я пробовал компас, а также импорт каталога, но я не мог заставить ни одного из них делать то, что я пытаюсь сделать.

В конце дня я просто пытаюсь избежать записи файла импорта, поскольку исходный порядок не имеет значения для того, как я пишу свой САСС, и потому, что я действительно как знать, как это сделать.

Answer 1

Я не уверен, как сделать то, что вы хотите достичь, просто используя Sass и Grunt-Contrib-Sass, но вы можете добиться чего-то подобного, используя Sass-Globbing, подключаемый модуль SASS, который позволяет импортировать весь каталоги. Для того, чтобы использовать плагин, вы бы использовать require опцию в Grunt-Contrib-Sass, и вы бы его цель основной styles.scss файл, который может выглядеть примерно так:

@import "vendor/*"; 
@import "modules/*"; 
@import "partials/*"; 

И тогда ваш файл хрюкать будет имеют примерно следующее:

sass: { 
    dist: { 
     options: { 
      require: 'sass-globbing' 
     }, 
     files: { 
      'assets/css/style.css' : 'assets/css/sass/style.scss' 
     } 
    } 
}