grunt sass и js автозагрузчик

Question

Я пробовал несколько вещей, но не могу прийти к хорошему решению. Я использую grunt, чтобы скомпилировать мой sass и уменьшить мой javascript.

Можно ли автозагружать каждый файл .sass и каждый .js-файл в определенном каталоге?

Я попытался вещи, как этот

sass: { 
      options: { 
       sourceMap: false 
      }, 
      dist: { 
       src: 'src/sass/**/*.sass', 
       dest: 'dist/css/style.css' 
      } 
     } 

, но это будет загружать только самый первый файл Sass. Я не уверен, что concat даже делает, но я попробовал это, а также не нашел решение, которое я искал.

В основном все файлы в папке sass/должны быть скомпилированы в один большой файл style.css одинаковым с javascript.

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

редактировать:

Так с этим

files: [{ 
        expand: true, 
        cwd: "src/sass/", 
        src: ["**/*.sass"], 
        dest: "dest/css", 
        ext: ".css" 
       }] 

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

Answer 1

Это формат для генерации одного выходного файла из нескольких исходных файлов:

concat: { 
    whatever: { 
     options: { separator: '\n' }, 
     src: ['src/sass/**/*.sass'], 
     dest: 'build/tmp.sass' // make sure the temporary build/ dir exists! 
    } 
} 

Он работает только на задачах, поддерживающих объединение нескольких файлов; в этом случае задание . Она производит dist/css/sass.tmp, что вам нужно будет обрабатывать с sass задачи:

sass: { 
    dist: { 
     files: [{   
      src: 'build/tmp.sass', 
      dest: 'dist/css/style.css' 
     }] 
    } 
} 

Вы бы убедиться, что они выполняются в последовательности с чем-то вроде этого:

grunt.registerTask('default', ['concat', 'sass']); // add your uglify/cssmin here 

Однако, я не рекомендуйте это, потому что порядок файлов sass неконтролируемый, и он не сделает доступным mixin, даже если они сначала скомпилированы в css, что бессмысленно, потому что они теряют свой формат mixin. Лучше всего запустить sass в одном исходном файле и импортировать другие файлы в этот исходный файл.

Update

Что касается автоматической загрузки файлов подмешать, SASS Reference упоминает вы можете использовать пользовательские импортер (написанные на Ruby), что заботиться о @import; Я не уверен, что это только для импорта файлов на верхнем уровне, а также для @import mixin-name(foo) в правилах, но я так не думаю.

Существует альтернативный подход, который вы могли бы использовать на основе concat, считая, что у вас есть один основной файл sass. Вам нужно будет добавить один @import 'all-mixins'.Это all-mixins.sass является сгенерированным файлом:

concat: { 
    all_mixins: { 
     options: { separator: '\n' }, 
     src: ['src/sass/mixins/*.sass'], 
     dest: 'build/all-mixins.sass' 
    } 
} 

А вы бы указать sass option loadPath добавить build/ в пути:

sass: { 
    dist: { 
     options: { 
      loadPath: 'build/' 
     }, 
     files: [{   
      src: 'build/tmp.sass', 
      dest: 'dist/css/style.css' 
     }] 
    } 
} 

Это как можно ближе к автоматической загрузке, как он получает без расширения самой дерзости.