Hitasura JS

ただひたすらJavaScriptのコードを載せるためのブログ。たまにHTML、CSS、PHPも。

トップ > gulp > 変更があったファイルを処理するGulpパッケージ「gulp-changed」（Gulpの使い方・第２回）

変更があったファイルを処理するGulpパッケージ「gulp-changed」（Gulpの使い方・第２回）

gulp 便利ツール

はい、前回の続きです。

hitasurajs.hatenablog.jp

今の所、こんな感じのディレクトリ構造になっています。

project/
　　├src/
　　│　└sass/
　　└deploy/
　　　　└ css/

前回はGulpを使ってSassを自動コンパイルするところまでやりました。

Sassに限らずファイルを監視するのは後々便利になるので、コンパイルが不要なファイルも監視下においておきましょう。

そして、監視下にあるファイルが変更された時、変更されたファイルだけを移動させるのが「gulp-changed」パッケージです。

プロジェクトフォルダ内で

npm install gulp-changed --save-dev

と打ってインストールしましょう。

んで、監視下に置くフォルダを作成します。とりあえずpublicフォルダとしておきましょう。

フォルダを作成したら、

前回同様に requireで変数に代入します。gulp-changedなのでchangedという変数名にしておきましょう。

var gulp = require('gulp'); //ここは前回のやつ
var sass = require('gulp-sass');　//ここは前回のやつ
var changed = require('gulp-changed');

そして、staticというタスクを作ります。staticじゃなくてもいいんですが、staticとしておきましょう。

// publicフォルダで変更があったファイルをdeployフォルダに複製する
gulp.task('static', function(){
  gulp.src('./public/**/*')
    .pipe(changed('./deploy'))
    .pipe(gulp.dest('./deploy'));
});

gulpfile.js全体だと今こんな感じ

'use strict';

var gulp = require('gulp');
var sass = require('gulp-sass');
var changed = require('gulp-changed');

// sassというタスクを定義していきます。
gulp.task('sass', function(){
  gulp.src('./src/sass/**/*.scss')
    .pipe(sass({outputStyle: 'expanded'}))
    .pipe(gulp.dest('./deploy/css/'));
});

// publicフォルダで変更があったファイルをdeployフォルダに複製する
gulp.task('static', function(){
  gulp.src('./public/**/*')
    .pipe(changed('./deploy'))
    .pipe(gulp.dest('./deploy'));
});

// watchを使うとファイルの変更を監視できます。
gulp.task('watch', function(){
  gulp.watch('./src/sass/**/*.scss', ['sass']);
});

// defaultは「gulp」コマンドのみで動くタスクを設定します。
gulp.task('default',['sass'],function(){
  gulp.start('watch');
});

では、試しにpublicフォルダにindex.htmlファイルを作ってためしてみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Gulpのテスト</title>
</head>
<body>
  
</body>
</html>

はい、これをindex.htmlでpublic内に保存します。

それでは、staticを走らせてみましょう。

gulp static

deployフォルダを開くとpublicの中身が複製されているのが分かります。

このように、コンパイルが不要なファイルをまとめておいて、それをdeployフォルダに複製するようにしておきましょう。

自動化する

こちらもwatchで監視させて、変更があれば自動でstaticの処理が走るようにしましょう。

前回書いたwatchの処理。

// watchを使うとファイルの変更を監視できます。
gulp.task('watch', function(){
  gulp.watch('./src/sass/**/*.scss', ['sass']);
});

このコードに追記します。

// watchを使うとファイルの変更を監視できます。
gulp.task('watch', function(){
  gulp.watch('./src/sass/**/*.scss', ['sass']);
  gulp.watch('./public/**/*', ['static']);
});

コードの意味としてはpublicフォルダを監視して、変更や新規作成があればstaticの処理を実行する。という感じです。

// defaultは「gulp」コマンドのみで動くタスクを設定します。
gulp.task('default',['sass','static'],function(){
  gulp.start('watch');
});

defaultに追加しておけば、「gulp」コマンドでstaticが最初に実行されるようになります。上のwatchと合わせて追記しておきましょう。

コンパイルが不要なフォルダも別フォルダで開発する

なぜ、deployフォルダではなくpublicフォルダで開発をするか。

これはこの後紹介するBrowserSyncを知れば納得できるでしょう。

続く…