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

Question

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

Моя цель здесь - указать grunt на каталог и заставить его просматривать все соответствующие файлы, а после изменений скомпилировать их в новый отдельный файл 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']);
};

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

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

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'
        }
    }
}