这是关于如何将Compass与Grunt一起使用的问题。 数据填充步骤出了问题。我注意到在控制台上,当我只修改.scss文件时,指南针会多次填充同一个文件(四,五或十到十)。 在您看来,它取决于什么?这是我的gruntfile.js。 谢谢你的帮助。
module.exports = function (grunt) {
var _homeJs = ['contents/js/jquery.Cinema.js', 'contents/js/jquery.SkinOverlay.js'];
var _homeJsExclude = []
_homeJs.forEach(function (entry) {
_homeJsExclude.push('!' + entry)
});
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: ['contents/js/*.js', _homeJsExclude],
dest: 'contents/dist/js/global.js'
},
lib: {
src: 'contents/plugins/**/*.js',
dest: 'contents/dist/js/libs.js'
},
globalhome: {
files: {
'contents/dist/js/global.home.js': _homeJs
}
}
},
uglify: {
dist: {
src: ['<%= concat.dist.dest %>'],
dest: 'contents/dist/js/global.min.js'
},
globalhome_min: {
src: 'contents/dist/js/global.home.js',
dest: 'contents/dist/js/global.home.min.js'
},
lib: {
src: ['<%= concat.lib.dest %>'],
dest: 'contents/dist/js/libs.min.js'
}
},
compass: {
dist: {
options: {
sassDir: 'contents/sass/',
cssDir: 'contents/dist/css',
watch: true,
outputStyle: 'compressed',
linecomments: false
}
}
},
cssmin: {
target: {
files: [
{
'./contents/dist/css/ie-css/ie8/ie8.min.css': ['./contents/css/ie-css/ie8/ie8.css']
},
{
'./contents/dist/css/main.min.css': ['./contents/dist/css/main.css']
},
{
'./contents/dist/css/responsive.min.css': ['./contents/dist/css/responsive.css']
}
]
}
},
concurrent: {
target: {
tasks: ['compass', 'watch'],
options: {
logConcurrentOutput: true
}
}
},
watch: {
js: {
files: ['contents/js/*.js', 'contents/plugins/**/*.js'],
tasks: ['concat', 'uglify:dist', 'uglify:globalhome_min'],
options: {
reload: true
}
},
css: {
files: ['contents/sass/**/*.scss', 'contents/dist/css/'],
tasks: ['concurrent:target'],
options: {
reload: true
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
};
答案 0 :(得分:0)
你在这里遇到了一些问题......首先,你已经在watch
任务中compass
了你的sass文件,没有必要用明确的{{{}来监控它们。 1}}任务。此外,您的watch
任务设置为在sass文件更改后再次运行concurrent
。
这是您现在设置的逻辑流程:
watch
,等待sass OR编译的css文件更改watch
执行watch
,然后执行concurrent
,然后另一个compass
的实例。watch
任务会编译您的css,这会导致compass
任务检测到更改并再次运行watch
任务 。所以,不要使用现有的,只需使用这个(简化的)配置:
concurrent
你把整个事情踢掉了:
grunt.initConfig({
// ...
compass: {
dist: {
options: {
sassDir: 'contents/sass/',
cssDir: 'contents/dist/css',
// *** remove this option
// watch: true,
outputStyle: 'compressed',
linecomments: false
}
}
},
// ...
// *** remove this whole task, in the current config you do not need it
/*
concurrent: {
target: {
tasks: ['compass', 'watch'],
options: {
logConcurrentOutput: true
}
}
},
*/
watch: {
// ...
css: {
// *** only watch the source files, not the output
files: ['contents/sass/**/*.scss'],
// *** run the `compass` task directly
tasks: ['compass'],
options: {
reload: true
}
}
}
});
或者,如果您想先运行指南针,请注意更改:
~/my-project$ grunt watch