2014-04-01 64 views
1

有没有人得到ShopifyLiveReload他们的工作流程开发工作与grunt?请注意,在查看开发的实时预览时,它不是本地存储的,而是通过shopify的自定义网址进行的。Shopify livereload grunt

如果有人知道如何让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' 
    ]); 
}; 

回答

0

嘿,这将是真棒,太,因为我用LiveReload为我所有的项目,但我认为这是真正为本地web开发服务器,而不是活的服务器,或者在这种情况下shopify这在这方面没有给你任何类型的服务器级别控制。

但是,有这个真棒grunt task

它本质上是在本地编辑文件时监视任何文件变化,然后自动将它们上传到各自的shopify商店/主题,我根本没有任何问题,它是一个巨大的节省时间。

希望能帮到:)