Grunt - 運行php並觀看SCSS/CSS

我正在嘗試使用Grunt視圖運行php web服務器，SCSS/CSS更改正在觀看並重新編譯，因爲它們被更改並且實時重新加載到Web服務器中。目前它正在運行Web服務並顯示請求，但是當我修改並保存一個SCSS文件時，根本不會重新編譯CSS文件。Grunt - 運行php並觀看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']); 
    }

下面是輸出當我運行「咕嚕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]:/

來源

2013-11-04 Adam Johnson

你可以分享你的'config.rb'的內容嗎？ –

我想你也需要包括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配置的問題？

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

附：有可能是一個額外的或缺少的} - 這讓我頭暈目眩！

來源

2013-11-04 10:55:49

這一切都在config.rb中處理，sass在PHP數組之外編譯時很好地獨立編譯，它只是在那裏添加PHP而沒有編譯。 –

嘗試我添加的調試方法 –

控制檯SCSS文件更新時仍然沒有任何東西出現。這就像它沒有看到文件 –

似乎當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-04 19:00:25

請嘗試不要使用keepalive選項。它爲我工作。

來源

2014-04-23 21:20:39

Grunt - 運行php並觀看SCSS/CSS

回答

相關問題