[英]Grunt: how to concat a .CSS file onto my compiled .SCSS files?
I'm learning grunt and it's wonderful! 我正在学习咕unt,真是太好了!
background: 背景:
My project is built using SASS ( .scss
), and I use grunt's compass
plugin to compile multiple .scss
into a single .CSS
on output. 我的项目是使用SASS(
.scss
)构建的,我使用grunt的compass
插件将多个.scss
编译为输出中的单个.CSS
。
problem: 问题:
I am using a jQuery plugin which has a .css
file associated with it. 我正在使用一个与
.css
文件相关联的jQuery插件。 I want my Grunt to do as follows: 我希望我的咕unt做如下:
frontend.css
frontend.css
plugin.css
onto the end of frontend.css
plugin.css
连接到frontend.css
的末尾 frontend.css
. frontend.css
。 I have tried adding a concat rule for my CSS, which runs after the grunt compass compiling. 我曾尝试为我的CSS添加concat规则,该规则在咕the的指南针编译后运行。 The concat rule is shown below.
concat规则如下所示。
concat: {
css: {
src: ['www/assets/css/frontend.css',
'bower_components/bootstrap-datepicker/css/plugin.css'],
dest: 'www/assets/css/frontend.css'
}
}
Here is what the grunt task looks like: 这是grunt任务的样子:
grunt.registerTask('default', ['newer:concat:vendors', 'copy', 'uglify', 'compass:dist', 'newer:concat:css', 'newer:cssmin', 'newer:imagemin']);
Here are a list of the Grunt plugins I am using: 以下是我正在使用的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');
if I call concat:css
, plugin.css is concatenated, however each time I run the task it is added on again, again, and again, so multiple copies of the same CSS are being inserted into the file. 如果我调用
concat:css
,则将plugin.css连接起来,但是每次运行该任务时,都会一次又一次地将其添加,因此将同一CSS的多个副本插入到文件中。
if I call newer:concat:css
, the file is not ever concatenated onto frontend.css
. 如果我调用
newer:concat:css
,则该文件永远不会串联到frontend.css
。
Any help much appreciated! 任何帮助,不胜感激!
The easiest solution would be to use grunt-contrib-clean , which can simply delete the file on every build: 最简单的解决方案是使用grunt-contrib-clean ,它可以在每次构建时都删除该文件:
clean: {
css: ['www/assets/css/frontend.css']
}
Or without installing a plugin: 或不安装插件:
grunt.registerTask('clean:css', function () {
grunt.file.delete('www/assets/css/frontend.css');
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.