gulpについて考えてみた

はじめてのgulp！

gulpとは

gulp.js 公式サイト gulpはNode.jsをベースとしたビルドシステムヘルパーで、こいつを使えばさまざまな作業を自動化することができます。 GruntはJSONで記述するが、glupはjsで記述し、Gruntでは基本的に同期処理であるためタスクは1つずつ実行されるがGulpでは基本的に非同期処理なのでタスクが高速に処理できる。 これを使ってTypeScriptのコンパイルやCSSのminifyやconcatやファイルのコピーなどをすることができる！これを自動化することにより、作業を効率化させることができる。

導入

(1) node.jsをinstall

(2) package.jsonの作成 以下のコマンドでインストールしたパッケージを管理するできるpackage.jsonを作成

$ npm init -y

package.jsonに以下を記述しておくと"npm run gulp"などが使えて便利

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.0"
  },
  "scripts": {
    "gulp": "gulp",
    "start": "gulp"
  }
}

(3) gulpのinstall

$ npm install --save-dev gulp

(4) 使用するプラグインをinstall

$ npm install --save-dev プラグイン名

CSSをminifyしてくれるgulp-minify-cssやファイルを１つにまとめるgulp-concatなど使用するプラグインをインストールします。 するとすると"node_modules"というフォルダのに「gulp-minify-css」や「gulp-concat」などが作成される。

実際にgulpfile.jsを記述してみる！

今回は例にgulp-minify-cssを使ってみる CSSを圧縮できる！便利だね。

const gulp = require('gulp');
const minifycss = require('gulp-minify-css');

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

まずは変数にインストールしたプラグインを登録！ "minify-css"というのがタスク名。srcが対象のファイル。

ここでnpm run gulpを実行すると "dist"というディレクトリが作成され、その中にminifyされたcssファイルが出力される。 gulp.dest("dist/css/")」この部分。dest("保存先フォルダ")となっています。 pipe() 1つ一つの処理をつなげることができて何個でもつなげることができる！！ これでminifyができた！！

便利なことと実際に困ったこと

複数のものをコピーするとき

複数ディレクトリの構造を維持してコピーするときは以下のようになる。

var gulp = require( 'gulp' );
 
gulp.task( 'copy', function() {
    gulp.src( 'src/*.html'  ).pipe( gulp.dest( 'dest'     ) );
    gulp.src( 'src/css/**'  ).pipe( gulp.dest( 'dest/css' ) );
    gulp.src( 'src/js/*.js' ).pipe( gulp.dest( 'dest/js'  ) );
} );

これだとgulp.destが冗長。gulp.srcは配列で複数指定可能でgulp.destは単一。

var gulp = require( 'gulp' );
 
gulp.task( 'copy', function() {
    return gulp.src(
        [ 'src/*.html', 'src/css/**', 'src/js/*.js' ],
        { base: 'src' }
    )
    .pipe( gulp.dest( 'dest' ) );
} );

baseを使いベースとしたいディレクトリを指定するとgulp.dest上で構成を再現。srcでのディレクトリ構造を維持してくれる。便利だ。 こいつは実装していて、srcに複数のものを入れるのどーやるんだろーって迷った

watch機能

watch機能で使用するのがwatch()で、「監視するファイル」に変更があった場合に設定された「処理」が実行される！

gulp.watch('監視するファイル', 処理)

と記述する。

javascriptのタスクを'js', CSSのタスクを'css'などとまとめておき

gulp.watch("./*.css`, gulp.task('css')");
gulp.watch("./*.ts`, gulp.task('js')");

をgulpfile.jsに記述しておくと cssやtypescriptなどに変更があったときに、自動でそれに関するタスクを行ってくれる。 こいつも便利なので、導入しておきたいですね。