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

gulp導入 ~初期設定(mac)~

More than 3 years have passed since last update.

はじめに

はじめまして!

株式会社GizumoというできたてほやほやのIT会社で働かせてもらっているozima shinsukeです!

この記事はその会社の社員が書いているGizumoエンジニア Advent Calendar 2015の14日目の記事です。

今回はタイトルの通りgulpってなに????という話をしたいと思います!
(何を今更ってツッコミは華麗にスルーします)

gulpって???

Node.jsのStreamAPIを利用したビルドシステムです。

ってこんな説明でわかるかーーい!!
なのでしっかりとググりました。

gulpとは、Node.jsを使ったタスク自動化ツールです。 CSSやJavaScriptファイルの圧縮や結合、Sassのコンパイルなんかも自動化できるので、「フロントエンドしかいじらないよ!」 というWebデザイナーさんでも、使えるようになると作業がかなりはかどりますよ。
www.webcreatorbox.com/tech/gulp/

いやーさすがグーグルさん!だいぶわかりやすくなりましたね!!

要はさまざまな作業を自動化してくれる便利な奴ってことですね(小並感)

では実際に動かすところまでやってみましょう!

環境構築

gulpはNode.jsのパッケージの一つなので、まずNode.jsをインストールする必要があります。

Node.jsをインストール

いまアツいJavaScript!ゼロから始めるNode.js入門〜5分で環境構築編〜

僕が敬愛してやまない株式会社LIGさんの記事を完全にパクリ参考にさせてもらってます!

やり方はめちゃ簡単!
まずNVM(Node Version Manager)をインストール!

$ git clone https://github.com/creationix/nvm.git ~/.nvm
$ source ~/.nvm/nvm.sh

次に
$ nvm help
Node Version Manager
Usage:
nvm help Show this message

でhelpが表示されていればOKです!

$ nvm ls-remote
v0.1.14
v0.1.15
v0.1.16

で次にインストールします!

$ nvm install v0.12.9

で確認!
$ node -v
v0.12.9

問題なさそうですね!
では次に行きましょ!!

基本macのインストール手順になっているので、Windowsの人はあきらめ下記URLを参考にしてください。

node.js インストール備忘録(windows7)

gulpのインストール

ここまで来るのに長かったですね!
いよいよgulpのインストールです!

npm install -g gulp
※上記コマンドでエラーが出る場合sudoをトップにつけ管理者権限で実行します。

次にgulpを使いたいプロジェクトのディレクトリを作成、移動します!

mkdir hogehoge
cd hogehoge

これで移動できました!

そしたら次に
npm init
をして、package.jsonの作成をしましょう!
いろいろ聞かれるが、基本YESで大丈夫!

gulpは全体で使うグローバルと、プロジェクト単位で使うローカルがあります!
なのでこんどはローカルのgulpをインストールしましょー!

npm install -D gulp
これでローカルにもダウンロードされました!

確認
gulp -v
[00:22:48] CLI version 3.9.0
[00:22:48] Local version 3.9.0

こんなのが表示されればOK

プラグイン(パッケージ、モジュール)のインストール

gulpで行いたいタスクによってプラグイン(パッケージとかモジュールとも言う)をインストールして、いろんなことをできるようにしましょー


  • browser-sync・・・ ブラウザを自動リロードさせる

  • gulp-autoprefixer・・・ cssのベンダープレフィックスをCan I Useを元にいい感じにつけてくれる

  • gulp-csso・・・ cssの軽量化

  • gulp-if ・・・・ gulpのタスクの処理で、条件指定でいろいろできるようになる

  • gulp-imagemin・・・ 画像の軽量化

  • gulp-jshint・・・ jsの構文チェック

  • gulp-load-plugins・・・ gulp-XXX系のプラグインをまとめてロードできる

  • gulp-minify-html・・・ htmlの軽量化

  • gulp-ruby-sass・・・・ sass

  • gulp-uglify・・・ jsの軽量化

  • gulp-useref・・・ html内のcssやjsの読込み部分を変更

  • jshint-stylish・・・ gulp-jshintの出力をスタイリッシュにする

  • rimraf・・・ nodeのためのrm -rf ディレクトリの削除に使用

  • run-sequence・・・ gulpタスクの実行順序を指定できる


例えば、gulpでStylus(CSSプリプロセッサ)を入れたい場合、下記コマンドをプロジェクトフォルダ内で実行

npm install gulp-stylus

そうするとプロジェクトフォルダ内に下記のようなフォルダが作られる。


/node_modules ← gulpを動かすためのnode.jsのフォルダ

_/gulp ← gulpが入ってるフォルダ

_/gulp-stylus ← Stylusプラグインのフォルダ


このようにプラグインを追加すると/node_modulesの中にプラグインごとのフォルダが作られ、そこにプラグインのプログラムが入っている


/node_modules ← gulpを動かすためのnode.jsのフォルダ

_/gulp ← gulpが入ってるフォルダ


インストールしたプラグインを使えるようにgulpfile.jsファイルに記述

下記のような形でプロジェクトフォルダ内にgulpfile.jsファイルを新規作成。


/プロジェクトフォルダ
_gulpfile.js ← 新規作成

_/node_modules ← node.jsのやつ。gulpとか入ってる。


下記はStylusプラグインを入れた場合の例

取り込みたいプラグインをインポートする

gulp = require 'gulp' ← gulpを使う場合、必ず書く(インポートする)もの

stylus = require('gulp-stylus') ← Stylusプラグインを入れる場合

Stylusの設定

gulp.task 'stylus', () -> ## gulp.task(“タスク名”,function() {});でタスクの登録

return gulp.src 'stylus/*' ## gulp.src(“MiniMatchパターン”)で読み出したいファイルを指定

.pipe stylus() ## pipe(行いたい処理)でsrcで取得したファイルに処理を施す

.pipe gulp.dest('css/') ## gulp.dest(“出力先”)で出力先に処理を施したファイルを出力

実際に動かす!

新しくprodディレクトリと、srcディレクトリをつくってみよー

mkdir prod
mkdir src

prodの中にcssディレクトリをsrcの中にscssディレクトリを更に作ろー!

mkdir prod/css
mkdir src/scss

その次にgulpfile.jsを作り

gulpfile.js
var gulp    = require('gulp');
var sass    = require('gulp-sass');

//sass
gulp.task('sass', function(){
  gulp.src('./src/scss/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./prod/css'));
});


gulp.task('default');

と記述してみよう!

でいざターミナルで起動!

gulp

なんか動いたっぽいけど意味が無い。。。。

そこで、
/src/scss/配下に
hogehoge.scssを作成!!

$color: #555;
$font-size: 14px;
$big-font-size: 18px;

body {
  background: $color;
  font-size: $font-size;
}
h1{
  font-size: $big-font-size;
}

みたいなソースを書いて再度チャレンジ!

/prod/cssに
hogehoge.cssができていればうまく行ってます!

こんな少しの労力で、scssのコンパイルができるのは楽しいですね!!

まとめ

gulpの導入について振り返りも含めて書いてみました!

なかなか難しいですね。。。
いまさらgulpかよって思うかもしれませんが、未だに使いこなせていないのであんまり深くは聞かないでください!

僕は新しいもの好きなので、ツールや新技術に使われてしまっていることが多いのですが、それでも便利なものは便利なのでみなさんはいろんな新しい物を試していって自分に合う合わないが分かるまで、ツールを使い倒して欲しいです!

さて明日はわれらのまさかづ兄貴の出番です!!
めちゃ楽しみですね!!

ではでは!

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
ユーザーは見つかりませんでした