gulpってなんなん？

お題にも記載していますが、タスクランナーの一つで、面倒な作業の自動化するためのものです。
npmにプラグインが多々上がっているので、ややこしいものは探せばあるかもしれません。

前提

nodeがインストールされていること。
これを書いた際は、node v8.1.2です。

gulp インストール

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

npm install --save-dev gulp

公式では、gulpコマンドを使用するために、グローバルにgulp-cliをインストールするようになっていますが、グローバルを汚したくないのでインストールしません。
npm runはローカルにインストールしたパッケージにパスを通してくれるので、gulpの実行をnpm runを経由して行います。

プラグインインストール

今回はjsのminifyをしてみるので、以下をインストールします。

gulp-uglify(github)

npm install --save-dev gulp-uglify

タスクの作成

プロジェクトルートにgulpfile.jsを作成し以下を記述します。
タスクの内容は、jsフォルダ内の.jsファイルをminifyして./dist/jsに出力です。

'use strict';

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

// minify
gulp.task('minify-js', function() {
    return gulp.src("./js/*.js")
        .pipe(uglify())
        .pipe(gulp.dest('./dist/js'));
});

npm script追加

package.jsonのscriptsに以下を追加します。
gulp-cliをグローバルにインストールしている場合は、この追加は不要です。gulp minify-jsをターミナルで実行すれば動きます。

"scripts": {
"minify": "gulp minify-js"
},

タスク実行

実行は、package.jsonに記載したscriptを実行するだけです。

npm run minify

タスクランナーのgulp