6. 그런트 최적화하기

그런트를 좀더 최적화하기 위해 추가적으로 설치해서 사용하는 모듈이 있습니다.

그런트를 최적화하거나 사용자의 환경에 맞게 좀더 수정할 수 있는 방법을 알아봅니다.

time-grunt : 작업시간 표시

time-grunt 모듈은 태스크들의 작업시간을 콘솔창에 보여주는 모듈입니다.

https://github.com/sindresorhus/time-grunt/raw/master/screenshot.png

저장소 - https://github.com/sindresorhus/time-grunt

설치와 사용법은 저장소에 다 나와 있습니다.

아래처럼 사용하면 됩니다.

// Gruntfile.js
module.exports = function (grunt) {
  require('time-grunt')(grunt);

  grunt.initConfig();
}

Gruntfile.js//작업시간 표시 라고 주석을 달아놓았습니다.

load-grunt-tasks : 자동으로 그런트 태스크 로드

저장소 - https://github.com/sindresorhus/load-grunt-tasks

load-grunt-tasks 는 loadNpmTasks 에 모듈명을 적어줘야 하는데 이걸 하나의 구문으로 짧게 줄여줍니다.

즉 grunt.loadNpmTasks 를 생략할수 있게 해줍니다.

Gruntfile.js 에 사용되는 구문을 아래에서 예제로 보여드립니다.

// load-grunt-tasks 사용전
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-recess');
grunt.loadNpmTasks('grunt-sizediff');
grunt.loadNpmTasks('grunt-svgmin');
grunt.loadNpmTasks('grunt-styl');
grunt.loadNpmTasks('grunt-php');
grunt.loadNpmTasks('grunt-eslint');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-bower-requirejs');

// load-grunt-tasks 사용후
require('load-grunt-tasks')(grunt);

concurrent : 다중 태스크 병렬로 실행

concurrentcoffeesass 같은 느린작업을 하는 모듈들이 있는경우 빌드시간이 길어지는데 이런 모듈들을 concurrent 모듈을 사용해서 동시에 진행할 수 있도록 해줍니다.

즉 시간이 걸리는 작업을 동시에 여러개 할 수있도록 해서 작업시간을 줄여주는 모듈입니다.

저장소 - https://github.com/sindresorhus/grunt-concurrent

그런트작업환경구성하기에 포함된 옵션을 알아봅니다.

옵션으로는 콘솔창에 작업들이 걸리는 시간을 표시하도록 했습니다.

dev 는 일반적으로 사용할때이고 copy 모듈에서 dev 만 작업하는것이고, buildcopy 모듈을 전부 작업하게 했습니다. (이것은 DevCode 폴더를 만드는 작업입니다. 일반적으로는 dev 만 사용해도 됩니다.)

concurrent: {
  options: {
    logConcurrentOutput: true
  },
  dev: [
    'includes',
    'jade',
    'newer:imagemin',
    'copy:dev'
  ],
  build: [
    'includes',
    'jade',
    'newer:imagemin',
    'copy'
  ]
}

newer : 수정된 코드나 파일만 로드해주는 태스크

newer 모듈은 수정된 코드나 파일만을 따로 작업하게 해주는 모듈입니다.

수정되지도 않았는데 그런트 작업 모듈을 한바퀴 도는것은 낭비가 크므로 해당 모듈 부분만 작업을 하게끔 해주는 모듈입니다.

저장소 - https://github.com/tschaub/grunt-newer

그런트작업환경구성하기에 보면 여러군데 사용이 됐습니다.

그중에 watch 모듈에 사용된 부분을 보겠습니다.

jshint 를 사용하는곳에 주로 newer 모듈이 사용된걸 볼 수 있습니다.

한가지 예로 newer:jshint:docs 를 보면 jshint 의 docs 작업부분을 newer 모듈을 통해서 작업한다는 의미입니다.

watch: {
  gruntfile: {
    files: ['Gruntfile.js'],
    tasks: ['newer:jshint:grunt'],
    options: {
      livereload: true
    }
  },
  js: {
    files: [
      '<%= config.app %>/js/**/*.js'
    ],
    tasks: ['newer:jshint:docs', 'concat:docs', 'uglify:docs'],
    options: {
      livereload: true
    }
  },
  img: {
    files: ['<%= config.app %>/images/**/*.{gif,jpeg,jpg,png}'],
    tasks: ['newer:imagemin'],
    options: {
      livereload: true,
    }
  }
}