初Qiitaでございます。ドキドキ。
フロントエンドエンジニアになったので、うわさに聞くタスクランナーなるものに入門しようと色々検討しております。
調べている感じでは以下の二強なようなので、今更感が漂う中ご紹介したいと思います。
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などを使い、シンプルな記述でコードリーディングの負担を軽減し、一貫性をタスクランナーで担保するというのが理想的なのではと思います。
自動化できるものはなるべく自動化して、日々の開発ライフを充実したものにしたいと思います。