タスクランナーって何？
簡単に言うとフロントエンドの仕事で面倒なタスクを自動的にやってくれる便利なツール
フロントエンドの面倒なタスクって何？
イメージしやすいのだと
・画像ファイルの圧縮
・SassからCSSへの変換
・CSSのminify
・JSのminify
などなど。もっと詳しく知りたかったら各プロジェクトのタスクが書いてあるファイルを見ればわかる
何が便利なの？
まずはタスクとコマンドと言う概念を知っておいたほうがいい
タスクとは、フロントエンドの面倒な「タスク」のところで書いたような作業たち
ざっくり言うと、
・ Sass, Stylus, less, ES6, 各種JSフレームワークなどのトランスパイル
・ CSSのベンダープレフィックスの自動追加
・ ポリフィルを通したトランスパイル
・ minify
・ lint等による質の担保
・ テストの自動化
などなど
コマンドとは、上記のタスクたちを動かすための命令。
例えば, npm start, npm run build, grunt serve, grunt build, gulp serve, gulp build
などなど。これにより、ブラウザ互換性に悩まされる時間を削減できたり、その他雑多なタスクを自動化することができるので作業効率のアップが測れる。
じゃあ何が不便なの？
例えば、buildされてminifyされたものを外注先に渡して、編集してもらおうとすると、minify後のものを渡すことになるので、可読性の問題などが発生する。（設定すれば、指定フォルダだけminifyしないとかは可能）
あとは、コマンドがわかれば誰でも使えるけど、各タスクが何をしているのか理解しないと、意図したアウトプットが出せない可能性とかがある。
他にも、利用していたものを、今すぐやめようとか他のタスクランナーにしようと言うのは厳しい（やめたり、乗り換えたりした時、現状通りに運用できるようにするには、もう一度開発環境等を作り直すことになる）
どんなタスクランナーがあるの？
大勢の人が使っているのは, gulp, Grunt, Webpackあたりかなと思う。
２０１７のgithubのレーティングでは,
gulp > Webpack >>> Grunt
gulpとWebpackは僅差で、Gruntはratingではgulp, Webpackの半分くらい
ダウンロード数では、
Webpack >> gulp >> Grunt
Webpack：４５８万、gulp:280万、Grunt:198万 くらい
まとめ
タスクランナーとはだいたい上で説明したようなもの。
重要なのは、タスクとして何があって、どのコマンドでどのタスクが呼ばれて動くかと言うのを把握して、使っていくことかなと思う。
これがわからなかくて、なおかつ使っていきたいのであれば、フロントエンドに一度聞いてみることを強くおすすめする。