Help us understand the problem. What is going on with this article?

gulp入門

More than 5 years have passed since last update.

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っぽく書ける上に記述量も減って好きです。

おまけ

参考

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

svartalfheim
渋谷でiOS(Swift, Objective-C)書いたりしてます!
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした