Webpack vs Gulp vs Grunt

By Stephen Afam-Osemene

はじめに

Javascript プロジェクトがますます複雑になり、タスクを自動化し、アプリケーション パフォーマンスを追跡し、いくつかのメンテナンス活動を実行する必要がある中、どのタイプの構築ツールを採用するかが非常に重要となってきている。 しかし、シングルページアプリケーションのようなプロジェクトでは、ビルドツールの出現により、繰り返し行われるタスクが自動化されました。ビルドツールの使用が必要不可欠となった今、ソフトウェア開発者は、プロジェクトに最適なものを選ぶという課題に直面しています。

この記事では、以下の機能に関して Grunt、Gulp、Webpack を比較します：

• 使いやすさ
• 人気
• 信頼性
• 拡張性

Grunt と Gulp はタスクランナー、Webpack はモジュールバンドルラーである。 タスクランナーは基本的に、開発プロセスにおけるタスクを自動化するために使用されます。 このようなタスクには、JS ファイルの圧縮、Sass ファイルのコンパイル、ファイル変更の監視、ファイルの最小化、自動プレフィックスなどがあります。モジュールバンドルラーは、それぞれが依存関係を持つアプリケーションのいくつかのモジュールを取り、それらを静的資産にバンドルします。 モジュールバンドルは、それぞれが依存関係を持ついくつかのアプリケーション モジュールを静的アセットにバンドルします。記事の終わりには、プロジェクトに使用するビルド ツールが明確になることを願っています。 タスク ランナーである Gulp と Grunt は、コードの最小化、CSS 前処理、ユニット テスト、および他のリストのような機能を提供します。

GruntやWebpackと比較すると、Gulpは非常に使いやすいツールです。 Gulp を使用して、数分でプロジェクトを立ち上げることができます。 しかし、GruntはWebpackよりも設定の手間が少ないです。

Gulpを設定するには、以下の手順で行います

• node、npm、npxがインストールされているか確認する
• GulpCLIをnpm install --global gulp-cli
• 使用してインストールし、パッケージを作成する
  • パッケージの作成は、Gulp CLIを使用する
  • npm install --global gulp-cliを使用する。devDependenciesにgulpパッケージをインストールするnpm install --save-dev gulp@next
  • タスクを書き込むgulp.jsファイルを作成するfunction defaultTask(cb) { // デフォルトタスクのコードをここに置く cb();}exports.default = defaultTask

  Gruntを使うには、以下を行う必要があります:

  • npmをnpm update -g npm
  • npmインストール -g grunt-cli
  • パッケージをセットアップする(Grunt CLIをinstall).devDependenciesが記載されているjsonファイル
  • タスクが書かれているGruntfile.jsファイルを作成します。 タスクは常にこのブロック内に記述されます:module.exports = function(grunt) { // Gruntタスクはここに入る};

  GulpとGruntのセットアップのプロセスは似ているようです。 しかし、Gulpの方が表現力が豊かで、機能を明確にしたコードを書くことができます。 GulpはNodeのストリームをベースにしているので、パイプラインが可能です。 一方、Gruntはデータ設定ファイルに依存しており、すべてのソースファイルとデスティネーションファイルを宣言する必要があります。 プロジェクトが大きくなると、Gruntの管理はさらに面倒になります。

  たとえば、Grunt を使用して Sass をコンパイルし、結果の CSS ファイルを最小化し、JS ファイルを Uglify する必要がある場合、Gruntfile.js ファイルは次のようになります。

  module.exports = function (grunt) { grunt.initConfig({ sass: { dist: { files: { 'dist-grunt/css/style.css': 'assets/scss/style.scss' } } }, cssmin: { dist: { files: { 'dist-grunt/css/styles.min.css': } } }, uglify: { dist: { files: { 'dist-grunt/js/scripts.min.js': } } }, grunt.loadNpmTasks('grunt-sass'); grunt.loadNpmTasks('grunt-contrib-cssmin'); grunt.loadNpmTasks('grunt-contrib-uglify'); grunt.registerTask('default', );};

  一方、同じプロセスを Gulp で行う場合は gulp.js はこのようになります：

  var gulp = require('gulp');var sass = require('gulp-sass');var cleanCSS = require('gulp-clean-css');var uglify = require('gulp-uglify');gulp.task('sass', function () { return gulp.src('assets/scss/**/*.scss') .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('dist-gulp/css'));});gulp.task('css', , function () { return gulp.src() .pipe(cleanCSS()) .pipe(gulp.dest('dist-gulp/css'));});gulp.task('default', );

  Webpackと比較してGulp と Gruntはともに簡単にセットアップすることができます。

  Webpackを使用するためには、次のことを行う必要があります。

  • NodejsとNpmをインストールする
  • ターミナルで。 Webpack フォルダを mkdir folder-name
  • で作成し、Nodejs プロジェクトを npm init -y
  • で初期化し、以下のファイルを作成します。 と Webpack dev server を使って、npm i --save-dev webpack@latest webpack-dev-server@latest
  • グローバルに Webpack をインストールする npm i -g webpack@latest

  • Webpackの設定を webpack.config.js ファイルに記述する。

    const webpack = require(‘webpack’);

    let config = { entry: ‘./index.js’, output: { filename: ‘output.js’ }}module.exports = config;

  上記の設定は Webpack の基本的なスタート地点です。 Webpack はさまざまな便利な機能を備えており、さらに多くのことができます。 Webpackには様々な便利な機能があり、さらに多くのことができます。 Webpackの仕組みを理解するのに時間がかかること、複数の環境に対して複数の設定を管理するのが面倒なこと、などが挙げられます。 Grunt は Gulp よりもずっと前から存在しており、多くの開発者が広く使用しています。 しかし、State of JavaScript 2018 調査によると、Webpack は Gulp や Grunt よりも上位にランクされています。

  Webpackの使用を学ぶことへの関心が高まっており、これは、その使用によって得られる幅広い可能性を見て正当化されます。

  また、Github の統計を使用すると、Webpack、Gulp、および Grunt は、それぞれ 41,000、30,000、および 11,000 以上のスターを獲得しています。 3つのツールはすべて、問題が対処され修正される可能性のある大きなコミュニティを持っています。 Gulp と Grunt については、プラグイン作者によるプラグインのメンテナンスへの依存度が高く、問題に直面したときに頼るべきドキュメントがほとんどないこともある。 その結果、作者のアップデートを待つか、自分で解決することになるのが普通です。 しかし、ほとんどの Webpack プラグインは Webpack のコアチームによってメンテナンスされ、残りは Webpack のコミュニティによって管理されています。 それらはすべて、より新しく、さらに効率的で標準化されたプラグインのためのより多くのスペースを持っています。

  一部の Grunt ユーザーは、Gulp がパイピングを可能にするため、Grunt がまもなくパイピングも可能にするアップデートがあると言われていることを説明し、Gulp を採用し始めています。 パイプは、Gulp ユーザーがタスクの出力を別の依存関係にアタッチすることを可能にし、コードをより短く、より速く作業できるようにします。

  現在、Gulp は Grunt よりも拡張性が高いようです。 Gulp は、1 つのプラグインが複数のタスクを実行できる Grunt とは対照的に、それぞれが単一のタスクを実行するプラグインを使用します。

  Webpack はプラグインとローダーの助けを借りて、そのコア機能を超えて拡張することができます。 しかし、Webpack は依存関係を持つすべてのモジュールをバンドルするので、大規模な Webpack プロジェクトでもそれほど苦労しない。

  執筆時点で、Grunt には 6,459 のプラグインがあり、Gulp には独自のプラグイン登録にリストされた 3,672 のプラグインがある。 Webpack には、ここにリストされている公式プラグインの独自のセットと、awesome-webpack で見つけることができる他のサードパーティ製プラグインのリストがあります。

  結論

  Webpack は Gulp/Grunt と Browserify を組み合わせたようなものです。 Webpack は、スケーリングを意図しているプロジェクトにはある程度必要です。 そのため、React や Angular でよく使用されます。

  Grunt と Gulp は、プロジェクトが中程度、またはかなり大規模な場合に使用される可能性があります。 JSの関数を書くのが得意ならGulpを、タスクの設定を書きたいならGruntで十分です。