0

我正在尝试使用 Grunt 视图运行一个 php Web 服务器，其中 SCSS/CSS 更改被监视并重新编译，因为它们被更改并实时重新加载到 Web 服务器中。目前它正在运行 Web 服务并显示请求，但是当我修改并保存 SCSS 文件时，它根本不会重新编译 CSS 文件。

我在下面包含了我的 Gruntfile.js：

    module.exports = function(grunt) {
            grunt.initConfig({
                    pkg: grunt.file.readJSON('package.json'),
                    compass: {
                            options: {
                                    config: 'config.rb',
                            }
                    },
                    php: {
                            options: {
                                    port: 8000,
                                    keepalive: true,
                                    open: true,
                                    base: 'public_html/',
                                    hostname: 'localhost'
                            },
                            watch: {
                                    options: {
                                            livereload: 8000
                                    },
                                    scss: {
                                            files: '**/*.scss',
                                            tasks: ['compass'],
                                            options: {
                                                    livereload: false
                                            }
                                    },
                                    css: {
                                            files: '**/*.css',
                                            tasks: [],
                                            options: {
                                                    livereload: 8000
                                            }
                                    }
                            }
                    }
            });
            grunt.loadNpmTasks('grunt-contrib-compass');
            grunt.loadNpmTasks('grunt-php');
            grunt.loadNpmTasks('grunt-contrib-watch');
            //grunt.registerTask('default',['watch']);
            grunt.registerTask('phpwatch', ['php:watch', 'watch']);
    }

如果这有助于调试，这是我运行“grunt phpwatch --verbose”时的输出：

Initializing
Command-line options: --verbose

Reading "Gruntfile.js" Gruntfile...OK

Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK

Registering "grunt-contrib-compass" local Npm module tasks.
Reading /Users/adam/Sites/sitename/node_modules/grunt-contrib-compass/package.json...OK
Parsing /Users/adam/Sites/sitename/node_modules/grunt-contrib-compass/package.json...OK
Loading "compass.js" tasks...OK
+ compass

Registering "grunt-php" local Npm module tasks.
Reading /Users/adam/Sites/sitename/node_modules/grunt-php/package.json...OK
Parsing /Users/adam/Sites/sitename/node_modules/grunt-php/package.json...OK
Loading "php.js" tasks...OK
+ php

Registering "grunt-contrib-watch" local Npm module tasks.
Reading /Users/adam/Sites/sitename/node_modules/grunt-contrib-watch/package.json...OK
Parsing /Users/adam/Sites/sitename/node_modules/grunt-contrib-watch/package.json...OK
Loading "watch.js" tasks...OK
+ watch
Loading "Gruntfile.js" tasks...OK
+ debug, phpwatch

Running tasks: phpwatch

Running "phpwatch" task

Running "php:watch" (php) task
Verifying property php.watch exists in config...OK
File: [no files]
PHP 5.4.17 Development Server started at Mon Nov  4 16:37:33 2013
Listening on http://sitename.local:8000
Document root is /Users/adam/Sites/sitename/public_html
Press Ctrl-C to quit.
[Mon Nov  4 16:37:40 2013] 127.0.0.1:56330 [200]: /
[Mon Nov  4 16:37:46 2013] 127.0.0.1:56332 [200]: /
4

3 回答 3

1

我认为您还需要在指南针选项中包含sassDir和：cssDir

compass: {
  options: {  
    config: 'config.rb',
    sassDir: 'path/to/source/sass',
    cssDir: 'path/to/public/css'
  }
}

我不确定，因为您的所有配置config.rb都没有包含在其中！;)

编辑

您将其包含在您的文件中config.rb，所以我不确定现在发生了什么。也许尝试将此任务注册为调试方法：

grunt.registerTask('debug', 'debug logging', function() {
  grunt.log.writeln('scss watch triggered');
});

然后更改该tasks: ['compass']行以启动'debug'任务。然后更改一个 SCSS 文件，看看它是否触发了任务。如果不是，那一定是你的php:watch配置有问题？

编辑 2

你目前没有watch任务，只有一个php:watch任务。watch是实际通过 进行监视的任务grunt-watch-contrib，那么您还可以php:watch使用已有的行触发任务：grunt.registerTask('phpwatch', ['php:watch', 'watch']);

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    compass: {
      options: {
        config: 'config.rb',
      }
    },
    php: {
      options: {
        port: 8000,
        keepalive: true,
        open: true,
        base: 'public_html/',
        hostname: 'localhost'
      },
      watch: {
        options: {
        livereload: 8000
      }
    }
    watch:{
      scss: {
        files: '**/*.scss',
        tasks: ['compass'],
        options: {
          livereload: false
        }
      },
      css: {
        files: '**/*.css',
        tasks: [],
        options: {
          livereload: 8000
        }
      }
    }
  }
});
}

PS可能有额外的或丢失}的——这让我在数数时头晕目眩！

于 2013-11-04T10:55:49.317 回答
0

尽量不要使用该keepalive选项。它对我有用。

于 2014-04-23T21:20:39.690 回答
0

似乎当 grunt-php 运行时，它会阻止加载其他监视任务，因为它与keepalive: true. 相反，我在那里放了 grunt-concurrent 以同时运行 php 和观看 scss/css。

module.exports = function(grunt) {
        grunt.initConfig({
                pkg: grunt.file.readJSON('package.json'),
                compass: {
                        options: {
                                config: 'config.rb',
                        }
                },
                php: {
                      options: {
                        port: 8000,
                        keepalive: true,
                        open: true,
                        base: 'public_html/',
                        hostname: 'localhost'
                      },
                      watch: {
                        options: {
                                livereload: 8000
                        }
                      }
                },
                watch: {
                        scss: {
                                files: '**/*.scss',
                                tasks: ['compass'],
                                options: {
                                        livereload: false
                                }
                        },
                        css: {
                                files: '**/*.css',
                                tasks: [],
                                options: {
                                        livereload: 8000
                                }
                        }
                },
                concurrent: {
                        target: {
                                tasks: ['php:watch', 'watch'],
                                options: {
                                        logConcurrentOutput: true
                                }
                        }
                }
        });
        grunt.loadNpmTasks('grunt-contrib-compass');
        grunt.loadNpmTasks('grunt-php');
        grunt.loadNpmTasks('grunt-contrib-watch');
        grunt.loadNpmTasks('grunt-concurrent');
        grunt.registerTask('default', ['concurrent:target']);
}
于 2013-11-04T19:00:25.893 回答