运行php并观看SCSS/CSS

Question

我正在尝试使用Grunt视图，运行一个php web服务器，当SCSS/CSS更改被更改并实时重新加载到web服务器时，SCSS/CSS更改将被监视和重新编译。目前它正在运行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 -详细“时，如果这有助于调试，下面是输出：

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]: /

Answer 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实际执行监视的任务，然后还可以使用您已经拥有的行：grunt.registerTask('phpwatch', ['php:watch', 'watch']);来触发php: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
        }
      }
    }
  }
});
}

P.S.在那里可能是多了一个或少了一个} --它让我头晕，想数数！

Answer 2

看起来，当grunt-php运行时，它会阻止其他监视任务作为其持续运行的keepalive: true加载。相反，我把grunt-并发放在那里，同时运行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']);
}

Answer 3

不要使用keepalive选项。对我来说很管用。