컴파일 클라이언트 측 옥 Gulpjs

Question

내가-옥 꿀꺽, 꿀꺽 - CONCAT를, 내가 Gulpjs을 사용하고 하나의 js 파일에 내 모든 .jade 템플릿을 컴파일하기 위해 노력하고있어 ..

를 사용하여 템플릿 내가 얻을 수 있습니다 단일 파일이지만 문제는 거기에 렌더링 된 모든 함수가 동일한 이름을 가지며, 모두 "템플릿"이라고합니다.

foo.jade :

.fooDiv 
    h1 Foo here 

foo2.jade :

.foo2Div 
    h1 Foo2 here 

꿀꺽 파일 :

gulp.src("templates/**/*.jade") 
    .pipe(jade({client: true})) 
    .pipe(concat("templates.js")) 
    .pipe(gulp.dest("../website/templates")) 

것 출력과 같은 파일 :

function template(locals) { 
    var buf = []; 
    var jade_mixins = {}; 

    buf.push("<div class=\"fooDiv\"><h1>Foo here</h1></div>");;return buf.join(""); 
} 
function template(locals) { 
    var buf = []; 
    var jade_mixins = {}; 

    buf.push("<div class=\"foo2Div\"><h1>Foo2 here</h1></div>");;return buf.join(""); 
} 

나는이 작업을 수행 할 수있는 방법이

function foo(locals) { 
    var buf = []; 
    var jade_mixins = {}; 

    buf.push("<div class=\"fooDiv\"><h1>Foo here</h1></div>");;return buf.join(""); 
} 
function foo2(locals) { 
    var buf = []; 
    var jade_mixins = {}; 

    buf.push("<div class=\"foo2Div\"><h1>Foo2 here</h1></div>");;return buf.join(""); 
} 

가있다 : 6,

그리고 내가 원하는 뭔가가있다? 나는 지금 꽤 많은 시간을 찾고 있었고 아무것도 찾지 못했습니다.

건배. 카 이오

편집 :

옥 이제 jade.compileClient의 이름 옵션을 받아들입니다. 여기에서 확인하십시오 : https://github.com/jadejs/jade/blob/master/jade.js

Answer 1

jade.compileClient 하드 코드 function template(locals)이며 기능 이름을 변경할 수있는 옵션이없는 것으로 보입니다. https://github.com/visionmedia/jade/blob/master/lib/jade.js

이것은 약간 해킹되었지만 옥 컴파일 후 컴파일 된 스크립트의 내용을 수정할 수 있습니다. 당신의 옥 템플릿을 여러 하위 디렉토리에있는 경우가 file.path에 따라 같은

var through = require('through2'); 
var path = require('path'); 

function modify() { 
    function transform(file, enc, callback) { 
    if (!file.isBuffer()) { 
     this.push(file); 
     callback(); 
     return; 
    } 
    var funcName = path.basename(file.path, '.js'); 
    var from = 'function template(locals) {'; 
    var to = 'function ' + funcName + '(locals) {'; 
    var contents = file.contents.toString().replace(from, to); 
    file.contents = new Buffer(contents); 
    this.push(file); 
    callback(); 
    } 
    return through.obj(transform); 
} 

gulp.src("templates/**/*.jade") 
    .pipe(jade({client: true})) 
    .pipe(modify()) 
    .pipe(concat("templates.js")) 
    .pipe(gulp.dest("../website/templates")); 

당신은 funcName을 변경할 수 있습니다.

Answer 2

나에게 맞는 우아한 솔루션을 발견했습니다.

은 기본적으로 메인 스크립트 (옥 당신이 .html 파일에서 스크립트를 생성하기 전에로드 한), 당신은, 템플릿의 반환 값() 함수를 개최한다 배열이 var document = [];

말 그런 다음 gulp-insert을 사용하여 '(function() {' 및 ;\n;document.push(template()); })(); 스크립트로 래핑 한 다음 이미 완료 한 스크립트를 연결합니다.

이제 배열을 각각 template()에서 계산 된 값을 호출하여 필요에 따라 불러올 수 있습니다!

var jade = require('gulp-jade'); 
var concat = require('gulp-concat'); 
var insert = require('gulp-insert'); 
gulp.task('jade-to-js', function(){ 
    return gulp.src('src/node/jade/*.jade') 
    .pipe(jade({client: true})) 
    .pipe(insert.wrap('(function() {', '\n;document.push(template()); })();') 
    .pipe(concat('bundle.js')) 
    .pipe(gulp.dest('src/js/')) 
}); 

Answer 3

다음 코드는 내가 매우 도움이 될 것으로 this comment에서 온다 :

여기 내 빌드는 LiveScript를 사용하지만,

는 변환 된 자바 스크립트 버전입니다.

gulp.task('strings', function() { 
    return gulp.src('media/templates/*.jade') 
     .pipe(foreach(function(stream,file){ 
      var filename = path.basename(file.path); 
      filename = filename.split('.')[0] 
      return stream 
       .pipe(jade({ 
        client: true, 
        name: filename 
       })); 
     })) 
     .pipe(concat('all.js')) 
     .pipe(gulp.dest('media/strings/')) 
}); 

당신이 현재 파일의 이름을 가져올를 변경 한 다음 옥에게 전달 할 수 gulp-foreach 사용. 그런 다음 concat과 같은 다른 작업을 정상적으로 수행 할 수 있습니다.