4부 Grunt html task 그런트 html 작업

html task

html 의 단점은 인클루드를 못한다는 점입니다. 물론 다른언어인 jsp, 'php' ... 등등은 인클루드를 할 있지만 html 자체에는 없습니다.

그런한 단점을 보완해주는 includes 모듈을 사용합니다.

또한 전처리 언어인 json 을 사용할 수 있게 동시에 설정을 해놓았습니다.

includes 모듈

includes 모듈은 위에서 말했듯 인클루드를 사용할 수 있게 만들어줍니다.

작업을 하다보면 매 페이지마다 동일하게 들어가는 요소가 있습니다.

예를들어 gnb 처럼 ul 요소가 하위 몇 뎁스까지 늘어진 요소가 매 페이지마다 들어간다고 하면, 매번 복사해서 붙여넣기해야 합니다.

하지만 includes 를 사용하면 gnb.html 를 만들어서 인클루드해서 사용하기만 하면 됩니다.

또 다 만들어진 다음 gnb 를 수정할때가 있습니다.

그럴때도 마찬가지로 gnb.html 을 열어 한 파일만 수정하면 됩니다.

includes 저장소 - https://github.com/vanetix/grunt-includes

옵션은 html의 docs 폴더의 html 파일들을 목적지 폴더에 빌드합니다. 단 include 폴더는 includePath 경로의 include 폴더입니다.

즉 html/include 폴더에 gnb.html 등을 놓고 사용하면 됩니다.

includes: {
  build: {
    cwd: '<%= config.app %>/html/docs/',
    src: ['**/*.html'],
    dest: '<%= config.dist %>',
    options: {
      flatten: true,
      includePath: '<%= config.app %>/html/include/'
    }
  }
},

반복적으로 사용되는 html 은 무조건 나눠서 사용하면 코드의 양을 무척 줄일수 있습니다.

jade 모듈

jade 는 Node Template Engine 라고 합니다.

제이드 문법에 맞게 작성하면 html 로 만들어집니다. 물론 html 의 단점을 극복하고 보다 쉽게 작성하도록 만들어진 언어입니다.

위에서 말했던 인클루드 또한 지원하며, 자바스크립트 등도 사용할 수 있습니다.

jade 홈페이지 - http://jade-lang.com/

여기서는 이전에도 말했듯 jade 를 사용해도되고, 안해도 됩니다.

jade 저장소 - https://npmjs.org/package/grunt-contrib-jade

옵션은 pretty 로 보기좋게 html 을 만듭니다.

jade/docs 폴더의 jade 파일을 목적지 폴더에 빌드합니다.

jade: {
  dynamic_mappings: {
    options: {
      client: false,
      pretty: true
    },
    files: [
      {
        expand: true,
        cwd   : '<%= config.app %>/jade/docs/',
        src   : ['**/*.jade'],
        dest  : '<%= config.dist %>',
        ext   : '.html',
      },
    ],
  },
}

html 폴더는 includes 모듈을 사용하고, jade 폴더는 jade 모듈을 사용합니다.

html, jade 폴더안에 인클루드 할수있는 폴더가 위치합니다.

개 개

demun(대문블로그)