このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2015.07.06

Grunt.jsからgulp.jsに移行したら捗った件。 gulp移行のまとめ

どもどもです。

またまた久々な気が。。

クライアントツールはずっと、Gruntを利用していたのですが、Gruntで使っているプラグインもほぼほぼGulpで揃っている様なので、Gulpに移行したところ、コンパイルが早い早い。

今回はそんな訳で、Gulpの利用しているモジュールなどをまとめてみました。

Gulp

http://gulpjs.com/

冒頭で、「Gulpに移行したら捗った。」と行った件ですが、Gruntではタスクが直列的に実行されるのですが、Gukpでは並列的にタスクを実行してくれるので、一つのタスクが完了しなくても別のタスクが走ってくれます。

そのため、処理が早いといったところです。それ故に、タスクの処理順が大事な場合は直列に実行させたりと考慮しなければいけません。

なにはともあれインストール。

インストール

グローバルにインストール
sudo npm install gulp -g

何はともあれ、PC全体でgulpが使えるように、グローバルにgulpをインストール。

パスワード聞かれますので、設定しているmacのパスワード入力。

package.json作成
npm init

(npm がインストールされている前提の進めさせていただきます。)

プロジェクトを管理するディレクトリに移動し、ターミナルで 上記のnpm init コマンドを入力すると、

versionだったり、descriptionといろいろ聞かれますが、とりあえずデフォルトでいきますので全部リターンで。

といった感じになり、package.jsonが生成されます。

こちらでこちらで、nodeのモジュールを管理していきます。

それでは早速、Gulpのモジュールを追加していきましょう。

プロジェクト単位にモジュール追加

npm install gulp --save-dev

同ディレクトリで、上記のコマンドを入力すると、インストールが始まりダっーとターミナルに処理が表示されます。

–save-dev を付けることによって package.json にパッケージの記述が自動的に追加されます。

package.json にgulpが追加されているのが確認できます。

gulpfile.js を作成

タスクを記述していく「gulpfile.js」を作成します。

gulpfile.js

var gulp = require("gulp");

Gulpのパッケージを利用する際は、基本 require(“パッケージ名”); で利用していきます。

タスク設定

タスクの記述にも Gruntとの違いがあります。

gruntだと、

grunt.initConfig({
    watch: { 
        options: { 
            event: ['added', 'changed', 'deleted'] 
        },
        js: { 
            files: jsFiles, tasks: ['copy:js'] 
        }, 
        ect: { 
            files: ectFiles, tasks: ['copy:ect', 'exec:ect2tpl'] 
        }
    }
...
});

といった感じで、タスクを追加したり、処理を増やしたりすと、ネストが深くなって読みにくい傾向がありました。

Gulpでは、gulp.task(‘タスク名’, function () {}); となり、以下のように

gulp.task('copy-js', function () { 
    gulp.src([ SOURCE_DIR + '/js/' + '**/*.js', '!' + SOURCE_DIR + '/js/' + '**/libs/*.js' ])
        .pipe(gulp.dest( WORK_DIR + '/js/' ));
});

gulp.srcでパスの指定を行い、pipeで処理を追加していく形となります。

など、基本的な使い方は検索すると他の方などが書かれていたりするので、この辺にしておいて

GruntからGulpに移行するのに当たって最低限フロントで欲しかったモジュールと、Gruntとの違いにフューチャーしていきます。

使用するモジュール

Gruntで使っていたモジュールから、最低限ほしいなといったモジュール一覧。

gulppath:ファイルパスを扱うユーティリティ

gulp-compass:Gulpでcompassを利用

gulp-cssmin:cssを圧縮

gulp-connect:開発サーバー用(gulp-expressを利用するので要らない)

gulp-watch:ファイルの変更を監視する

gulp-clean:ファイルの削除

gulp-uglify:javascript圧縮

gulp-concat:javascriptファイル結合

gulp-tsc:TypeScriptを利用

gulp-tsd:TypeScript型定義ファイルインストール

gulp-bower:フロントエンドライブラリを管理、インストール

gulp-exec:シェルコマンドを実行させる用

gulp-express:express serverを実行

gulp-plumber:エラーに寄るタスク強制終了回避

gulp-strip-debug:JavaScript console log削除

del:ディレクトリ削除

run-sequence:タスク直列実行

といった感じです。

Gruntで利用していたモジュールもGulpでもほとんど揃っています。

それでは、上記のモジュールのinstallと使い方サンプル一覧となります。

パッケージ

path

path

ファイルパスを扱うユーティリティのモジュール。

install

npm install --save path

※主にexpress serverで使用

gulp-compass

gulp-compass

Gulpでcompassを利用する際のモジュール。

install

npm install gulp-compass --save-dev

例:

gulp.task('compass', function() {
    gulp.src( 読み込みファイル ) 
        .pipe(plumber())
        .pipe(compass({
            style: 'expanded',
            css: WORK_DIR + '/css', // 書き出し先
            sass: SOURCE_DIR + '/scss' // 読み込み先
            })
        );
});
gulp-cssmin

gulp-cssmin

CSSを圧縮するに利用するモジュール。

install

npm install --save-dev gulp-cssmin

例:

gulp.task('default', function () {
    gulp.src('src/**/*.css')
        .pipe(cssmin())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist'));
});
gulp-watch

gulp-watch

ファイルの変更を監視する際に利用するモジュール。

install

npm install --save-dev gulp-watch

例:

gulp.task('stream', function () {
    gulp.src('css/**/*.css')
        .pipe(watch('css/**/*.css'))
        .pipe(gulp.dest('build'));
});
gulp-clean

gulp-clean

ファイルを削除する際に利用するモジュール。

install

npm install --save-dev gulp-clean

例:

gulp.task('default', function () {
    return gulp.src('app/tmp', {read: false})
        .pipe(clean());
});
gulp-uglify

gulp-uglify

javascriptを圧縮する際に利用するモジュール。

install

npm install --save-dev gulp-uglify

例:

gulp.task('compress', function() {
  return gulp.src('lib/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist'));
});
gulp-concat

gulp-concat

JavaScriptファイルなど複数ファイルを結合する際に利用するモジュール。

install

npm install --save-dev gulp-concat
gulp.task('scripts', function() {
  return gulp.src('./lib/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('./dist/'));
});
gulp-tsc

gulp-tsc

GulpでTypeScriptを利用する際に使用するモジュール。

install

npm install --save-dev gulp-tsc

例:

gulp.task('compile', function(){
  gulp.src(['src/**/*.ts'])
    .pipe(typescript())
    .pipe(gulp.dest('dest/'))
});
gulp-tsd

gulp-tsd

TypeScriptの型定義ファイルを扱う際に利用するモジュール。

install

npm install --save-dev gulp-tsd

例:

gulp.task('tsd', function () {
    return gulp.src('./gulp_tsd.json').pipe(tsd());
});
gulp-bower

gulp-bower

Bowerで管理しているパッケージをGulpのタスクで利用する際に使うモジュール。

install

npm install --save-dev gulp-bower

例:

gulp.task('bower', function() {
  return bower()
    .pipe(gulp.dest('lib/'))
});
gulp-exec

gulp-exec

shellのコマンドを実行する際に利用するモジュール。

install

npm install --save-dev gulp-exec

例:

gulp.task('exec', function() { 
    gulp.src('./') .pipe(exec('node <%= file.path %>'));
});

unixのコマンドも実行可能なので、以下の様な感じでタスクに追加すると

gulp.task("exec", function(){
    gulp.src("./")
        .pipe(exec("say hello world!"));
});

タスクを実行すると「ハロー ワールド!」と喋ってくれます。w

gulp-express

gulp-express

install

npm install --save-dev gulp-express

Gulpで expressサーバーを利用する際に使うモジュール。

例:

gulp.task('server', function() {
    server.run(['server.js']);
});
gulp-plumber

gulp-plumber

Stream中に起こるのエラーが原因でタスクが強制停止することを防止するモジュール。

install

npm install --save-dev gulp-plumber

例:

gulp.task('compass', function() {
    gulp.src( 読み込みファイル ) 
        .pipe(plumber())
        .pipe(compass({
            style: 'expanded',
            css: WORK_DIR + '/css',
            sass: SOURCE_DIR + '/scss'
        })
    );
});

GulpはGruntと違って、エラーが起きると強制的にタスクが終了することがあります。

compassのエラーでタスクが終了してしまっていたら作業にもならないので、上記に様に.pipe(plumber())を挿入します。

TypeScript等も同様の形で.pipeで接続すると良いかと思います。

gulp-strip-debug

gulp-strip-debug

JavaScriptのコンソール等を削除する際に利用するモジュール。

install

npm install --save-dev gulp-strip-debug

例:

gulp.task('default', function () {
    return gulp.src('src/app.js')
        .pipe(stripDebug())
        .pipe(gulp.dest('dist'));
});
del

del

ディレクトリを削除する際に利用するモジュール。

install

npm install --save del

例:

gulp.task('clean', function(cb) {
    del([RELEASE_DIR + '/*'], {force: true}, cb);
});

ここで、ちょっとつまずきました。

grunt-contrib-cleanの様に、gulp-cleanでディレクトリごと、

ざくっと削除できるのかと思いきやどうやら出来ないみたいで、

こちらのモジュールを利用しました。

あと、ディレクトの forceオプション trueの設定をしないとエラーで処理できなかったので、

{force: true}, を付与しています。

run-sequence

run-sequence

タスクの順序を指定する際に利用するモジュール。

install

npm install --save-dev run-sequence

例:

gulp.task('build', function(callback) {
  runSequence('build-clean',
              ['build-scripts', 'build-styles'],
              'build-html',
              callback);
});

冒頭で書いた通り、Gulpは並列でタスクを処理するのでタスク実行順序は保証されません。

callbackでタスクを処理させる方法もありますが、runSequenceを利用することによって容易にタスクの順序指定(直列)する事ができます。

また、runSequence内で、並列にタスクを実行させたい場合はカンマ区切りの配列で記述する事で並列処理できます ([‘build-scripts’, ‘build-styles’],)

上記では、「build-clean」終了後、並列で’build-scripts’, ‘build-styles’タスクが実行され、2つのタスクが終了後、’build-htm’が処理されます。

と、利用しているGulpのモジュールをまとめてみました。

Gruntでは、TypeScriptのファイルが増えるとコンパイルにかなり時間かかってしまっていたのですが、Gulpは気にならないくらい、かなり早くタスクを処理してくれて非常に効率が良いです!

Gruntも並列で使えるやらなんやらだったのですが、どうなんですかね。

ではでは。またまた。

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。