gulpは軽量な自動化ビルドツールで、コードの圧縮や結合など、退屈で反復的なタスクを自動的に実行するのに役立ち、大幅な時間短縮が可能です。履歴書を作成する過程でlessを使用する必要があり、lessのコンパイルが必要だったため、このツールを簡単に学習しました。

Gulp.jsのインストール#

gulpはnodeをベースに構築されているため、まずnodeをインストールする必要があります。nodeのインストール後、npmを使ってgulpをインストールします。

    npm install -g gulp

プロジェクトでの設定#

Lessをコンパイルする必要があるため、まずGulpのLessプラグインをインストールします。

npm install --save-dev gulp gulp-less

コマンドの--save-devは、インストールしたパッケージをpackage.jsonに追加します。

"dependencies": {
    "gulp": "^3.8.10",
    "gulp-livereload": "^3.4.0",
    "gulp-less": "^2.0.1",
    "less-plugin-autoprefix": "^1.3.0"
},

プロジェクトにこのファイルがない場合、npm initコマンドで作成できます。 プロジェクトのルートディレクトリにGulpfile.jsファイルを作成します。このファイルは、使用するプラグインや実行するタスクなどを定義するために使われます。 履歴書作成の過程で、bowerで管理されている2つの依存ライブラリを特定のフォルダにコピーし、同時にLessファイルを監視・コンパイルする必要がありました。そのため、設定ファイルは以下のようになります。

var gulp = require("gulp"),
  less = require("gulp-less"); //引入less插件

// 定义 less 任务
gulp.task("less", function () {
  gulp.src("./less/main.less").pipe(less()).pipe(gulp.dest("./style"));
});
//复制文件到特定目录
gulp.task("depends", function () {
  gulp
    .src([
      "./bower_components/pagepiling.js/jquery.pagepiling.min.js",
      "./bower_components/pagepiling.js/jquery.pagepiling.css",
    ])
    .pipe(gulp.dest("./depends"));
});
//监控less文件，一旦有更改，就执行less编译任务
gulp.task("watch", function () {
  gulp.watch("less/*.less", ["less"]);
});
//默认任务
gulp.task("default", ["less", "depends", "watch"]);

各要素の説明：

• gulp.task()はタスクを定義する関数で、タスク名とコールバック関数の2つの引数が必要です。
• gulp.src()はファイルを読み込む関数で、実行したいファイルのパスを読み込みます。
• .pipe()は読み込んだファイルを次の実行関数に渡します。例えば、.pipe(less())はgulp.src('./less/main.less')で読み込んだファイルをless()関数に渡します。
• gulp.dest()は出力関数で、ファイルを指定されたディレクトリに出力します。
• gulp.watch()は監視関数で、指定されたファイルに変更があった場合、対応する関数を実行します。