2014-10-03 3 views
1

지킬 사용을 사용하지 않고 사이트를 전환하려고 시도했습니다. Gulp & Jade; Jekyll은 템플릿 사용의 편리함 때문에 주로 사용되었지만 Jekyll의 실제 사용은 블로그처럼 더 많은 기능이 있습니다. 그것에서 회사 웹 사이트를 개발하지만 dev에 서버를 사용하지 않는 한 watch 같은 것들이 누락되었습니다. Jade의 구문과 npm을 사용하는 장점이 있지만 Jekyll의 Jade 플러그인이 있을지는 몰라도.Gulp & Jade를 사용하는 정적 사이트, 일반 URL

지킬이 지적한 점은 cannoical URL 구조 인 a.g. mydomain.com/about 우리가 라우팅 동적 사이트와 함께 사용하는 데 사용하고 그 (예 mod_rewrite에) 아주 쉽게 디렉토리 구조를 달성 할 수 있습니다 ./about/index.html이 사이트는 그래서 옥으로 이동 내가 원하는, 많은 폴더를 생성 할 수 있음을 의미합니까

그것을 최소한으로 유지하십시오. 나는이 가능하도록 gulp-rename 라이브러리를 사용했던

jade/index.jade -> public/index.html 
jade/about.jade -> public/about/index.html 
jade/another-page.jade -> public/another/page/index.html 

답변

4

를 이전 프로젝트의 경우 : 얻을하는 방법이을 변경할 수 있습니다

gulp.task('jade',function(callback){ 
    gulp.src('./jade/*.jade') 
    .pipe(jade({ 
     pretty: true, 
     markdown:marked 
    })) 
    .pipe(gulp.dest('./public/')); 

    callback(); 
}); 

:이 코드가 .html.jade에서 파일을 생성하는 gulp jade을 사용하는 것입니다 구성 파일을 빌드 디렉토리로 신속하게 전환합니다. 더 return 값이 필요하지 않습니다, 그것은 유용한 목적이 값을 변경

path={ 
    basename:'about', 
    dirname:'', 
    extname:'html' 
} 

당신을 선물 이름 변경을 변경에 그냥 정규식보다 더와 함수를 전달하는 작업을 수행 밝혀졌습니다. 따라서 기본 index.jade 파일에 대한 빠른 확인을 통해 빠른 분할 및 결합을 수행하여 디렉토리 경로를 구성 할 수 있습니다. gulp.dest은 존재하지 않는 경우 생성합니다.

var jade=require('gulp-jade'); 
var rename=require('gulp-rename'); 
gulp.task('jade',function(callback){ 
    gulp.src('./jade/*.jade') 
    .pipe(jade({ 
     pretty: true, 
     markdown:marked 
    })) 
    .pipe(rename(function(path){ 
     if (path.basename=='index'){ 
      return; 
     } 
     path.dirname=path.basename.split('-').join('/'); 
     path.basename="index"; 
    })) 
    .pipe(gulp.dest('./public/')); 

    callback(); 
});