gulp チュートリアル
ガルプを始める
サーチ…
備考
GulpはJavaScriptビルドシステムで、Gruntのようなnode.jsベースのタスクランナーです。開発プロセス中に一般的なタスクを自動化することができます。 Gulpは、より簡単でより直感的なビルドプロセスのために、 ストリームの概念とコードオーバーの設定を使用します。コードオーバーコンフィグレーションのコンセプトにより、読みやすくシンプルなタスクを作成できますが、 無駄なタスクは非常にオーバー設定されています。
バージョン
バージョン | 発売日 |
---|---|
3.4 | 2014-01-17 |
3.7 | 2014-06-01 |
3.8 | 2014年6月10-10日 |
3.9 | 2015-06-02 |
3.9.1 | 2016-02-09 |
4.0.0 | 2016年6月21日 |
インストールまたはセットアップ
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はエラーになります。
コンパイラ
あなたはでサポートされている言語のリストを見つけることができます解釈します 。新しい言語のサポートを追加したい場合は、そこにプルリクエスト/未解決の問題を送信してください。