Grunt：如何将 .CSS 文件连接到我编译的 .SCSS 文件中？答案

【问题标题】：Grunt: how to concat a .CSS file onto my compiled .SCSS files?Grunt：如何将 .CSS 文件连接到我编译的 .SCSS 文件中？
【发布时间】：2014-06-16 20:55:54
【问题描述】：

我正在学习咕噜声，这很棒！

背景：

我的项目是使用 SASS (.scss) 构建的，我使用 grunt 的 compass 插件将多个 .scss 编译成单个 .CSS 输出。

问题：

我正在使用一个 jQuery 插件，它有一个与之关联的 .css 文件。我希望我的 Grunt 执行以下操作：

将*.SCSS编译成frontend.css
完成后，将plugin.css 连接到frontend.css 的末尾
缩小frontend.css。

我尝试为我的 CSS 添加 concat 规则，该规则在 grunt compass 编译后运行。 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。

非常感谢任何帮助！

【问题讨论】：

为什么不直接将plugin.css 复制到一个新的plugin.scss 文件中？我通常就是这样做的。
@sdsanders 他正在用 bower 安装 css，所以他可能无法永久重命名它。
@sdsanders，就像 jgillich 指出我正在使用凉亭，所以我不想那样做。 :) 谢谢你的建议。
@Prefix 概述了使用 Grunt 解决此问题的另一种方法here。

标签： css sass gruntjs concatenation grunt-contrib-concat

【解决方案1】：

最简单的解决方案是使用grunt-contrib-clean，它可以在每次构建时简单地删除文件：

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

或者不安装插件：

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

【讨论】：