Grunt - 运行php并观看SCSS / CSS

时间:2013-11-04 10:38:19

标签: php gruntjs grunt-contrib-watch grunt-contrib-compass

我正在尝试使用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]: /

3 个答案:

答案 0 :(得分:1)

我认为您还需要在指南针选项中加入sassDircssDir

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
        }
      }
    }
  }
});
}

P.S。可能会有额外的或遗失的} - 这让我头晕目眩!

答案 1 :(得分: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']);
}

答案 2 :(得分:0)

请尝试不要使用keepalive选项。它对我有用。