Grunt Watch LiveReload sur le site sur le serveur

Question

Je développe un site WordPress sur un serveur (pas local). Je veux actualiser la page dans mon navigateur chaque fois que je modifie un fichier sass. J'ai quelques tâches grunt énumérées, mais maintenant je veux juste qu'il se rafraîchir sur toute modification de sass. À l'heure actuelle, il attrape chaque fois qu'un fichier est modifié, mais il n'actualise pas la page.

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']); 
 

 
};

En footer.php, avant wp_footer(), je mets le script:

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

Answer 1

Vous pouvez configurer Grunt pour regarder le compilé css fichier dans votre répertoire dist, qui serait mis à jour chaque fois que le Sass est recompilé.

Voici ma configuration watch qui réalise ce que vous voulez:

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: [] 
    } 
} 

Vous devrez peut-être changer spawn: false-spawn: true en fonction de votre configuration ainsi.

EDIT: De plus, vous pouvez utiliser le plugin grunt-contrib-watch qui vous permet de:

exécuter des tâches prédéfinies à chaque fois sont ajoutés des modèles de fichiers surveillés, modifiés ou supprimés

Ce plugin contient de nombreuses des options supplémentaires pour recharger en direct, regarder, etc., que vous pourriez trouver utiles.