gulp チュートリアル
ガルプを始める

備考

バージョン

インストールまたはセットアップ

1. Node.jsとNPMをインストールします。

Gulpには、ノードのパッケージマネージャであるNode.jsとNPMが必要です。ほとんどのインストーラにはNode.jsを含むNPMが含まれています。 インストールのドキュメントを参照するか、すでにインストールされていることを端末で次のコマンドを実行して確認してください。

npm -v
// will return NPM version or error saying command not found

2. gulpをグローバルにインストールする：

以前にnpm rm --global gulpバージョンをグローバルにインストールしている場合は、 npm rm --global gulpを実行して、古いバージョンがnpm rm --global gulp -cliと衝突していないことを確認してください。

$ npm install --global gulp-cli

3.プロジェクトディレクトリを初期化します。

$ npm init

4.プロジェクトdevDependenciesにgulpをインストールします。

$ npm install --save-dev gulp

5.プロジェクトのルートにgulpfile.jsを作成します。

var gulp = require('gulp');

gulp.task('default', function() {
  // place code for your default task here
});

6. gulpを実行します。

$ gulp

デフォルトタスクは実行され、何もしません。

個々のタスクを実行するには、 gulp <task> <othertask>ます。

タスクの依存関係

gulp.task() 2番目のパラメータを渡すことで、タスクを連続して実行できます。

このパラメータは、タスクを実行する前に実行および完了されるタスクの配列です。

var gulp = require('gulp');

gulp.task('one', function() {
   // compile sass css
});

gulp.task('two', function() {
   // compile coffeescript
});

// task three will execute only after tasks one and two have been completed
// note that task one and two run in parallel and order is not guaranteed
gulp.task('three', ['one', 'two'], function() {
   // concat css and js
});

// task four will execute only after task three is completed
gulp.task('four', ['three'], function() {
   // save bundle to dist folder
});

また、依存関係タスクの束だけを実行する場合は、この関数を省略することもできます。

gulp.task('build', ['array', 'of', 'task', 'names']);

注：タスクは並行して（すべて一度に）実行されるため、タスクが開始/終了すると想定しないでください。 gulp.series() v4を起動するには、依存関係タスクの実行順序が重要な場合はgulp.series()を使用する必要があります。

gulpを使用してサブフォルダ内のファイルを連結する

var gulp = require('gulp'); 

// include plug-ins
var uglify = require('gulp-uglify'),
    concat = require('gulp-concat');

// Minified file
gulp.task('packjsMin', function() {
   return gulp.src('node_modules/angular/*.js')
      .pipe(concat('script.js'))
      .pipe(uglify())
      .pipe(gulp.dest('Scripts'));
});

//Not minified file
gulp.task('packjs', function () {
    return gulp.src('node_modules/angular/*.js')
      .pipe(concat('allPackages.js'))
      .pipe(gulp.dest('Scripts'));
});

gulp CLIドキュメント

フラグ

ガルプには知るべきフラグはほとんどありません。他のすべてのフラグは、必要に応じてタスクが使用するためのフラグです。

• -vまたは--versionはグローバルおよびローカルのgulpのバージョンを表示します
• --require <module path>は、gulpfileを実行する前にモジュールが必要です。これは蒸散器に有用であるが、他の用途もある。複数の--requireフラグを使うことができます
• --gulpfile <gulpfile path>は、 --gulpfile <gulpfile path>を手動で設定します。複数のgulpファイルがある場合に便利です。これはCWDをgulpfileディレクトリにも設定します
• --cwd <dir path>は手動でCWDを設定します。 gulpfileの検索と、すべての必要性の相対性はここからです
• -Tまたは--tasksは、ロードされたgulpfileのタスク依存ツリーを表示します
• --tasks-simpleは、ロードされたgulpfileのタスクのプレーンテキストリストを表示します
• --colorは、色のサポートが検出されなくても、色を表示するように--colorと--colorプラグインを強制します
• --no-colorは、色のサポートが検出されても、gulpおよびgulpプラグインに色を表示させません
• --silentはすべてのgulpログを無効にする

CLIは、起動した元のcwdであるprocess.env.INIT_CWDを追加します。

タスク固有のフラグ

タスク固有のフラグを追加する方法については、このStackOverflowリンクを参照してください。

タスク

gulp <task> <othertask>実行すると、タスクを実行できます。 gulpを実行するだけで、登録したdefaultタスクが実行されdefault 。 defaultタスクがないdefault gulpはエラーになります。

コンパイラ

あなたはでサポートされている言語のリストを見つけることができます解釈します 。新しい言語のサポートを追加したい場合は、そこにプルリクエスト/未解決の問題を送信してください。