カテゴリー別アーカイブ: gulp

gulp watch

gulpの場合, ファイルの変更監視はGruntのようにプラグインをインストールする必要はなく標準で利用可能です.

例として, js/sample.jsの変更を監視して, 変更があれば圧縮し, build以下に格納する場合のgulpfileは以下のようになります.

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

gulp.task('build', function() {
    gulp.src('js/sample.js')
        .pipe(uglify())
        .pipe(gulp.dest('build/'));
});

gulp.task('watch', function() {
    gulp.watch('js/sample.js', ['build']);
});

gulp タスク順序

task1 -> task2 -> task3 の順でタスクを実行したい場合, 以下のようにgulpfileを記述しても, 必ずしもその順序性は保証されません.

var gulp = require('gulp');

gulp.task('task1', function() {
    console.log('task1 done');
});

gulp.task('task2', function() {
    console.log('task2 done');
});

gulp.task('task3', function() {
    console.log('task3 done');
});

gulp.task('default', ['task1', 'task2', 'task3']);

その理由は, gulpはタスクを並列処理されるからです. 順序性を保証するには以下のように記述します.
重要なポイントは, taskメソッドの第2引数とreturn文です.

var gulp = require('gulp');

gulp.task('task1', function() {
        return console.log('task1 done');
});

gulp.task('task2', ['task1'], function() {
        return console.log('task2 done');
});

gulp.task('task3', ['task2'], function() {
        console.log('task3 done');
});

gulp.task('default', ['task3']);

gulp

gulpとはNode.jsを利用した, フロントエンドまわり (JavaScriptやCSS) のタスク自動化ツールです.

同様のツールにGruntがありますが, Gruntよりも記述が簡単なことや高速であることから, 最近ではgulpが利用されるケースが増えています.

Gruntもそうですが, gulpもNode.jsとnpmを必要とするツールですので, Node.jsとnpm がインストールされている必要があります.

また, プロジェクトのディレクトリでpackage.jsonも作成しておきます.

まずは, gulpをグローバルにインストールしておきます.

$ sudo npm install -g gulp

以下のようにバージョンが表示されればインストール完了です.

$ gulp -v
[14:37:04] CLI version 3.9.0

gulpがインストールできたら, プロジェクトのディレクトリでgulpfile.jsを作成します.
例えば, src/sample.jsをbuild/以下にコピーするタスクは以下のように記述します.

gulpfile.js

// GruntのloadNpmTasksに相当
var gulp = require('gulp');

// GruntのregisterTaskに相当
gulp.task('copy', function() {
    gulp.src('src/sample.js')
        .pipe(gulp.dest('build/'));
});

続いて, JavaScriptのファイルを圧縮するタスクを追加します.
そのためには, gulp-uglifyをインストールしておきます.

$ npm install --save-dev gulp-uglify
// GruntのloadNpmTasksに相当
var gulp   = require('gulp');
var uglify = require('gulp-uglify');

// GruntのregisterTaskに相当
gulp.task('build', function() {
    gulp.src('src/sample.js')
        .pipe(uglify())  // GruntのinitConfigに相当
        .pipe(gulp.dest('build/'));
});

さらに, 圧縮後のファイルとわかるようにファイル名を変更するタスクも追加します.
そのためには, gulp-renameをインストールしておきます.

$ npm install --save-dev gulp-uglify
// GruntのloadNpmTasksに相当
var gulp      = require('gulp');
var uglify    = require('gulp-uglify');
var rename = require('gulp-rename'); 

// GruntのregisterTaskに相当
gulp.task('build', function() {
    gulp.src('src/sample.js')
        .pipe(uglify())  // GruntのinitConfigに相当
        .pipe(rename('sample.min.js'))  // GruntのinitConfigに相当
        .pipe(gulp.dest('build/'));
});