Grunt和sass入门(部分)

Grunt和sass入门(部分),sass,gruntjs,partials,Sass,Gruntjs,Partials,我刚刚开始使用Grunt,对于如何配置gruntfile.js以识别对sass部分文件的更改,我有点困惑。我已经阅读了Chris Coyier的文章,对基础知识感到非常满意。运行grunt watch时,我可以对style.scss文件进行更改,grunt将监视并编译更改。但是,我通常使用style.scs作为@imports的长列表: @import'partials/partialfilename' 当我对我的任何部分进行更改时,grunt没有注意到任何更改,因此没有编译任何内容 在我的项目

我刚刚开始使用Grunt,对于如何配置gruntfile.js以识别对sass部分文件的更改,我有点困惑。我已经阅读了Chris Coyier的文章,对基础知识感到非常满意。运行grunt watch时,我可以对style.scss文件进行更改,grunt将监视并编译更改。但是,我通常使用style.scs作为@imports的长列表:

@import'partials/partialfilename'

当我对我的任何部分进行更改时,grunt没有注意到任何更改,因此没有编译任何内容

在我的项目目录中,我有一个sass目录,其中包括一个style.scss文件和一个包含许多部分的部分目录

这是我的grunt文件:

module.exports=函数(grunt){
//1.所有配置都在这里
grunt.initConfig({
pkg:grunt.file.readJSON('package.json'),
concat:{
地区:{
src:[
“js/custom.js”,
“js/foundation.js”,
'js/jquery.listnav.js',
'js/jquery.ioslider.min.js'
],
dest:'js/build scripts.js',
}
},
丑陋的:{
建造:{
src:'js/build scripts.js',
dest:'js/build-scripts-min.js'
}
},
imagemin:{
动态:{
档案:[{
是的,
cwd:“图像/”,
src:['***.{png,jpg,gif}'],
dest:'图像/'
}]
}
},
sass:{
地区:{
选项:{
样式:“压缩”
},
档案:{
'style.css':'sass/style.scss'
}
} 
}, 
观察:{
选项:{
利弗雷罗德:没错,
},
脚本:{
文件:['js/*.js'],
任务:['concat','uglify'],
选项:{
产卵:假,
}
},
css:{
文件:['sass/**/*.scss'],
任务:['sass'],
选项:{
产卵:假,
}
},
图像:{
文件:['images/**.{png,jpg,gif}','images/*.{png,jpg,gif}',
任务:['imagemin'],
选项:{
产卵:假,
}
}
}
});
//3.我们告诉Grunt我们计划使用这个插件。
grunt.loadNpmTasks(“grunt-contrib-concat”);
grunt.loadNpmTasks(“grunt-contrib-uglify”);
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks(“grunt-contrib-watch”);
grunt.loadNpmTasks(“grunt-contrib-sass”);
//4.当我们在终端中键入“Grunt”时,告诉Grunt该做什么。
registerTask('default',['watch','concat','uglify','imagemin','sass']);
})

对于watch css参数,我尝试了几个不同的选项,例如:

css: {
  files: ['sass/**/*.scss'],
  tasks: ['sass'],
  options: {
    spawn: false
  }
}

我意识到我可能“忽略了要点”,我读了一些关于grunt sass插件“忽略”()下划线或部分的文章,因为sass全球化规则(?),通过我的研究,我注意到大多数人在他们的项目中使用compass,而我没有


所以,我的问题是:如何配置grunt来监视和编译对sass部分的更改,并正确编译css?

我找到了一个解决方案

css: {
  files: ['sass/*.scss'],
  files: ['sass/partials/*.scss'],
  tasks: ['sass'],
  options: {
    spawn: false,
  }
}

这真的帮助了我,所以谢谢你!我有多个子目录用于mixin和partials,因此我使用了“[scss/***.scss]”,这使我能够保存导入并编译导入上述文件的scss文件!很少的
css: {
  files: ['sass/*.scss'],
  files: ['sass/partials/*.scss'],
  tasks: ['sass'],
  options: {
    spawn: false,
  }
}