Grunt livereload with wordpress [英] Grunt livereload with wordpress

问题描述

grunt livereload with wordpress

大家好

我试着用我的wordpress主题开发。

在'serve'任务和livereload中，一切似乎都很好。

主题文件夹我有gruntfile.js和package.json和dev-theme文件夹
$ b

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 
} 
} 
} 
}，
 
 //实际的grunt服务器设置
 connect：{
 options：{
 port：35729，
 livereload：35729，
 //将其更改为' 0.0.0.0'从外部访问服务器
 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（'server`任务已被弃用，使用`grunt serve`启动服务器。 '）; 
 grunt.task.run（['serve']）; 
}）; 'b'b 
} 
  

'serve'任务打开一个浏览器窗口， 't显示主题，但在dev-theme文件夹中显示一个文件列表。

解决方案

由于服务生成了一个建立在节点上的HTTP服务器，而不是服务，而是监视，它将监视文件的变化并触发livereload。

您应该有适合您的wordpress运行的灯管栈，并且只能使用grunt来生成/处理资产

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.

解决方案

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

这篇关于Grunt livereload with wordpress的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！