Gulp-combining-tasks

Gulp-タスクの結合

タスクは、Gulpを構成するためのモジュール式アプローチを可能にします。 依存関係ごとにタスクを作成する必要があり、他のプラグインを見つけてインストールするときに追加します。 Gulpタスクには次の構造があります-

gulp.task('task-name', function() {
  //do stuff here
});

ここで、「task-name」は文字列名で、「function（）」はタスクを実行します。 「gulp.task」は、関数を名前内のタスクとして登録し、他のタスクへの依存関係を指定します。

プラグインのインストール

*minify-css* という1つのプラグインを使用して、すべてのCSSスクリプトをマージおよび縮小します。 次のコマンドに示すように、npmを使用してインストールすることができます-

npm install gulp-minify-css --save-dev

「gulp-minify-cssプラグイン」を使用するには、次のコマンドに示すように「gulp-autoprefixer」という別のプラグインをインストールする必要があります-

npm install gulp-autoprefixer --save-dev

CSSファイルを連結するには、次のコマンドに示すようにgulp-concatをインストールします-

npm install gulp-concat --save-dev

プラグインのインストール後、次のように構成ファイルに依存関係を記述する必要があります-

var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var concat = require('gulp-concat');

Gulpファイルへのタスクの追加

プラグインをインストールするときに追加する、依存関係ごとにタスクを作成する必要があります。 Gulpタスクには次の構造があります-

gulp.task('styles', function() {
   gulp.src(['src/styles/*.css'])
   .pipe(concat('styles.css'))
   .pipe(autoprefix('last 2 versions'))
   .pipe(minifyCSS())
   .pipe(gulp.dest('build/styles/'));
});

「concat」プラグインはCSSファイルを連結し、「autoprefix」プラグインはすべてのブラウザーの現在および以前のバージョンを示します。 srcフォルダーからすべてのCSSスクリプトを縮小し、ターゲットディレクトリを表す引数を指定して「dest」メソッドを呼び出して、ビルドフォルダーにコピーします。

タスクを実行するには、プロジェクトディレクトリで次のコマンドを使用します-

gulp styles

同様に、我々は「gulp-imagemin」と呼ばれる別のプラグインを使用して、次のコマンドを使用してインストールできる画像ファイルを圧縮します-

npm install gulp-imagemin --save-dev

次のコマンドを使用して、構成ファイルに依存関係を追加できます-

var imagemin = require('gulp-imagemin');

次のコードに示すように、上記で定義した依存関係のタスクを作成できます。

gulp.task('imagemin', function() {
   var img_src = 'src/images/**/*', img_dest = 'build/images';

   gulp.src(img_src)
   .pipe(changed(img_dest))
   .pipe(imagemin())
   .pipe(gulp.dest(img_dest));
});

画像は「src/images/* / 」にあり、img_srcobjectに保存されます。 「imagemin」コンストラクターによって作成された他の関数にパイプされます。 srcフォルダーから画像を圧縮し、ターゲットディレクトリを表す引数を指定して「dest」メソッドを呼び出すことにより、ビルドフォルダーにコピーします。

タスクを実行するには、プロジェクトディレクトリで次のコマンドを使用します-

gulp imagemin

複数のタスクを組み合わせる

次のコードに示すように、構成ファイルにデフォルトのタスクを作成することにより、一度に複数のタスクを実行できます-

gulp.task('default', ['imagemin', 'styles'], function() {

});

Gulpファイルがセットアップされ、実行する準備ができました。 プロジェクトディレクトリで次のコマンドを実行して、上記の結合タスクを実行します-

gulp

上記のコマンドを使用してタスクを実行すると、コマンドプロンプトに次の結果が表示されます-

C:\work>gulp
[16:08:51] Using gulpfile C:\work\gulpfile.js
[16:08:51] Starting 'imagemin'...
[16:08:51] Finished 'imagemin' after 20 ms
[16:08:51] Starting 'styles'...
[16:08:51] Finished 'styles' after 13 ms
[16:08:51] Starting 'default'...
[16:08:51] Finished 'default' after 6.13 ms
[16:08:51] gulp-imagemin: Minified 0 images