Grunt: как объединить файл .CSS с моими скомпилированными файлами .SCSS?

Я учусь хрюкать, и это замечательно!

фон:

Мой проект построен с использованием SASS (.scss), и я использую плагин grunt compass для компиляции нескольких .scss в один .CSS на выходе.

проблема:

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

  1. Скомпилируйте *.SCSS в frontend.css
  2. когда закончите, соедините plugin.css с концом frontend.css
  3. уменьшить frontend.css.

Я попытался добавить правило concat для своего CSS, которое запускается после компиляции компаса grunt. Правило concat показано ниже.

concat: {
  css: {
    src: ['www/assets/css/frontend.css',
          'bower_components/bootstrap-datepicker/css/plugin.css'],
    dest: 'www/assets/css/frontend.css'
  }    
}

Вот как выглядит задание grunt:

  grunt.registerTask('default', ['newer:concat:vendors', 'copy', 'uglify', 'compass:dist', 'newer:concat:css', 'newer:cssmin', 'newer:imagemin']);

Вот список плагинов Grunt, которые я использую:

 // Load Grunt Tasks 
 grunt.loadNpmTasks('grunt-contrib-concat');
 grunt.loadNpmTasks('grunt-contrib-uglify');
 grunt.loadNpmTasks('grunt-contrib-cssmin');
 grunt.loadNpmTasks('grunt-contrib-compass');
 grunt.loadNpmTasks('grunt-contrib-watch');
 grunt.loadNpmTasks('grunt-contrib-copy');
 grunt.loadNpmTasks('grunt-contrib-imagemin');
 grunt.loadNpmTasks('grunt-newer');

если я вызываю concat:css, plugin.css объединяется, однако каждый раз, когда я запускаю задачу, он добавляется снова, снова и снова, поэтому в файл вставляется несколько копий одного и того же CSS.

если я вызову newer:concat:css, файл никогда не будет объединен с frontend.css.

Любая помощь высоко ценится!


css sass concatenation gruntjs grunt-contrib-concat
person tdc    schedule 16.06.2014    source источник
comment
Почему бы просто не скопировать plugin.css в новый файл plugin.scss? Обычно я так и делаю.   -  person Steve Sanders    schedule 17.06.2014
comment
@sdsanders Он устанавливает CSS с помощью Bower, поэтому, вероятно, не может переименовать его навсегда.   -  person jgillich    schedule 17.06.2014
comment
@sdsanders, как указал jgillich, я использую Bower, поэтому я бы предпочел этого не делать. :) Спасибо за предложение.   -  person tdc    schedule 17.06.2014
comment
@Prefix Другой способ исправить это с помощью Grunt описан здесь.   -  person patrick    schedule 30.12.2014

Ответы (1)


arrow_upward
1
arrow_downward

Самым простым решением было бы использовать grunt-contrib-clean, который может просто удалить файл на каждой сборке:

clean: {
    css: ['www/assets/css/frontend.css']
}

Или без установки плагина:

grunt.registerTask('clean:css', function () {
    grunt.file.delete('www/assets/css/frontend.css');
});
person jgillich    schedule 16.06.2014