gruntjs - 本地主机上的 Grunt Livereload 以 WAMP/XAMPP/UniServerZ 启动

Question

我正在尝试通过 Grunt 任务将我的前端工作流程提升一步。

我在 Gruntfile.js 中设置了几个任务。目前只有 grunt-contrib-sass 和 grunt-contrib-watch，因此每当我更改 .sass 文件时，.css 文件都会自动重新编译。

我想要实现的目标如下:

我想添加一个任务来监听由 UniServerZ/XAMPP/WAMP 或任何其他提供商启动的本地服务器。我想在每次编辑服务器基本目录中的任何文件时触发重新加载。

我知道设置这样的任务非常容易，例如'grunt-express' 会为您启动本地服务器，但我真的想听听以 UniServerZ/XAMPP/WAMP 启动的服务器。

如果可以实现的话，我将很高兴看到这种场景的示例配置。

Answer 1

以下是我在 Windows 7 上使用 Wamp 2.2 的方法。

首先，您需要grunt-contrib-watch使用 livereload 正确设置。我也用grunt-sass而不是grunt-contrib-sass ，因为 grunt-sass 使用 Libsass 。 LibSass 是 Sass 引擎的 C/C++ 端口，而且速度更快。

要安装它们，请使用以下命令:

npm install grunt-contrib-watch --save-dev
npm install grunt-sass --save-dev

这是 Gruntfile 的示例:

module.exports = function(grunt) {

    grunt.initConfig({
        watch: {
            sass: {
                files: 'folder/to/your/sass/**/*.sass',
                tasks: ['sass:dist'],
                options: {
                    livereload: true,
                },
            },
            //Watch your theme files
            livereload: {
                files: ['pathToTheme/*.php', 'pathToTheme/img/**/*.{png,jpg,jpeg,gif,webp,svg}'],
                options: {
                    livereload: true
                },
            }
        },
        sass: {
            options: {
                includePaths: ['where/to/find/additional/@import/scss/files'],
                outputStyle: 'nested',
                imagePath: 'how/to/rewrite/image/path',
                sourceMap: true
            },
            dist: {
                files: {
                    'output/file.css': 'input/file.scss'
                }
            }
        },
    });

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

    // Load NpmTask
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-sass');

};

您可以使用load-grunt-tasks来节省一些时间。 ，并删除手动加载任务:

require('load-grunt-tasks')(grunt); // npm install --save-dev load-grunt-tasks

然后我使用livereload plugin for firefox (or chrome or safari) .

启动 grunt watch 任务，在本地主机上打开您的站点，然后单击浏览器中的图标。现在，如果您编辑监视的文件，页面应该相应更新。

A solution exist自动在 WordPress 中添加 livereload js(在 function.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');
}