gulpの便利なタスク gulpfile.jsの記述例

gulpの便利なおすすめプラグインで紹介したプラグインなどを利用したgulpの便利なタスクの実装例を紹介します。

less,js,htmlのコンパイルや軽量化、watchlivereload、エラー時の処理などを実装しています。

var gulp = require('gulp');
var $ = require('gulp-load-plugins')(); //プラグインを一括で読み込みます
var del = require('del'); //ファイルを削除するプラグイン
var runSequence = require('run-sequence'); //タスクの処理順序を制御するプラグイン
var process = require('process'); //プロセスを制御するプラグイン

var src = 'src'; //対象ファイルのパス
var dest = 'dist'; //ファイルの出力先パス

//エラー時にデスクトップ通知するファンクションを定義
var onError = function(err) {
  $.notify.onError({
    title: 'Gulp',
    subtitle: 'エラー',
    message: 'エラー: <%= error.message %>'
  })(err);
  this.emit('end');
};

//localhostを起動
gulp.task('webserver', function() {
  gulp.src(dest)
    .pipe($.webserver({
      livereload: true,
      open: true
    }));
});

//LESSをコンパイルするタスク
//LESSのコンパイル→軽量化→ベンダープレフィックスを付与→ファイル名に.minを追加
gulp.task('less', function(){
  //ファイル名の先頭に_の付くファイルはコンパイルしない(インクルードファイルなど)
  return gulp.src([src + '/less/**/*.less',
           '!' + src + '/less/**/_*.less'])
    .pipe($.plumber({errorHandler: onError}))
    .pipe($.cached('less'))
    .pipe($.less({compress: true}))
    .pipe($.autoprefixer('> 1%'))
    .pipe($.rename({suffix: '.min'}))
    .pipe(gulp.dest(dest + '/css')
  );
});

//jsファイルを軽量化するタスク
//軽量化→ファイル名に.minを追加
gulp.task('js', function(){
  return gulp.src([src + '/js/**/*.js',
          '!' + src + '/js/**/_*.js'])
    .pipe($.plumber({errorHandler: onError}))
    .pipe($.cached('js'))
    .pipe($.uglify())
    .pipe($.rename({suffix: '.min'}))
    .pipe(gulp.dest(dest + '/js')
  );
});

//画像を圧縮するタスク
gulp.task('imagemin', function(){
  return gulp.src([src + '/**/*.+(jpg|jpeg|png|gif|svg)'])
    .pipe($.plumber({errorHandler: onError}))
    .pipe($.changed(dest))
    .pipe($.imagemin({progressive: true}))
    .pipe(gulp.dest(dest)
  );
});

//nunjucksをコンパイルするタスク
//nunjucksをコンパイル→軽量化
gulp.task('nunjucks', function () {
  //コンパイル時に使用するパラメータを指定
  var params ={
      param1: 'パラメータ1',
      param2: 'パラメータ2'
    };
  $.nunjucksRender.nunjucks.configure(['src/']);
  return gulp.src([src + '/nunjucks/**/*.njk',
                  '!' + src + '/nunjucks/**/_*.njk'])
    .pipe($.cached('nunjucks'))
    .pipe($.plumber({errorHandler: onError}))
    .pipe($.data(params))
    .pipe($.nunjucksRender())
    .pipe($.minifyHtml({
      empty: true,
      conditionals: true,
      quotes: true
    }))
    .pipe(gulp.dest(dest));
});

//出力先フォルダを削除
//gulp-chachedのキャッシュをクリア
gulp.task('clean', function(){
  del(dest);
  $.cached.caches = {};
});

//デフォルトのタスク
//watchを開始
gulp.task('default', function(){

  gulp.watch(src + '/less/**/*.less',['less']);

  gulp.watch([src + '/nunjucks/**/*.njk'],['nunjucks']);

  gulp.watch(src + '/js/**/*.js',['js']);

  gulp.watch(src + '/**/*.+(jpg|jpeg|png|gif|svg)',['imagemin']);
});

//watchを停止するタスク
//プロセスを停止する
gulp.task('kill', function(){
  process.exit(0);
});

//すべてのタスクを実行するタスク
//cleanタスクをしてからless,nunjucks,js,imageminを並列で実行する
gulp.task('build', function(){
  runSequence(['clean'],
              ['less', 'nunjucks', 'js', 'imagemin']);
});

関連記事

  • watchifyとgulpで自動コンパイルと差分更新をおこなう

    今回は開発環境をさらに便利にするために、ファイルが変更されたら自動でビルドを実行し、ブラウザをリロードする処理を実装します。ファイルを変更すると自動でビルドが行われ、ブラウザが再読込されますが、ビルド...


  • Nunjucksの基本的な使い方 -extends,block,include-

    htmlのおすすめテンプレートエンジンNunjucksはとても便利なのです。extendsという機能を使えば、ヘッダやフッタの共通部分を作成しておき(ベースとなるファイル)、各ページではページごとに変...


  • npmのpackage.jsonを最新のバージョンに更新する

    package.jsonのパッケージを最新のバージョンに更新する方法を紹介します。最新のバージョンに更新するためには、package.jsonに記載されているパッケージのバージョンの記載を最新にする必...


  • less|cssに変数を使い実装を効率化する方法

    lessには変数を使うだけでなく、変数の色をX%明るくしたり、暗くしたり、透過したり、といった便利な関数も用意されています。また、要素を入れ子にして設定したり、関数を自作できるなど、とても便利な機能が...


  • gulpの便利なタスク gulpfile.jsの記述例

    gulpの便利なおすすめプラグインで紹介したプラグインなどを利用したgulpの便利なタスクの実装例を紹介します。less,js,htmlのコンパイルや軽量化、watchとlivereload、エラー時...


  • Nunjucksで独自のファンクションを実行する

    gulp-dataと組み合わせると、引数のような形で各ファイルにデータ(変数など)を渡すことができます。同じ容量で、変数ではなくファンクション自体をgulp-dataで設定すると、自分で定義したファン...


  • gulpでディレクトリ構造を維持したままdestにコピーする

    gulpで以下のようなフォルダ構成で、page.html、page2.htmlをそれぞれのフォルダ配下のフォルダにコピーする場合、普通にdestを指定するだけではうまくいかないことがあります。コピーす...


  • gulpの便利なおすすめプラグイン

    gulpを導入するとWEB開発をとても効率よく簡単に行うことができるようになります。私がよく利用している便利なプラグインを紹介します。


  • gulp-nunjucks-renderでNunjucksをgulpでコンパイルする方法

    Nunjucksをgulpでコンパイルする方法を紹介します。今回はgulp-nunjucks-renderを使用します。まずは、コマンドラインでgulp-nunjucks-renderをインストールし...


  • highlight.jsをローカルで実行してハイライトされたファイルを出力

    ホームページやブログでプログラムのコードを掲載する際に、以下のようにコードをシンタックスハイライト(色付け)をすることがあると思います。highlight.jsという便利なライブラリを使っていましたが...