Shopify livereload grunt

Question

是否有人Shopify LiveReload为工作流程开发工作以使用grunt？请记住，在查看开发的实时预览时，它不会存储在本地，而是通过shopify的自定义网址存储。

如果有人知道如何让livereload参与shopify，我会非常感激。

提前致谢。

我的Gruntfile：

'use strict';

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to match all subfolders:
// 'test/spec/**/*.js'

module.exports = function (grunt) {
    // load all grunt tasks
    require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);

    // configurable paths
    var yeomanConfig = {
        app: '.',
        dist: 'fahey-rodriguez4877-7509645'
    };

    grunt.initConfig({
        yeoman: yeomanConfig,
        watch: {
            compass: {
                files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
                tasks: ['compass:live'],
                options: {
                    livereload: true
                }
            },
            css: {
                files: ['.tmp/styles/*.css'],
                tasks: ['cssmin'],
                options: {
                    livereload: true
                }
            },
            js: {
                files: ['<%= yeoman.app %>/scripts/*.js'],
                tasks: ['concat:live'],
                options: {
                    livereload: true
                }
            },
            update: {
                files: ['<%= yeoman.app %>/{layout,templates,snippets}/*.liquid'],
                tasks: ['sync'],
                options: {
                    livereload: true
                }
            },
            config: {
                files: ['<%= yeoman.app %>/config/*.{html,json}'],
                tasks: ['copy']
            },
        },
        clean: {
            dist: [
                '.tmp',
                '<%= yeoman.dist %>/*'
            ]
        },
        jshint: {
            options: {
                jshintrc: '.jshintrc'
            },
            all: [
                'Gruntfile.js',
                '<%= yeoman.app %>/scripts/{,*/}*.js'
            ]
        },
        compass: {
            options: {
                sassDir: '<%= yeoman.app %>/styles',
                cssDir: '.tmp/styles',
                imagesDir: '<%= yeoman.app %>/assets',
                javascriptsDir: '<%= yeoman.app %>/scripts',
                fontsDir: '<%= yeoman.app %>/assets',
                importPath: 'components',
                relativeAssets: true
            },
            dist: {},
            live: {
                options: {
                    debugInfo: true,
                }
            }
        },
        uglify: {
            dist: {
                files: {
                    '<%= yeoman.dist %>/assets/custom.modernizr.js': [
                        '<%= yeoman.app %>/components/foundation/js/vendor/custom.modernizr.js'
                    ],
                    '<%= yeoman.dist %>/assets/main.js': [
                        '<%= yeoman.app %>/components/foundation/js/vendor/jquery.js',
                        '<%= yeoman.app %>/components/foundation/js/foundation/foundation.js',
                        '<%= yeoman.app %>/components/foundation/js/foundation/foundation.*.js',
                        '<%= yeoman.app %>/scripts/{,*/}*.js'
                    ],
                }
            },
        },
        concat: {
            live: {
                files: {
                    '<%= yeoman.dist %>/assets/custom.modernizr.js': [
                        '<%= yeoman.app %>/components/foundation/js/vendor/custom.modernizr.js'
                    ],
                    '<%= yeoman.dist %>/assets/main.js': [
                        '<%= yeoman.app %>/components/foundation/js/vendor/jquery.js',
                        '<%= yeoman.app %>/components/foundation/js/foundation/foundation.js',
                        '<%= yeoman.app %>/components/foundation/js/foundation/foundation.*.js',
                        '<%= yeoman.app %>/scripts/{,*/}*.js'
                    ],
                }
            }
        },
        imagemin: {
            dist: {
                files: [{
                    expand: true,
                    cwd: '<%= yeoman.app %>/assets',
                    src: '{,*/}*.{png,jpg,jpeg}',
                    dest: '<%= yeoman.dist %>/assets'
                }]
            }
        },
        cssmin: {
            dist: {
                files: {
                    '<%= yeoman.dist %>/assets/main.css': [
                        '.tmp/styles/{,*/}*.css',
                        '<%= yeoman.app %>/styles/{,*/}*.css'
                    ]
                }
            }
        },
        sync: {
            main: {
                files: [{
                  cwd: '<%= yeoman.app %>',
                  src: [
                            'assets/*',
                            'config/*',
                            'layout/*',
                            'snippets/*',
                            'templates/*',
                        ],
                  dest: '<%= yeoman.dist %>',
                }]
            }
        },
        copy: {
            dist: {
                files: [{
                    expand: true,
                    dot: true,
                    cwd: '<%= yeoman.app %>',
                    dest: '<%= yeoman.dist %>',
                    src: [
                        'assets/*',
                        'config/*',
                        'layout/*',
                        'snippets/*',
                        'templates/*',
                    ]
                },{
                    expand: true,
                    cwd: '<%= yeoman.app %>/components/font-awesome/font',
                    dest: '<%= yeoman.dist %>/assets',
                    src: [
                        '*'
                    ]
                }]
            },
        }
    });

    grunt.renameTask('regarde', 'watch');

    grunt.registerTask('live', [
        'clean:dist',
        'compass:live',
        'cssmin',
        'concat:live',
        'copy',
        'watch'
    ]);

    grunt.registerTask('build', [
        'clean:dist',
        'compass:dist',
        'cssmin',
        'imagemin',
        'uglify',
        'copy'
    ]);

    grunt.registerTask('default', [
        'jshint',
        'build'
    ]);
};

Answer 1

嘿，这对我的所有项目都使用LiveReload也很棒，但我认为它真的适用于本地Web开发服务器而不是实时服务器，或者在这种情况下shopify并不能给你在这方面任何类型的服务器级别控制。

但是，有这个很棒的grunt task！

它本质上在本地编辑文件时观察任何文件更改，然后自动将它们上传到相应的shopify商店/主题，我根本没有任何问题，这是一个巨大的节省时间。

希望有所帮助：）