Question

我刚刚开始使用Grunt，我对如何配置我的gruntfile.js来识别sass部分文件的更改感到有些困惑。我已经跟随了Chris Coyier关于24ways.org的文章，并对基础知识感到非常满意。当运行grunt watch时，我可以更改我的style.scss文件，grunt将监视和编译更改。但是，我通常使用style.scss作为@imports的长列表：

@import 'partials/partialfilename';

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

在我的项目目录中，我有一个sass目录，其中包含一个style.scss文件和一个包含大量部分内容的partials目录。

这是我的咕噜文件：

module.exports = function(grunt) {

// 1. All configuration goes here 
grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    concat: {   
        dist: {
            src: [
                'js/custom.js', 
                'js/foundation.js',
                'js/jquery.listnav.js',
                'js/jquery.ioslider.min.js'
            ],
            dest: 'js/build-scripts.js',
        }
    },

    uglify: {
        build: {
            src: 'js/build-scripts.js',
            dest: 'js/build-scripts-min.js'
        }
    },

    imagemin: {
        dynamic: {
            files: [{
                expand: true,
                cwd: 'images/',
                src: ['**/*.{png,jpg,gif}'],
                dest: 'images/'
            }]
        }
    },

    sass: {
        dist: {
            options: {
                style: 'compressed'
            },
            files: {
                'style.css': 'sass/style.scss'
            }
        } 
    }, 

    watch: {
        options: {
            livereload: true,
        },
        scripts: {
            files: ['js/*.js'],
            tasks: ['concat', 'uglify'],
            options: {
                spawn: false,
            }
        },
        css: {
            files: ['sass/**/*.scss'],
            tasks: ['sass'],
            options: {
                spawn: false,
            }
        },

        images: {
            files: ['images/**/*.{png,jpg,gif}', 'images/*.{png,jpg,gif}'],
            tasks: ['imagemin'],
            options: {
              spawn: false,
            }
        }

    }



});

// 3. Where we tell Grunt we plan to use this plug-in.
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. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default', ['watch', 'concat', 'uglify', 'imagemin', 'sass']);

};

我为watch css参数尝试了一些不同的选项，例如：

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

和

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

我意识到我可能会“忽略这一点”，我已经阅读了一些关于grunt sass插件'忽略'（_）下划线或部分因为sass globbing规则（？）并通过我的研究我注意到大多数人都在他们的项目中使用指南针而我不是。

所以，我的问题是：我如何配置grunt来监视和编译对我的sass partials的更改并正确编译我的css？

Answer 1

我找到了解决方案。

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

Grunt和sass（部分）入门

1 个答案: