Gulp Env 및 Preprocess

Grunt에서 나는 env이라는 플러그인을 사용했습니다. 그러면 특정 빌드 환경을 정의 할 수 있습니다. 나는 3 개의 빌드를 가지고 있었다. DEV는 개별적으로 분리 된 모든 파일을 사용합니다. PROD는 모든 것을 연결하고 RELEASE는 연결하고 uglify합니다. 나는 꿀꺽 꿀꺽 마시면서 똑같이하려고한다. 나는 꿀벌을위한 전처리 기가 있지만 환경을 정의하는 것은 아무것도 없다.Gulp Env 및 Preprocess

질문과 답변입니다. 내가 무엇을 할 수 있을지? 분명히 모든 JS 파일을 항상 정의하고 싶지 않고 다른 스크립트 태그가있는 3 개의 다른 HTML 페이지를 원하지 않습니다.

<!-- @if NODE_ENV == 'DEVELOPMENT' --> 
<script src="js/example1.js" type="text/javascript"></script> 
<script src="js/example2.js" type="text/javascript"></script> 
<script src="js/example3.js" type="text/javascript"></script> 
<!-- @endif --> 

<!-- @if NODE_ENV == 'PRODUCTION' --> 
<script src="js/project.js" type="text/javascript"></script> 
<!-- @endif --> 

<!-- @if NODE_ENV == 'RELEASE' --> 
<script src="js/project.min.js" type="text/javascript"></script> 
<!-- @endif -->

그리고 내 툴툴 거리는 소리 플러그인은 다음과 같이 보일 것이다 : 나는 당신이 원하는 무슨 생각을 달성하는 방법

env: { 
    dev: { 
     NODE_ENV: 'DEVELOPMENT' 
    }, 
    prod: { 
     NODE_ENV: 'PRODUCTION' 
    }, 
    release: { 
     NODE_ENV: 'RELEASE' 
    } 
}, 
preprocess: { 
    options: { 
     context: { 
      name: '<%= pkg.outputName %>', 
      version: '<%= pkg.version %>', 
      port: '<%= pkg.port %>' 
     } 
    }, 
    dev: { 
     src: 'index.html', 
     dest: '<%= pkg.outputFolder %>/index.html' 
    }, 
    prod: { 
     src: 'index.html', 
     dest: '<%= pkg.outputFolder %>/index.html' 
    }, 
    release: { 
     src: 'index.html', 
     dest: '<%= pkg.outputFolder %>/index.html' 
    } 
},

출처

2014-04-16 Chester Rivas

가 내 HTML에서

나는 이런 식으로 뭔가를 할 것이다. 전처리 할 html 페이지가 들어있는 폴더를 설정했습니다.

그 폴더 안에는 HTML 조각과 json 파일을 저장하는 각 페이지에 해당하는 폴더가 있습니다.

각 JSON 파일에는 특정 페이지에 대한 페이지 자산을 정의하는 변수가 있습니다.

예를 들어 내 페이지가 index.html이라고 가정 해보십시오. 나도이 pagecss1 정의 여부를 해당 페이지 내 JSON 파일에서

<html> 
    <head> 
     ... Meta stuff title etc ... 
     <!-- @ifdef pagecss1 --> 
     <link href="<!-- @echo pagecss1 -->" rel="stylesheet"> 
     <!-- @endif --> 
     <!-- @ifdef pagecss2 --> 
     <link href="<!-- @echo pagecss2 -->" rel="stylesheet"> 
     <!-- @endif --> 
    </head> 
     /// so on - same stuff with scripts at bottom

: 그것은 다음과 같이 보입니다.

그런 다음 gulp.watch를 사용합니다.

모든 것을 쓰고 싶지는 않지만, 하위 폴더의 파일 중 하나라도 변경되면 함수가 이미 존재하는 전역 컨텍스트 변수를 가로 채고 해당 페이지의 JSON 파일을 읽습니다. 그런 다음 node.util._extend을 사용하여 페이지 특정 변수로 변수를 덮어 씁니다. 그런 다음 변경된 객체를 컨텍스트로 전처리 작업에 전달합니다. 모든 것이 빠르게 밝아지고 livereload가 다시로드 할 페이지를 알 수있는 콜백을 반환합니다.

나는 모바일에 이것을 작성 했으므로 명확하게 편집하기 위해 돌아 왔지만이 수수께끼를 풀면 엄청난 시간과 노력을 절약 할 수있었습니다.

출처

2014-06-06 18:41:43 user1167442

감사를 꿀꺽 - 전처리를 사용하고 물건을 어떻게해야이 간단 해졌습니다 매우. – user1167442

당신은 아마 꿀꺽 데이터 플러그인으로 HTML이 같은 물건 꿀꺽

var preprocess = require('gulp-preprocess'); 
.pipe(preprocess({context: { NODE_ENV: 'PRODUCTION', RELEASE_TAG: '2.6.4', DEBUG: false}}))

이 같은

<!-- @if NODE_ENV='DEVELOPMENT' --> 
    <a href="test?v<!-- @echo RELEASE_TAG -->" /> 
<!-- @endif -->

출처

2014-11-07 17:33:44

답변

관련 문제