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

Grunt没有实时重载Sass / SCSS（NodeJS）

1 个答案: