Grunt livereload with wordpress

[tttmt]

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 this grunt file

'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 <code>server</code> task has been deprecated. Use <code>grunt serve</code> to start a server.');
        grunt.task.run(['serve']);
    });

  }

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

[shaneisme]

Since I don’t like to assume anything, I’ll ask… do you have a localhost PHP server up and running and can see your WordPress installation running there?

[tttmt]

Yes I have MAMP running. If I start MAMP and put this wordpress folder in the MAMP root folder I can see the site at localhost in the browser. I’m still confused if I still need MAMP running or if I can have my wordpress folder on the desktop and open the server from there.

[shaneisme]

If that’s the case, I’m not 100% sure you can do it as-is. The task you have set up is trying to set up a localhost server on top of the MAMP server, likely the cause of your problems.

I’ve been using Gulp for a while, so I’m not sure about Grunt, but I’m sure there’s a livereload by itself that can work with MAMP – might have to do some digging.

All that said, I’m not 100% sure I’m correct, so just realize I’m making an educated guess.

[Author]

Posts