Gulpのローカルおよびグローバルへのインストール方法と使用例

ローカルへのGulpのインストール:
- ターミナルを開き、プロジェクトのルートディレクトリに移動します。
- 下記のコマンドを実行します:
```
npm init -y
npm install gulp --save-dev
```
グローバルへのGulpのインストール:
- ターミナルを開き、下記のコマンドを実行します:
```
npm install -g gulp
```

Gulpの基本的な使い方:

gulpfile.jsという名前のファイルをプロジェクトのルートディレクトリに作成します。

以下は、Gulpの基本的なタスクの例です:

const gulp = require('gulp');

// タスクの定義
gulp.task('hello', function() {
console.log('Hello, Gulp!');
});

// デフォルトタスクの定義
gulp.task('default', gulp.series('hello'));

Gulpプラグインの使用:

Gulpは多くのプラグインをサポートしており、これらを使用してビルドプロセスをカスタマイズすることができます。以下は、プラグインの使用例です:

const gulp = require('gulp');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');

gulp.task('scripts', function() {
return gulp.src('src/js/*.js')
 .pipe(concat('bundle.js'))
 .pipe(uglify())
 .pipe(gulp.dest('dist/js'));
});

gulp.task('default', gulp.series('scripts'));

Gulpの監視タスク:
- ファイルの変更を監視し、自動的にタスクを実行することもできます。以下は、ファイルの変更を監視して自動的にビルドするタスクの例です:
```
const gulp = require('gulp');

gulp.task('watch', function() {
gulp.watch('src/js/*.js', gulp.series('scripts'));
});

gulp.task('default', gulp.series('watch'));
```

以上が、Gulpのローカルおよびグローバルへのインストール方法と使用例の概要です。これらのコード例をベースに、さまざまなビルドタスクを組み合わせて効率的なフロントエンド開発ワークフローを構築することができます。