我正在尝试使用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]: /
我认为您还需要在指南针选项中包含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
}
}
}
}
});
}
附言可能有一个额外的或丢失的}
- 这让我头晕目眩地试图数数!
似乎当 grunt-php 运行时,它会阻止加载其他监视任务,因为它与 keepalive: true
一起持续运行。相反,我在那里放了grunt-current,以同时运行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']);
}
尽量不要使用 keepalive
选项。它对我有用。