node.js - Grunt 不实时重新加载 Sass/SCSS (NodeJS)

Question

我在使用 Grunt 时遇到了一点问题，它正在编译我的 Sass/SCSS 文件（我正在使用.scss），但它不会 LiveReload。我正在使用集成了 LiveReload 功能的“watch”依赖项。

观看：https ://github.com/gruntjs/grunt-contrib-watch Sass/SCSS：https ://github.com/gruntjs/grunt-contrib-sass

这是我下面的配置（相关部分），任何人都可以告诉我哪里出错了吗？它为所有其他文件和文件夹实时重新加载。

grunt.initConfig({
    connect: {
        options: {
            port: 9000,
            hostname: 'localhost'
        },
        livereload: {
            options: {
                middleware: function ( connect ) {
                    return [
                        mountFolder(connect, 'app'),
                        lrSnippet
                    ];
                }
            }
        }
    },
    open: {
        server: {
            path: 'http://localhost:<%= connect.options.port %>'
        }
    },
    sass: {
        app: {
            files: {
                './app/css/style.min.css': 'app/css/scss/style.scss'
            }
        }
    },
    watch: {
        options: {
            nospawn: true
        },
        css: {
            files: './app/css/scss/*.scss',
            tasks: ['sass'],
            options: {
                livereload: true,
            },
        },
        livereload: {
            options: {
                livereload: LIVERELOAD_PORT
            },
            files: [
                'app/{,*/}*.html',
                'app/css/{,*/}*.{css,scss,sass}',
                'app/js/{,*/}*.js',
                'app/img/{,*/}*.{png,jpg,jpeg,gif,webp,svg}'
            ]
        }
    }
});

Answer 1

不要使用连接中间件，而是尝试在你的监视任务中使用类似的东西（下面的coffeescript Gruntfile语法）：

watch:

  livereload:
    files: "path/to/generated/css"
    options:
      livereload: true