74
78

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

gulp入門

Last updated at Posted at 2014-02-27

gulp入門

gulp_logo.jpg

アジェンダ

  • なぜなにgulp
  • 実際に使ってみる
  • おまけ
  • 参考

なぜなにgulp

gulpとは

Gruntと何が違うの?

  • (個人的主観ですが)Gruntよりも書きやすい
  • まだ対応パッケージが少ない

gulpの特徴

  • The streaming build system
  • どういうイメージかというと以下のように入力から出力までを数珠つなぎに処理していきます。
入力 >>> 処理1 >>> ... >>> 処理N >>> 出力

実際に使ってみる

事前準備

  • GithubのGetting Startを参考にします
  • どこか適当な場所にフォルダを作ってcdコマンドでそのフォルダに移動しておきます。

gulpをグローバルにインストール

-gオプションでグローバルになるのでインストール後はどこからでもgulpコマンドを呼べるようになります。

npm install -g gulp

プロジェクトにgulpをインストール

グローバルと両方必要なようです

npm install --save-dev gulp

ちなみにnpm i -D gulpでショートカットできます

package.json の作成

Getting Startだと記載されてないけど必要(のはず)

npm init

package.jsonの内容についてはGrunt入門を参考にしてもらえればと思います

これでひとまずgulpを使う環境ができました。

gulpfile.jsの作成

  • GruntでいうGruntfile.jsと同じでここにタスクを記述していきます。
  • ファイルを作成、編集していきます
vi gulpfile.js
//gulpのインポート
var gulp = require('gulp');

//この記述でタスクを登録していきます
gulp.task('default',function(){

});

タスクの登録

モジュール名は「gulp-なんとか」になるようなので「gulp connect」みたいに欲しいパッケージをググるとでてくるので

npm i -D gulp-connect

とパッケージを追加していけば大丈夫です。ここはGruntと同じですね。

jshint,uglify,connectのタスクを登録した例

//パッケージのインポート
var gulp    = require('gulp');
var connect = require('gulp-connect');
var jshint  = require('gulp-jshint');
var uglify  = require('gulp-uglify');

//connectの登録
gulp.task('server',connect.server({
    root:['dst'],
    port:8080,
    livereload:true,
    open:{
        browser:'Google Chrome'
    }
}));

//jshintとcompressのタスクをまとめて登録
gulp.task('hint&compress',function(){
    gulp.src('./src/**/*.js')
    .pipe(jshint())
    .pipe(uglify())
    .pipe(gulp.dest('dst'));
});

//タスクを全部まとめてdefaultで実行できるようにする
gulp.task('default',['hint','compress','server']);

jshintとcompressの処理が数珠つなぎで行うようになっています。

入力(gulp.src()) >>> 処理1(pipe()) >>> ... >>> 処理N(pipe()) >>> 出力(gulp.dest())

ファイルに対してタスクを振り分けることができるのでとてもわかりやすいと思います。

あとはgulpコマンドだけで実行できます

$ gulp
[gulp] Using file /Users/niko/workspace/gulp/gulp_test/gulpfile.js
[gulp] Working directory changed to /Users/niko/workspace/gulp/gulp_test
[gulp] Running 'hint&compress'...
[gulp] Finished 'hint&compress' in 6.21 ms
[gulp] Running 'server'...
[gulp] Connect LiveReload on 35729 port
[gulp] Finished 'server' in 520 ms
[gulp] Running 'default'...
[gulp] Finished 'default' in 24 μs
[gulp] Server started on 8080 port
[gulp] Opened http://localhost:8080/ in Google Chrome

以上になりますが、いかがだったでしょうか。
個人的にはnode.jsっぽく書ける上に記述量も減って好きです。

おまけ

参考

なにか気づいた点などあればコメントの方に書いてもらえればと思います。

74
78
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
74
78

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?