38
36

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導入手順

Posted at

node.jsのインストール

node.jsにて開発されているので、まだインストールしていない場合はインストールが必要です。

node.js

gulpのインストール(グローバル)

コマンドラインにて作業を進めます。

sudo npm install -g gulp

※npmバージョンが古いとエラーが出る場合があるようなので最新にしておきましょう

sudo npm install -g npm

gulpがインストールできたか確認のためバージョン情報を見てみます。

gulp -v

下記のようになっていればOKです。
※ここではまだLocal version undefinedで問題ないです

CLI version 3.8.7
Local version undefined

試用

とりあえず使えるか試してみます。
まずは、プロジェクトフォルダに移動してください。

package.json作成

Gruntと同様、package.jsonを作成します。

npm init

下記のような対話形式で進んでいくので必要部分だけ入力します。

name: (gulp)
version: (0.0.0)
description: 
entry point: (gulpfile.js)
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /Users/username/gulp_project_foldar/package.json:

{
  "name": "test",
  "version": "0.0.0",
  "description": "test data",
  "main": "gulpfile.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this ok? (yes)

gulpのインストール(ローカル)

gulpはグローバルだけでなくローカル(プロジェクト毎)にもインストールする必要があります。
そのあたりの話は、gulpのアプローチ "なぜグローバルとローカルにインストールが必要なのか"あたりに書いてあるので興味が有る場合は参考にするといいかと思います。
下記を実行します。

sudo npm install gulp --save-dev

ここでまたバージョンを確認すると、下記のようにローカルバージョンも反映されているかと思います。

gulp -v
CLI version 3.8.7
Local version 3.8.7

Hello World!してみる

簡易な動作確認として、ここでは「Hello World!」のみしてみます。

gulpfile.jsの作成

gulpfile.jsは、gulpのタスクを定義するファイルになります。
GruntでいうGruntfile.jsにあたります。
gulpfile.jsを作成して、Hello World用に下記のコードを記入して保存します。

var gulp = require('gulp');
 
gulp.task('default', function() {
    console.log('Hello Gulp!!');
});

gulp実行

「gulp タスク名」で実行できますので、

gulp default

もしくは

gulp

にで実行できます。
※defaultタスクの場合は、gulpだけでも実行されます

コマンドライン上に、「Hello Gulp!!」が表示されたら成功です。

※参考サイト
タスクランナーgulp入門 to-R

38
36
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
38
36

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?