첫 Qiita입니다. 두근두근.

프런트 엔드 엔지니어가 되었기 때문에 소문에 듣는 태스크 러너가되는 것에 입문하려고 여러가지 검토하고 있습니다.

조사하고 있는 느낌으로는 이하의 2강인 것이므로, 지금 갱감이 감도는 가운데 소개하고 싶습니다.

Grunt

클래식한 것이 Grunt. 프런트 엔드에서의 태스크 러너라고 하면 이것이 제일 유명한 것 같네요.
Sass 컴파일, CSS, JavaScript 결합, 압축 등 다양한 것을 자동화할 수 있습니다.

Grunt 본체와 Grunt를 터미널에서 조작할 수 있는 grunt_cli는 별도이므로 주의가 필요합니다.

구성 파일은 다음과 같이 정의됩니다.

module.exports = function(grunt) {
  //Gruntの設定
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });
  //defaultタスクの定義
  grunt.registerTask('default', 'Log some stuff.', function() {
    //ログメッセージの出力
    grunt.log.write('Logging some stuff...').ok();
  });
};

Grunt 자체는 단지 설정 파일에 기술되어 있는 태스크를 몹시 실행하기 위한 것이므로, 실제로 태스크 러너로서 이용하려면 플러그인을 사용하는 것이 편리합니다.

주요 플러그인

grunt-contrib-coffee
CoffeeScript 컴파일

grunt-contrib-compass
Compass로 Sass 컴파일

grunt-contrib-concat
여러 파일 병합

등등. 사용중인 altJS 및 CSS 메타 언어에 따라 플러그인을 선택할 수 있습니다.

목록은 여기 에서.

gulp.js

또 다른 프런트 엔드 태스크 러너로 주목 받고있는 것이 gulp.js입니다.
Grunt와 비교하면 구성 파일 작성이 간단하고 작동이 빠릅니다.

구성 파일은 다음과 같이 정의됩니다.

gulp.task('coffee', function(){
  return gulp.src('src/*.coffee') // srcフォルダからファイルを読む
    .pipe(coffee()) // 1. CoffeeScriptをコンパイル
    .pipe(concat()) // 2. 複数ファイルをひとつに結合
    .pipe(uglify()) // 3. JavaScriptをミニファイ(uglify)
    .pipe(gulp.dest('dist/')); // distフォルダに保存
});

이와 같이 태스크를 하나하나 기술해, 레시피를 작성해 갑니다.

주요 플러그인

플러그인에 관해서는, 후발이라고 하는 일도 있어 Grunt보다 수는 적습니다만, 지명도의 향상에 비례해 충실해 오는 것 같습니다.

gulp-sass
Sass 컴파일. 항상 압축되어 출력되므로 쓰기가 나쁘다.

gulp-ruby-sass
마찬가지로 Sass의 컴파일입니다만, 이쪽은 Ruby를 사용합니다. 세세한 설정이 가능.

gulp-csscomb
CSS 성형. 코딩 규약이 정해져 있을 때는 그 설정을 그대로 반영해 주면 좋겠습니다.

목록은 여기 에서.

어느 것이 좋습니까?

Grunt, gulp 모두 커스터마이즈성이 높고, 매우 편리함이 좋다고 느꼈습니다. 뭐 지금까지 태스크 러너를 사용한 적이 없는 것도 있습니다만. . .
반영하고 싶은 규약이나 운용에 맞춘 플러그인이 있는지 없는지, 기존의 배포 환경에 무리없이 도입 가능한가 어떤가가 판단 기준이 될까 생각합니다.
마음에 드는 플러그인이 없으면 자작해 보는 것도 개미군요!

자동화의 의미

프리랜서에서 새로운 팀에 조인하여 가장 느낀 것이 기존 코드에 대한 일관성을 유지한 코딩의 어려움입니다.
팀에 조인해 날이 얕은 엔지니어에게 있어서, 규약을 확인하면서의 코딩은, 필요한 일입니다만 부담이 큰 것이 됩니다.
또한 코드의 가독성이 유지되지 않으면 더욱 부담이 커집니다.

그래서 CSS 메타 언어와 altJS 등을 사용하여 간단한 설명으로 코드 리딩의 부담을 줄이고 일관성을 태스크 러너로 담보한다는 것이 이상적인 것이라고 생각합니다.

프로그래머야 게으름이든.

자동화할 수 있는 것은 가능한 한 자동화해, 매일의 개발 라이프를 충실한 것으로 하고 싶습니다.