Grunt livereload with wordpress

Question

Grunt livereload with wordpress

Hi all

I'm trying to use grunt with my wordpress theme development.

Everything seems to be working fine about from the 'serve' task and the livereload.

In the themes folder I have the gruntfile.js and package.json and dev-theme folder

The dev-theme folder contains the theme files.

I'm using the gruntfile below and in the functions.php I have the following

  if (in_array($_SERVER['REMOTE_ADDR'], array('127.0.0.1', '::1'))) {
    wp_register_script('livereload', 'http://localhost:35729/livereload.js?snipver=1', null, false, true);
    wp_enqueue_script('livereload');
  }

=

  'use strict';

  module.exports = function(grunt){

    require('load-grunt-tasks')(grunt);

    grunt.initConfig({

        pkg: grunt.file.readJSON('package.json'),

        yeoman:{
            dev: 'dev-theme',
            dist: 'dist-theme'
        },

        sass:{
            dist:{
                files:{
                    'dev-theme/css/styles.css' : 'dev-theme/css/scss/styles.scss'
                }
            }
        },

        watch:{
            css:{
                files: '**/*.scss',
                tasks: ['sass'],
                options: {
                    livereload:{
                        port: 35729
                    }
                }
            }
        },

        // The actual grunt server settings
      connect: {
          options: {
              port: 35729,
              livereload: 35729,
              // Change this to '0.0.0.0' to access the server from outside
              hostname: 'localhost',
          },
          livereload: {
              options: {
                  open: true,
                  base: [
                      '.tmp',
                      'test',
                      '<%= yeoman.dev %>'
                  ]
              }
          }
      }

    });

    grunt.registerTask('default', ['watch']);

    grunt.registerTask('serve', function (target) {

        if (target === 'build') {
            return grunt.task.run(['build', 'connect:dist:keepalive']);
        }

        grunt.task.run([
            'connect:livereload',
            'watch',
                    'build'
        ]);
    });

    grunt.registerTask('server', function () {
        grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
        grunt.task.run(['serve']);
    });

  }

The 'serve' task opens a browser window but it doesn't display the theme but displays a a list of the files in the dev-theme folder.

Answer 1

it is normal, you should not 'serve' with grunt since serve spawn a http server built on node, but rather 'watch' that will watch files for changes and trigger the livereload.

you should have your proper lamp stack for your wordpress running and use grunt only to generate/process assets