그런트작업환경구성하기 설정편

그런트작업환경 구성하기 에서 다루지 못한 설정에 대한 이야기 입니다.

Gruntfile.js 에서 설정한 구문에 대한 추가 설명과 bower.json 에 대한 설명입니다.


Gruntfile.js

환경설정 변수

맨 처음부분에 아래처럼 변수를 정의해놨습니다.

var appConfig = {
  app: 'SourceCode',
  dist: 'FinishCode',
  devcode: 'DevCode',
  bower: 'bower_components',
  gruntfile: 'SourceCode/grunt'
};

app 는 소스코드를 가르킵니다. 여기서는 SourceCode 라는 폴더로 지정했습니다.

dist 는 목적지를 가르킵니다. 여기서는 FinishCode 라는 폴더로 지정했습니다.

devcode 는 개발폴더를 가르킵니다. 여기서는 DevCode 라는 폴더로 지정했습니다.

bower 는 bower 모듈이 설치되는 폴더를 가르킵니다. 여기서는 bower_components 라는 폴더로 지정했습니다.

gruntfile 는 그런트 설정에 필요한 파일들이 있는 폴더를 말합니다. 여기서는 소스코드의 grunt 라는 폴더로 지정했습니다.

이 모든 설정을 변수 appConfig 에 담아 아래에서 config: appConfig 라고 다시 설정했습니다.

이렇게 변수를 정해놓으면 grunt.initConfig() 안에서 <%= config.app %> 처럼 사용할 수 있습니다.

<%= config.app %> 은 위 변수에서 설정한 app: 'SourceCode' 폴더를 가르킵니다.

배너(주석)

배너 즉 주석부분을 설정한 부분이 있습니다.

banner: '/*\n' +
' ======================================================================== \n' +
' * Project   : <%= pkg.name %>(<%= pkg.description %>) v<%= pkg.version %>\n' +
' * Producer  : <%= pkg.make.company %>, <%= pkg.make.homepage %>\n' +
' * Publisher : <%= pkg.make.publisher %>, <%= pkg.make.blog %>, <%= pkg.make.email %>\n' +
' * Update    : <%= grunt.template.today("yyyy-mm-dd") %>\n' +
' * License   : <%= pkg.license.type %> (<%= pkg.license.url %>)\n' +
' ======================================================================== \n' +
' */\n',

이것은 Gruntfile.js 내에서 배너부분으로 사용하기 위해 만든것으로 필요없으면 삭제해도 됩니다.

견본으로 넣어놓은것이니 수정하거나, 삭제해도 됩니다.

다만, 여기서 사용하는 구문은 package.json 을 참고합니다.

예를들어 <%= pkg.name %>package.json"name"을 가져옵니다.

이런식으로 package.json 을 참고해서 Gruntfile.js 를 작성할 수 있습니다.

registerTask

맨 아래보면 아래와 같은 구문이 있습니다.

grunt.registerTask('server', function (target) {
  grunt.log.warn('`server` 는 사용되지 않습니다. 다음부터는 `grunt serve` 를 사용하세요');
  grunt.task.run(['serve:' + target]);
});

이전에는 콘솔창에서 grunt serve 라고 사용하지 않고, 주로 grunt server 라고 입력했씁니다.

하지만 grunt serve 로 그런트에서 변경했습니다.

그것에 대한 경고문구를 출력하고 server 이라고 입력해도 serve 가 실행되도록 한것입니다.

그 아래보면

grunt.registerTask('serve', function (target) {
  if (target === 'dist') {
    return grunt.task.run(['connect', 'watch']);
  }

  grunt.task.run([
    'default',
    'connect',
    'watch'
  ]);
});

이것은 콘솔창에서 grunt serve 라고 입력하면 grunt.task.run() 부분이 실행됩니다.

만약 작업중 grunt 를 한번이라도 실행한적이 있으면 구지 모든 모듈을 재실행할 필요가 없습니다.

그때는 grunt serve:dist 라고 콘솔창에 입력하면 connectwatch 모듈만 실행됩니다.

즉, 맨처음 한번만 grunt 를 실행하면 다음부턴 grunt serve:dist 라고 입력해서 connectwatch 모듈만 실행하는것이 빠릅니다.

그아래를 보면

// less
grunt.registerTask('less-docs', [
  'less:docs',
  'autoprefixer:docs',
  'csscomb',
  'csslint:docs',
  'cssmin:docs'
  ]
);

// javascript
grunt.registerTask('js-dev', [
  'newer:jshint',
  'concat',
  'uglify'
  ]
);

// build
grunt.registerTask('build', [
  'clean',
  'less-docs',
  'js-dev',
  'concurrent:build'
  ]
);

이 작업들은 그냥 작업별로 모아놓은것입니다.

한가지 build 작업은 개인적으로 개발자와의 협업때문에DevCode 폴더를 하나 더 만드는것입니다.

마지막으로,

// default
grunt.registerTask('default', [
  'clean',
  'less-docs',
  'js-dev',
  'concurrent:dev'
  ]
);

그런트에서는 명령창에서 grunt 라고 입력하면 grunt default 라고 입력한것과 같다.

그래서 위처럼 입력해놓으면 간단하게 grunt 라고만 입력하면 된다.

package.json

package.json 은 프로젝트 전반에 걸쳐 사용이 됩니다. 이걸 토대로 Gruntfile.js 가 작성됩니다.

json 파일이므로 키:값 으로 이루어져 있으며, 값은 하위값을 포함할 수 있습니다.

name 은 반드시 있어야 하는것으로 알고 있씁니다.

참고할 부분은 devDependencies 부분으로 "모듈명" : "버젼" 형식으로 사용됩니다.

버젼은 정할수도 있고 latest* 를 사용하면 최신버젼으로 사용됩니다.

bower.json

bower.json 도 마찬가지로 json 파일입니다.

bower.json 은 모듈을 설치하면 bower_components 라는 폴더에 설치가 됩니다.

명령창에서 bower init 이라는 명령어를 치면 만들어집니다. 여기선 생략했지만

참고적으로 라이브러리를 설치하면 dependencies 부분에, 프레임웍이나 플러그인을 설치하면 devDependencies 부분에 입력이 됩니다.

물론 명령창에서 bower install jquery#1.9.1 --save 이런식으로 하면 버젼을 맞쳐서 설치하며, --save 로 해서 bower.json 에 입력이 됩니다.

이걸로 대략적인 부분은 다 알아본것 같습니다.

좀더 자세한 사용법은 gruntbower 홈페이지를 참고하세요