방법 <code>index.html</code></p> <pre><code><script src="js/api/require.js"></script> <script>require(['js/require-cfg'],function(){require(['main'])});</script> </code></pre> <p><code>main.js</code>에서 빌드

Question

나는 다음과 같은 코드를 사용하여 노드 백본을 실행하는거야 자동으로 스크립트 태그의 URL을 변경하려면 다음과 같습니다

생산에서

require(['app'], 
    function(App){ 
    App.initialize(); 
    } 
); 

, 나는 컴파일 r.js을 main-build.js에 입력하고 파일의 링크를 mainmain-build : 내가 생산에 내 코드를 배포 할 경우

<script>require(['js/require-cfg'],function(){require(['main-build'])});</script> 

현재, 나는 수동 index.html에 main-build에 main에서 변경하거나 main-build로 링크를 유지하지만,에 main-build.js의 내용을 변경해야 로컬 또는 테스트 환경을 실행할 때 main.js과 같고 프로덕션 환경으로 배포 할 때 다시 전환하십시오.

코드가 때 생산에 컴파일 된 main-build.js를 사용하는 데 더 나은 (자동) 방법, 지역별 또는 테스트 환경에서 main.js 때의 내용이 있습니까?

예 : index.html의 링크를 (! HTML을 변경하는 방법을 잘하지) 변경하거나 main-build.js의 내용을 변경할 수 있지만 매번 r.js을 덮어 쓰기됩니다 콘텐츠를 생산을 위해 컴파일 실행하는 두 노드 환경 변수를 사용하여

Answer 1

파일을 처리하려면 Gulp을 개인적으로 사용하십시오 (gulp-html-replace).

개발 중에 필요한 태그를 넣습니다.

var gulp = require('gulp'), 
    htmlreplace = require('gulp-html-replace'); 

gulp.task('build', function() { 

    return gulp.src("index.html") 
     .pipe(htmlreplace({ 
      js: { 
       src: [['main-build']], 
       tpl: '<script>require(["js/require-cfg"],function(){require(["%s"])});</script>' 
      }, 
     })) 
     .pipe(gulp.dest("build/index.html")); 
}); 

---

당신이 꿀꺽의 경로를 이동하는 경우, 당신은 할 수 있습니다 :

<script src="js/api/require.js"></script> 
<!-- build:js --> 
<script>require(['js/require-cfg'],function(){require(['main'])});</script> 
<!-- endbuild --> 

는 플러그인을 꿀꺽-HTML-교체, 생산 빌드를 만들어 사용하는 꿀꺽 작업을 만들려면 그것을 통해 모든 빌드 프로세스. 예를 들어 간단한 r.js 작업은 다음과 같습니다.

var rjs = require('requirejs'); 

gulp.task('optimize', function(done) { 
    rjs.optimize({ 
     name: "main", 
     out: "build/js/main.min.js", 
     /* ...other options */ 
    }, function(buildResponse) { 
     done(); 
    }, done); 
});