Grunt - 启动并运行 livereload 的服务器答案

【问题标题】：Grunt - get server with livereload up and runningGrunt - 启动并运行 livereload 的服务器
【发布时间】：2014-07-21 16:20:52
【问题描述】：

我已经盯着我的 grunt 配置看了几个小时，似乎无法启动和运行。

我的文件正在我期望的位置构建（基本上就在它们所在的位置，除了把手之外），但我真的很难让自动刷新服务器启动并运行。无法完全启动和运行。

如果有人能指出我正确的方向，那将是一个巨大的帮助！

module.exports = function(grunt) {

    grunt.initConfig({

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

        sass: {
            files: {
                'assets/css/style.css' : 'assets/css/*.scss'
            }       
        },
        assemble: {
            options: {
                flatten: true,
                assets: 'assets',
                layout: 'templates/layouts/main.hbs'
            },
            pages: {
                src: ['templates/*.hbs'],
                dest: '.'
            }
        },
        watch: {
            all: {
                files: '**/*.hbs',
                tasks: ['assemble'],
                options: {
                    livereload: true,
                }
            },
            css: {
                files: 'assets/css/*.scss',
                tasks: ['sass']
            },
            scripts: {
                files: 'assets/js/*.js',
            },
            livereload: {
                options : { livereload: true },
                files: ['/']
            }
        },
        connect: {
            options: {
                port: 9001,
                livereload: 35729,
                hostname: '0.0.0.0',
                keepalive: true,
                open: true
            }
        }
    });

    grunt.loadNpmTasks('assemble');
    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-open');

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

【问题讨论】：

你是下载 LiveReload 还是安装了 chrome 扩展？
安装了 chrome 扩展。我已经将它与我没有设置的其他 grunt 构建一起使用，但这是我自己从头开始编写的第一个 grunt 存档。
I've got a repo that uses livereload - 欢迎您来看看。它使用load-grunt-config 将配置文件拆分成更小的部分（在 grunt 文件夹中）；您应该查看的文件是Gruntfile.js、grunt/connect.js 和grunt/watch.js。您还需要节点模块connect-livereload 以及grunt-config-connect。我花了很长时间才弄清楚如何把它们放在一起，所以我理解你的痛苦。
我会看看那个谢谢。我一直在寻找很多回购的提示，我想我现在对它视而不见。这是一个开放式的工具，给咕噜猫换皮的方法有很多，很难找到一个完全适合我正在使用的设置的 sn-p！

标签： javascript gruntjs grunt-contrib-connect

【解决方案1】：

这是我在朋友的帮助下设法完成的工作 - 使用了一些过时的模块。希望它对某人有用！

module.exports = function(grunt) {

grunt.initConfig({
    sass: {
        all: {
            files: {
                'assets/css/style.css' : 'assets/css/main.scss'
            }   
        }
    },
    assemble: {
        options: {
            flatten: true,
            assets: 'assets',
            layout: 'templates/layouts/main.hbs'
        },
        pages: {
            src: ['templates/*.hbs'],
            dest: '.'
        }
    },
    watch: {
        assemble: {
            files: 'templates/**/*.hbs',
            tasks: ['assemble']
        },
        sass: {
            files: 'assets/css/*.scss',
            tasks: ['sass']
        },
        css: {
            files:['assets/css/*.css']
        },
        scripts: {
            files: 'assets/js/*.js',
        },
        livereload: {
            options : { livereload: true },
            files: ['*.html','assets/css/*.css','assets/js/*.js']
        }
    },
    connect: {
        options: {
            port: 9001,
            livereload: true,
            hostname: '0.0.0.0'
        },
        livereload: {
            options: {
                open: true,
                base: ['.']
            }
        }
    }
});

grunt.loadNpmTasks('assemble');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');

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

}

【讨论】：