본문 바로가기

WEB개발이야기

Gruntfile의 주요 플러그인들

어쩌다보니여기까지~
2018. 7. 10.
반응형

앞선 포스팅에서 Grunt 소개와 설치방법를 소개했었습니다. 이번에는 Grunt의 주요 플러그인들을 소개하고 간략한 설명을 포스팅 하겠습니다.

플러그인

Grunt.js에서 말하는 플러그인과 Node.js에서 말하는 패키지는 동일한 것입니다. 그래서 Grunt에서 패키지를 설치하는 방법과 Node.js에서 패키지를 설치하는 방법이 동일합니다.

플러그인 찾기

대부분의 Grunt 플러그인들은 Grunt사이트의 Plugin 메뉴에서 확인할 수 있습니다.

Grunt웹사이트 플러그인 메뉴

  1. 먼저 Grunt웹사이트의 플러그인 메뉴로 이동합니다.
  2. 원하는 기능의 플러그인을 검색창을 이용하여 검색을 합니다.
  3. 검색결과의 플러그인 리스트중에 하나를 선택하여 설치방법을 확인합니다.
찾는 플러그인이 명확하지 않다면 검색결과 중 **다운로드 수가 많은 것** 이나 플러그인 명 앞에 별표(**★**)가 붙은 것을 선택해서 설치하세요. 별표(**★**)가 붙은 것은 **Grunt팀**에서 만들었다는 의미이기 때문에 어느정도 공신력이 있다고 볼 수 있습니다.

플러그인 설치하기

검색된 플러그인의 제목을 클릭하면 상세페이지로 넘어 갑니다. Grunt의 플러그인은 Node.js의 패키지이기때문에 NPM페이지로 넘어 갑니다.
상세페이지를 보면 영어로 되어있긴 하지만 설치하는 방법과 옵션 설정 방법 등이 자세히 설명되어 있습니다.

npm install grunt-contrib-copy --save-dev

▲ 설치는 위와 같이 NPM을 통해 설치를 하면 됩니다. 설치를 하면 프로젝트 폴더에 node_modules폴더가 생기고 그안에 플러그인들이 설치가 됩니다.

--save-dev 설치옵션에 따라 package.json의 devDependencies 항목에 해당 플러그인명이 기록 됩니다.
가장 뒤에 -dev옵션은 개발 시에만 사용하는 플러그인이라는 것을 명시하는 것이고 실제서비스에 사용되는 플러그인이라면 -dev옵션을 제거 한 --save옵션만 적용합니다. 그러면 package.json의 dependencies 항목에 명시가 됩니다.

주요 플러그인

contrib-clean [바로가기]

지정한 폴더와 파일을 삭제하는 플러그인입니다. 주로 배포 시 기존의 Temp성 파일이나 폴더를 모두 제거하고 다시 새로 생성할 때 주로 사용됩니다.

  • 설치 : npm install grunt-contrib-clean --save-dev
  • 로딩 : grunt.loadNpmTasks('grunt-contrib-clean');
grunt.initConfig({ 
  clean: {
    build: ['path/to/dir/one', 'path/to/dir/two'],
    release: ['path/to/another/dir/one', 'path/to/another/dir/two']
  }
})

▲ build와 release에 지정된 폴더를 모두 삭제함.
▲ clean:build와 clean:release의 명령어로 따로 따로 실행을 시킬 수도 있음

contrib-copy [바로가기]

지정한 폴더에 있는 파일을 다른 폴더로 복사하는 플러그인입니다. 개발 후 배포 시 images나 컨텐츠 파일 등을 그대로 배포하는 폴더로 복사하는데 주로 사용됩니다.

  • 설치 : npm install grunt-contrib-copy --save-dev
  • 로딩 : grunt.loadNpmTasks('grunt-contrib-copy');
grunt.initConfig({ 
  copy: {
    main: {
      expand: true,
      src: 'src/*',
      dest: 'dest/',
    }
  }
})

▲ src폴더에 있는 모든 파일을 dest에 지정된 폴더로 복사함

contrib-watch [바로가기]

개발 시 지정한 폴더의 파일의 변경 유무를 실시간으로 보고 있다가 변경이 감지되면 지정한 명령어를 실행해 주는 플러그인입니다. 주로 개발 시 Source파일이 수정된 경우 실시간으로 컴파일을 실행하여 보여 주거나 웹서버를 리로딩 할 때 주로 사용합니다.

  • 설치 : npm install grunt-contrib-watch --save-dev
  • 로딩 : grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({ 
  watch: {
    scripts: {
      files: ['**/*.js'],
      tasks: ['jshint','uglify'],
    }
  }
})

▲ files에 지정한 폴더의 javascript파일이 변경이 있어나는지 실시간으로 보고 있다가 변경이 일어나면 tasks에 지정된 명령어 jshint,uglify 를 순차적으로 실행함

contrib-concat [바로가기]

concat은 2개 이상의 javascript나 css 파일을 하나의 파일로 합쳐주는 플러그인 입니다.

  • 설치 : npm install grunt-contrib-concat --save-dev
  • 로딩 : grunt.loadNpmTasks('grunt-contrib-concat');
grunt.initConfig({ 
  concat: {
    options: {
      separator: ';',
    },
    dist: {
      src: ['src/intro.js', 'src/project.js', 'src/outro.js'],
      dest: 'dist/built.js',
    }
  }
})

▲ src에 지정되어 있는 파일을 합쳐서 하나의 파일로 만들어서 dest에 지정된 폴더인 dist/에 지정된 파일명인 built.js로 저장함

contrib-uglify [바로가기]

지정한 javascript 코드에서 공백과 줄바꿈, 주석 등 불필요한 요소들을 모두 제거하여 압축해 주는 플러그인입니다.
소스코드가 한 줄로 나열되어 있어 사람이 보기에는 좋지 않지만 용량이 줄어 들어서 Network트레픽을 줄일 수 있습니다. 또한 코드를 난독화 시켜서 완벽하진 않겠지만 약간의 소스코드 보안 효과를 볼 수 있습니다.

  • 설치 : npm install grunt-contrib-uglify --save-dev
  • 로딩 : grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.initConfig({ 
  uglify: {
    my_target: {
      files: {
        'dest/output.min.js': ['src/input1.js', 'src/input2.js']
      }
    }
  }
})

▲ files의 뒤쪽에 있는 ['src/input1.js', 'src/input2.js'] 2개의 js파일을 합쳐서 하나의 파일로 만들고 압축을 하여 앞쪽에 있는 dest/output.min.js에 파일을 저장함

contrib-cssmin [바로가기]

contrib-uglify와 비슷하게 CSS에 대해서 압축을 합니다.
소스코드가 한줄로 나열되어서 사람이 보기에는 좋지 않지만 용량이 줄어들어서 Network트레픽을 줄일 수 있습니다. 또한 코드를 난독화 시켜서 완벽하진 않겠지만 약간의 소스코드 보안 효과를 볼 수 있습니다.

  • 설치 : npm install grunt-contrib-cssmin --save-dev
  • 로딩 : grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.initConfig({ 
  cssmin: {
    target: {
      files: {
        'dest/output.css': ['foo.css', 'bar.css']
      }
    }
  }
})

▲ files의 뒤쪽에 있는 ['foo.css', 'bar.css'] 2개의 css파일을 합쳐서 하나의 파일로 만들고 압축을 하여 앞쪽에 있는 dest/output.css에 결과 파일을 저장함

wiredep [바로가기]

wiredep는 bower와 세트로 실행되는 플러그인입니다. bower를 통해 설치한 Web의 Front-end 패키지를 HTML코드의 특정 표시 영역 안에 자동으로 삽입을 시켜줍니다. javascript 오픈소스들을 쉽게 HTML에 적용/제거 할 수 있게 해주는 편리한 플러그인입니다.
HTML, jade, scss, yml파일에 적용할 수 있습니다.

Bower란?
bower는 Web의 Front-end에 특화된 패키지관리 프레임워크로 NPM과 비슷한 역활을 합니다.
NPM이 Node.js에 관한 모든 패키지들을 관리하는것에 반해 bower는 Web의 Front-end에 관한 패키지를 관리한다고 보면 될 것 같습니다.
NPM의 패키지가 node_modules폴더에 저장되는 것 처럼 Bower의 패키지는 bower_components폴더에 저장이 됩니다.
사용법도 NPM과 비슷합니다. 자세한 사항은 bower.io홈페이지에서 확인하세요.

  • 설치 : npm install grunt-wiredep --save-dev
  • 로딩 : grunt.loadNpmTasks('grunt-wiredep');
grunt.initConfig({ 
  wiredep: {
    task: {
      src: [
        'app/views/**/*.html',   // .html support... 
        'app/views/**/*.jade',   // .jade support... 
        'app/styles/main.scss',  // .scss & .sass support... 
        'app/config.yml'         // and .yml & .yaml support out of the box! 
      ],
      exclude: [
        'bootstrap.css',
        'fonts.css'
      ]
    }
  }
})

▲ src에 나열되어 있는 파일들을 대상으로 bower를 통해 설치한 패키지들을 자동으로 삽입을 시켜줍니다.

<html>
  <head>

    <!-- bower:css -->
    <!-- endbower -->

    <!-- bower:js -->
    <!-- endbower -->

  </head>
  <body>
  </body>
</html>

▲ src에 지정되어 있는 파일중 HTML파일을 샘플로 열어보면 <!-- bower:css --> <!-- endbower -->과 <!-- bower:js --> <!-- endbower --> 영역이 있는 것이 보임 (없으면 동일하게 작성을 하면됨)

만약 Bower로 bower install bootstrap --save와 같이 bootstrap를 설치하고 wiredep 명렁어가 실행되면 아래와 같이 자동으로 HTML파일이 변경이 됩니다.
jQuery를 설치했다면 아래에 <script src="bower_components/jquery/jquery.js"></script>가 자동으로 추가됩니다.

<html>
  <head>

    <!-- bower:css -->
      <link rel="stylesheet" href="bower_components/bootstrap/css/bootstrap.css">
    <!-- endbower -->

    <!-- bower:js -->
      <script src="bower_components/bootstrap/js/bootstrap.js"></script>
      <script src="bower_components/bootstrap/jquery/jquery.js"></script>
    <!-- endbower -->

  </head>
  <body>
  </body>
</html>

usemin & useminPrepare [바로가기]

usemin은 Web 이나 Webapp을 제작할 때 주로 사용되는 플러그인으로 html과 css, javascript에 대해 Grunt로 편리하게 배포 본을 만들 수 있게 Yeoman팀에서 제작한 플러그인 입니다.
usemin를 설명할때는 꼭 useminPrepare, concat, uglify, cssmin를 같이 설명해야 하는데 왜냐하면 이 5개의 플러그인이 대부분 세트처럼 같이 사용되기 때문입니다.

concat, uglify, cssmin 플러그인의 역활은 위에 설명 했으나 간략히 설명하면 아래와 같습니다.

  • concat : javascript나 css 파일 여러 개를 하나의 파일로 합침
  • uglify : javascript 파일을 압축함
  • cssmin : css 파일을 압축함

usemin을 설치하면 useminPrepare명령어도 사용할 수 있으며 usemin을 실행하기 전에 먼저 useminPrepare를 실행해야 합니다.

useminPrepare 역활

useminPrepare는 usemin을 실행하기에 앞서 usemin을 실행할 수 있도록 전처리 작업을 해주는 역활을 합니다. usemin의 주된 역활이 HTML에 작성되어 있는 여러개의 CSS LInk 나 javascript Link를 하나로 합쳐서 압축하는 것이 목적인데 Grunt가 HTML에 있는 내용을 직접 컨트롤하는 것이 어렵습니다. 그렇기 때문에 먼저 HTML에 작성되어 있는 링크정보를 usemin이 사용할 수 있게 사전 작업을 해줘야 하는데 그 일을 useminPrepare가 해 줍니다.

useminPrepare 명령어를 실행 시켰으면 반드시 마지막에 usemin을 실행 시켜야 최종적으로 원하는 결과물을 얻을 수 있게 됩니다.

usemin 세트의 일반적인 작업순서

  1. useminPrepare 실행
  2. concat, uglify, cssmin 실행
  3. usemin 실행

명령어 뭉치로 작성을 하면 아래와 같습니다.

grunt.registerTask('build', [
  'useminPrepare',
  'concat',
  'cssmin',
  'uglify',
  'usemin'
]);
  • 설치 : npm install grunt-usemin --save-dev
  • 로딩 : grunt.loadNpmTasks('grunt-usemin');
grunt.initConfig({ 
  useminPrepare: {
    html: 'index.html'
  }
})

▲ html에 지정된 index.html 을 대상으로 useminPrepare 작업을 함

<html>
  <head>

    <!-- build:css css/style.css -->
    <link rel="stylesheet" href="foo.css">
    <link rel="stylesheet" href="bar.css">
    <link rel="stylesheet" href="baz.css">
    <!-- endbuild -->

    <!-- build:js scripts/site.js -->
    <script src="foo.js"></script>
    <script src="bar.js"></script>
    <script src="baz.js"></script>
    <!-- endbuild -->'

  </head>
  <body>
  </body>
</html>

▲ 위에 지정한 index.html를 열어보면 위와 같이 <!-- build:css css/style.css --> <!-- endbuild -->, <!-- build:js scripts/site.js --> <!-- endbuild --> 의 주석처리 되어 있는 부분에 대해서 useminPrepare가 동작함

usemin을 사용할 경우는 Grunt의 grunt.initConfig({ })에 별도의 옵션을 지정하지 않아도 useminPrepare가 html에 주석으로 작성되어 있는 특정한 영역을 해석해서 옵션으로 사용합니다.

<!-- build:js scripts/site.js --> <!-- endbuild -->

  • build:js - build:js라는 표시로 usemin에서 사용되는 주석 테그라는 것을 표시함.
  • scripts/site.js - 주석의 영역 안에 있는 모든 javascript Link를 하나로 합쳐서 scripts/site.js 위치에 결과물을 저장하라는 옵션

HTML의 주석으로 처리했기 떄문에 브라우저에서 HTML을 인식하는데 문제가 없음

위의 HTML을 usemin 명령어가 실행되면 아래와 같이 결과물(배포본)로 저장이 됩니다. 

<html>
  <head>

    <link rel="stylesheet" href="css/style.css">
    <script src="scripts/site.js"></script>

  </head>
  <body>
  </body>
</html>

jit-grunt [바로가기]

jit-grunt플러그인은 자동으로 loadNpmTasks를 로드해 주는 편리한 플러그인입니다. 이전에 설명을 드린것 처럼 gruntjs의 구조는 1. 프로젝트의 구성, 2. 사용한 플러그인 로딩, 3. 실행 명령어로 구성되었다고 있다고 했었는데요. 매번 플러그인을 설치할때마다 사용한 플러그인을 로딩하는 코드를 삽입해야 했었습니다. 예를 들면 grunt.loadNpmTasks('grunt-usemin');와 같은 코드입니다. 플러그인이 1~2개면 문제가 없는데 수십 개가 넘어버리면 여간 귀찮은 것이 아닙니다. 오류가 발생할 확율도 높아지기도 하고..
그래서 그 부분을 대체할 수 있게 해 주는 플러그인이 jit-grunt입니다.

  • 설치 : npm install jit-grunt --save-dev
  • 로딩 : require('jit-grunt')(grunt);

기존 방법

grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-csslint');
grunt.loadNpmTasks('grunt-contrib-less');

▲ 기존의 방법은 설치한 프러그인 개수에 맞게 grunt.loadNpmTasks(''); 를 개속 추가 해야 함

jit-grunt 방법

require('jit-grunt')(grunt);

▲ jit-grunt를 사용한 방법은 간단하게 위와 같이 한줄만 추가를 하면 설치한 모든 플러그인을 자동으로 로드함

module.exports = function (grunt) {
  require('jit-grunt')(grunt);

  grunt.initConfig({
    ...
  });

  grunt.registerTask('default', [...]);
}

▲ 일반적으로 jit-grunt은 위와같이 gruntfile의 상단에 위치함

아래에 WEB개발이야기의 더 많은 정보에 링크를 걸어놨습니다.

VirtualBox와 Vagrant의 기본 사용법 바로가기 클릭!Grunt 소개와 설치방법 바로가기 클릭!Gruntfile의 구조와 사용법 바로가기 클릭!웹프로그램 개발 시 필요한 샘플 이미지를 무료로 제공해 주는 사이트 바로가기 클릭!

UX 공작소

UX와 UI에 관해 내가 알게된 다양한 이야기를 공유해요~

티스토리툴바