2014-03-19 2 views
2

grunt-browserify를 사용하여 클라이언트에 고유 한 JS를 제공하기 전에 서버 측에서 처리해야합니다.Grunt Browserify - 두 라이브러리로드 사이에서 스크립트 실행

here이 노출 된 것처럼 심의 라이브러리를로드하고 "vendor.js"에 모두 넣고 내 응용 프로그램의 JS를로드하고 필요한 것을 실행 한 다음 결과를 "app.js"에 넣고 싶습니다. 그런 다음 클라이언트의 "main.js"파일에서 concat을 사용하여 연결하십시오.

문제점은 jquery, jquery mobile 및 backbone을 사용하고 있다는 것입니다. jqm과 백본을 함께 사용할 수있게하려면 jqm lib를로드하기 전에 jqm 라우터를 비활성화해야합니다. 간단한 스크립트 태그를 사용하여 나는 jQuery를로드 한 다음 jQM 라우터를 사용할 수 없도록 설정 한 다음 jQM을로드 한 다음 백본을로드했습니다.

이제 browserify가 같은 순서로 스크립트를로드하는 방법을 모르겠습니다. 여기

browserify: { 
    vendor: { 
    src: ['client/lib/**.js'], 
    dest: 'client/build/vendor.js', 
    options: { 
     shim: { 
     jquery: { 
      path: 'client/lib/jquery-1.11.0.js', 
      exports: '$' 
     }, 
     'jquery.mobile.config': { 
      path: 'client/lib/jquery.mobile-config.js', 
      exports: null, 
      depends: { 
      jquery: '$' 
      } 
     }, 
     'jquery.mobile': { 
      path: 'client/lib/jquery.mobile-1.4.2.js', 
      exports: 'jqm', 
      depends: { 
      jquery: '$', 
      'jquery.mobile.config' : 'jquery.mobile.config' 
      } 
     }, 
     underscore: { 
      path: 'client/lib/underscore.js', 
      exports: '_' 
     }, 
     backbone: { 
      path: 'client/lib/backbone.js', 
      exports: 'Backbone', 
      depends: { 
      underscore: 'underscore' 
      } 
     } 
     } 
    } 
    }, 
    app: { 
    files: { 
     'client/app/**.js': ['client/build/app.js'] 
    } 
    } 
}, 

그리고 jquery.mobile.config 스크립트입니다 : 여기 내 gruntfile (browserify 부분)는 한마디로

$(document).bind("mobileinit", function() { 
$.mobile.ajaxEnabled = false; 
$.mobile.linkBindingEnabled = false; 
$.mobile.hashListeningEnabled = false; 
$.mobile.pushStateEnabled = false; 

    // Remove page from DOM when it's being replaced 
    $('div[data-role="page"]').on('pagehide', function (event, ui) { 
     $(event.currentTarget).remove(); 
    }); 
}); 

, 나는 그렇게하려고 : Backbone + JQuery Mobile + RequireJS 대신 꿀꿀 - browserify와 of requirejs

답변

0

jquery-mobile의 시작 부분에 jqm conf 스크립트를 연결하여 브라우저 화하기 전에 구성된 해킹 된 솔루션을 발견했습니다.

concat: { 
    test: { 
    options: { 
     separator: ';' 
    }, 
    src : ['client/lib/jqm/jquery.mobile-config.js', 'client/lib/jqm/jquery.mobile-1.4.2.js'], 
    dest: 'client/lib/jquery.mobile-1.4.2.configured.js' 
    } 

... 

browserify: { 
    lib: { 
    src: ['client/lib/*.js'], 
    dest: 'client/build/temp/lib.js', 
    options: { 
     shim: { 
     jquery: { 
      path: 'client/lib/jquery-1.11.0.js', 
      exports: '$' 
     }, 
     'jquery.mobile': { 
      path: 'client/lib/jquery.mobile-1.4.2.configured.js', 
      exports: '$', 
      depends: { 
      jquery: '$' 
      } 
     }, 
     underscore: { 
      path: 'client/lib/underscore.js', 
      exports: '_' 
     }, 
     backbone: { 
      path: 'client/lib/backbone.js', 
      exports: 'Backbone', 
      depends: { 
      jquery: '$', 
      underscore: '_' 
      } 

이 방법을 사용하면 라이브러리가 직접 수정되는 것을 피할 수 있지만 매우 고의적입니다. 누군가가 더 좋은 것을 얻는다면 그것은 좋을 것입니다.

관련 문제