[걸프(Gulp)] 2. gulp-file-include

제목만 봐서는 뭔지 모르는 사람이 조금은 있을꺼라고 생각합니다.

include 의 뜻이 포함하다. 라는 뜻입니다.

그래서 뭘 포함하는데? 라고 분명히 의문을 가지실 분들이 계실꺼라고 생각됩니다.

저는 이걸 사용해서 자주 쓰이는 헤더와 푸터를 앞으로 만들 html페이지에 포함해 보려고 합니다.

페이지를 만들면 반복적으로 쓰이는 헤더와 푸터는 새로 만든 페이지 에서 똑같이 작성해 줘야합니다.

그냥 그런 작업을 Gulp를 이용해서 해보면 어떨까 합니다.

1. 먼저 폴더 몇개와 index, header, footer 에 관한 html 파일을 몇개 만들어 둡니다.

gulpSetting 이란 폴더에 app 이란 폴더를 만들고

app 이란 폴더 아래로 다음과 같이 폴더와 파일을 만들었습니다.

이 부분은 본인의 작업 스타일에 따라서 변동이 있을꺼라 생각되네요.

2. 그리고 header.html, footer.html, var.html, index.html 에 다음과 같이 작성해 봤습니다.

스타일을 인라인으로 넣었는데 이렇게 하시면 좋지 않습니다. 이건 테스트로 하는거라 이렇게 했을 뿐입니다.

header.html

footer.html

var.html

여기서 var.html 만 조금 틀리게 작성을 했는데

javascript의 var는 변수 즉 변하는 값을 의미합니다.

저기에 적혀져 있는 @@title, @@desc 는 제가 만든 변수와 같다고 생각하시면 됩니다.

페이지 마다 다르게 적용되야 하는 공통된 부분? 

예를들어... 어떤 페이지는 CEO소개 를 제목으로, 어떤 페이지는 회사 연혁을 제목으로 사용할 수 있잖아요. 그런 개념으로 생각하시면 될꺼 같습니다.

index.html 에선 다음과 같이 작성하였습니다.

8번라인과 13번 라인은 헤더와 푸터를

그리고 내용으로써 바뀌는 부분은 var.html 을 연결해줬습니다.

title과 desc 는 var.html에서 만든 변수 명을 그대로 작성했습니다.

경로를 잘 확인해 주시기 바랍니다.

index.html 폴더 기준으로 한번 상위에 있는 include폴더 안의 html 파일을 연결 시켜 줍니다.

(저와 같은 폴더 구성 1번에서 두번째 스샷. 처럼 폴더를 만드셨다면 sub폴더에 sub.html이라던지 한번 해봤다면 상위로 두번 올라가서 include 폴더로 들어가면 됩니다.)

3. 자 터미널 또는 명령프롬프트 창에서 다음과 같이 입력해 봅시다.

gulp-file-include란걸 사용하기 위해선 이걸 설치해야 하기 때문입니다.

npm install  --save-dev gulp-file-include

4. 그럼 gulp-file-include 를 설치했으니 packge.json 에 그 이력을 확인해 봤습니다.

13번 라인을 보시면 gulp-html-extend 가 잘 설치되어 기록된걸 확인하실 수 있습니다.

5. 그럼 gulpfile.js 로 돌아가 다음과 같이 작성합니다.

1번라인과 2번라인의 require 는 node.js 의 require로 gulp 모듈을 가져오고 gulp의 task중 방금 설치한 gulp-file-include 를 fileinclude로 태스크 하겠다는 의미 입니다.

이건 다음에 한번 더 할껀데 그 때 보시면 훨씬 이해가 빠릅니다.

그리고 4번라인 부터 다시 보자면

gulp.task를 통해 task를 작성하게 됩니다.

이 태스크 라는건 '작업'을 의미합니다. 해당 작업에 첫번째 인자로 작업의 이름을, 두번째 인자로 어떠한 작업이 일어날지에 대한 작업 내용이 들어갑니다.

5번 라인의 gulp.src 를 통해서 목표로 하는 파일들을 지정 합니다.

(여기서 base 부분은 옵션입니다. 예를들어 5번 라인을

gulp.src(['./app/src/index.html', './app/src/sub/*.html'])

이렇게만 입력할 경우

기존에 있는 파일을 덮어 씌우지 않고 10번 라인의 경로에 저장이 됩니다. 즉 gulpfile.js 와 동등한 위치로 결과본이 출력되는 셈이지요.)

6번 라인의 pipe를 통해서 이전에 지정한 파일들을 대상으로 어떠한 작업을 수행할지를 다시 지정합니다.

10번 라인의 gulp.dest 의 용도는 위에서 작업해온 파일을 원하는 디렉토리에 저장하고 싶을 때 사용 합니다. 5번 라인의 base 옵션의 영향을 받습니다.

var fileinclude = require('gulp-file-include'),
    gulp = require('gulp');
 
gulp.task('fileinclude', function() {
    gulp.src(['./app/src/index.html', './app/src/sub/*.html'], {base : './'})
    .pipe(fileinclude({
        prefix: '@@',
        basepath: '@file'
    }))
    .pipe(gulp.dest('./'));
});

6. 터미널 또는 명령 프롬프트 창에서 다음의 명령을 이용해서 돌려 보도록 합니다

gulp fileinclude

그럼 다음과 같이 출력이 됩니다.

정상적으로 나온다면 별다른 에러 문구는 출력 안하고 심플하게 작업 소요시간이 찍혀 있습니다.

에러가 뜬다면 조금 위에 at ~~~~~~~ 뭐 저런식으로 마구마구 찍혀있는게 보이실 꺼예요.

저런식으로 에러가 떠요.

7. 결과 확인

제대로 변환이 된걸 확인할 수 있습니다.

index.html

sub.html

간혹 터미널 또는 명령프롬프트로 이 블로그애 나와있는 것과 동일하게 진행했는데

변환이 안된다 하시면 거의 100프로 gulpfile.js 에 경로를 잘 못 기입하신게 틀림 없습니다.

에러도 안떳는데 변환이 안되 이러면 gulpfile.js 를 의심해 보셔야 합니다.

이건 제가 오타 내봐서 확실히 기억합니다. 에러 문구는 안떳어요. 그리고 변환이 안됬는데

뭐가 문제인지 알아내다 보니까 gulpfile.js 를 잘 못 적어서 그렇더라구요. 특히

상대경로에 대한 이해가 부족하시면 더더욱 안됩니다. 상대경로에 대해 확실히 인지 하시고 시도해 보시길 바랍니다.

압축본.zip

gulp-file-include : https://www.npmjs.com/package/gulp-file-include

한번에 모든 src의 파일들을 덮어씌우기 : http://stackoverflow.com/questions/22418799/can-gulp-overwrite-all-src-files

다음엔 Sass 컴파일을 시도해 보겠습니다.