使用 wordpress 进行 Grunt livereload答案

【问题标题】：Grunt livereload with wordpress使用 wordpress 进行 Grunt livereload
【发布时间】：2014-07-29 07:33:16
【问题描述】：

Grunt livereload with wordpress

大家好

我正在尝试在我的 wordpress 主题开发中使用 grunt。

“服务”任务和 livereload 似乎一切正常。

在主题文件夹中，我有 gruntfile.js 和 package.json 以及 dev-theme 文件夹

dev-theme 文件夹包含主题文件。

我正在使用下面的 gruntfile，在 functions.php 中我有以下内容

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

  }

“服务”任务会打开一个浏览器窗口，但它不显示主题，而是显示 dev-theme 文件夹中的文件列表。

【问题讨论】：

标签： wordpress gruntjs

【解决方案1】：

这很正常，你不应该使用 grunt 来“服务”，因为 serve 会生成一个构建在节点上的 http 服务器，而应该使用“监视”来监视文件的更改并触发 livereload。

您应该为您的 wordpress 运行适当的灯堆栈，并仅使用 grunt 来生成/处理资产

【讨论】：