Grunt在服務器上觀看LiveReload網站

我正在開發一個服務器上的WordPress網站（不是本地）。當我修改一個sass文件時，我想在瀏覽器中刷新頁面。我列出了一些煩人的任務，但現在我只想讓它在任何sass修改時刷新。現在，只要文件被修改，它就會捕獲，但不會刷新頁面。Grunt在服務器上觀看LiveReload網站

Gruntfile：

module.exports = function(grunt) { 
 

 
\t // Project configuration. 
 
\t grunt.initConfig({ 
 
\t \t pkg: grunt.file.readJSON('package.json'), 
 
\t \t 
 
\t \t watch: { 
 
\t \t \t scripts: { 
 
\t \t \t \t options: { livereload: true }, 
 
\t \t \t \t files: ['**/*.scss'], 
 
\t \t \t \t //tasks: ['criticalcss:front', 'criticalcss:page', 'cssmin', 'postcss'], 
 
\t \t \t } 
 
\t \t }, 
 
\t \t 
 
\t \t postcss: { 
 
\t \t \t options: { 
 
\t \t \t \t processors: [ 
 
\t \t \t \t \t require('autoprefixer')({browsers: 'last 6 versions'}), // add vendor prefixes 
 
\t \t \t \t \t //require('cssnano')() // minify the result 
 
\t \t \t \t ] 
 
\t \t \t }, 
 
\t \t \t dist: { 
 
\t \t \t \t src: 'style.css', 
 
\t \t \t \t dest: 'style.css' 
 
\t \t \t } 
 
\t \t }, 
 
\t 
 
\t \t criticalcss: { 
 
\t \t \t front : { 
 
\t \t \t \t options: { 
 
\t \t \t \t \t url: "https://grandeurflooring.ca/grand_dev/", 
 
\t \t \t \t \t minify: true, 
 
\t \t \t \t \t width: 1500, 
 
\t \t \t \t \t height: 900, 
 
\t \t \t \t \t outputfile: "critical_css/critical-front.css", 
 
\t \t \t \t \t filename: "style.css", 
 
\t \t \t \t \t buffer: 800*1024, 
 
\t \t \t \t \t ignoreConsole: true 
 
\t \t \t \t } 
 
\t \t \t }, 
 
\t \t \t page : { 
 
\t \t \t \t options: { 
 
\t \t \t \t \t url: "https://grandeurflooring.ca/grand_dev/sample-page/", 
 
\t \t \t \t \t minify: true, 
 
\t \t \t \t \t width: 1500, 
 
\t \t \t \t \t height: 900, 
 
\t \t \t \t \t outputfile: "critical_css/critical-page.css", 
 
\t \t \t \t \t filename: "style.css", 
 
\t \t \t \t \t buffer: 800*1024, 
 
\t \t \t \t \t ignoreConsole: true 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t }, 
 
\t \t 
 
\t \t cssmin: { 
 
\t \t \t target: { 
 
\t \t \t \t files: [{ 
 
\t \t \t \t expand: true, 
 
\t \t \t \t cwd: 'critical_css', 
 
\t \t \t \t src: ['*.css', '!*.min.css'], 
 
\t \t \t \t dest: 'critical_css', 
 
\t \t \t \t ext: '.min.css' 
 
\t \t \t \t }] 
 
\t \t \t } 
 
\t \t } 
 

 
\t }); 
 

 
\t // Load the plugin that provides the "critical" task. 
 
\t grunt.loadNpmTasks('grunt-criticalcss'); 
 
\t // Load the plugin that provides the "cssmin" task. 
 
\t grunt.loadNpmTasks('grunt-contrib-cssmin'); 
 
\t // Load the plugin that provides the "watch" task. 
 
\t grunt.loadNpmTasks('grunt-contrib-watch'); 
 
\t // Load the plugin that provides the "PostCSS" task. 
 
\t grunt.loadNpmTasks('grunt-postcss'); 
 

 
\t // Critical task. 
 
\t grunt.registerTask('critical', ['criticalcss:front']); 
 

 
};

在footer.php，wp_footer（）之前，我把劇本：

<script src="http://localhost:35729/livereload.js"></script>

來源

2017-05-05 Jordan Carter

如果要將消息推送到瀏覽器並使其重新加載頁面，則需要使用websocket或服務器發送的事件。或者您可以使用AJAX進行投票。但我建議不要添加強制頁面重新加載的代碼。當您的網站在線時，您仍然希望刪除代碼。 –

雖然我正在服務器上開發，所以我希望啓動並運行，即使這意味着稍後再刪除代碼。如果你碰巧知道如何做到這一點的實施，它的工作原理，你會介意發佈一個答案？ –

您可以配置咕嚕觀看編譯CSS文件在您的dist目錄中，每次重新編譯Sass時都會更新它。

這裏是我的watch配置，它達到你想要什麼：

watch: { 
    options: { 
    livereload: true, 
    }, 
    html: { 
    files: ['index.html'], 
    }, 
    js: { 
    files: ['js/**/*.js'], 
    tasks: ['jshint'], 
    }, 
    sass: { 
    options: { 
     livereload: false 
    }, 
    files: ['css/scss/**/*.scss'], 
    tasks: ['sass'], 
    }, 
    css: { 
    files: ['dist/css/master.css'], 
    tasks: [] 
    } 
}

您可能需要根據您的設置，以及改變spawn: false到spawn: true。

編輯：此外，您可以使用grunt-contrib-watch插件，它允許你：每當看着文件模式添加，更改或刪除

運行預定義任務，這個插件包含了許多用於實時重新加載，觀看等的附加選項，您可能會發現它們很有用。

來源

2017-05-15 20:00:55 lax1089

在服務器上開發時，這是否適合您？另外，我討厭問，但是你知道在服務器開發中是否有類似的gulp插件允許這樣嗎？我剛開始喝酒，到目前爲止我很喜歡它。 –

是的，這對我在服務器上開發時適用。我已經更新了我的答案，以包含您可能更喜歡使用的插件。 – lax1089

Grunt在服務器上觀看LiveReload網站

回答

相關問題