我正在尝试使用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]: /
答案 0 :(得分: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
}
}
}
}
});
}
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
选项。它对我有用。