23
20

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をはじめる for Mac

Last updated at Posted at 2016-05-28

gulpの導入について。
簡単に流れを説明します。

※Macでの実行結果となります。

<目次>
【1】nodebrew(Mac版バージョン管理ツール)のインストール
【2】Node.jsのインストール
【3】gulpのインストール
【4】package.jsonの作成
【5】npmのインストール
【6】gulpfile.jsの作成
【7】実行

【1】nodebrew(Mac版バージョン管理ツール)のインストール

nodebrewはPC(ローカル)でバージョン管理(バージョンごとに使い分けたり、任意のNode.jsをインストールしたり)するためのツール。

(1)nodebrewをインストール

$ curl -L git.io/nodebrew | perl - setup

(2)PATHを通す

$ export PATH=$HOME/.nodebrew/current/bin:$PATH

(3)設定を読み直す

$ source ~/.bashrc

【2】Node.jsのインストール

$ node -v

インストールされていればNode.jsのバージョン番号が、そうでなければ-bash: node: command not foundなどと表示される。

インストールされていなければ、下記よりインストール。
http://nodejs.org/

【3】gulpのインストール

$ sudo npm install -g gulp

上記完了したら、バージョンの確認。

$ gulp -v
[12:09:29] CLI version 3.9.1
[12:09:29] Local version 3.9.1

と出ればOK。

ここまでが下準備。

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

gulpはグローバルだけでなくローカル(プロジェクト毎)にもインストールする必要があります。

$ sudo npm install gulp --save-dev

【4】package.jsonの作成

主なプラグインをインストール。
基本、案件ごとに使い回しができるように設定をしておく。

その他、プラグインは案件に応じて選択すること。

【5】npmのインストール

package.jsonを作成したら、プロジェクトのルートで下記を実行。
package.jsonで設定している必要なプラグインをまとめてインストールできる。

$ npm install

※node_modulesフォルダ、package.jsonが生成され、必要なモジュールが配置される

【6】gulpfile.jsの作成

gulpfile.js はタスクのレシピ。
package.jsonで指定したモジュールを読み込むと、使えるようになる。

<サンプルコード>

var gulp         = require('gulp');
var cssimport    = require('gulp-cssimport');
var autoprefixer = require('gulp-autoprefixer');
var minifyCss    = require('gulp-minify-css');
var rename       = require('gulp-rename');

gulp.task('style', function(){
  return gulp.src('src/style.css')
    .pipe(cssimport())
    .pipe(autoprefixer('last 2 versions'))
    .pipe(minifyCss())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('dist/'));
});

参考)プラグイン
http://gulpjs.com/plugins/

【7】実行

$ gulp style

正しく実行されれば、dist/フォルダにstyle.min.cssというファイルができる。

※Ctrl + C

で、プログラムを中断できる。

以上です。

こちらの記事もどうぞ。
【初心者向け】gulp触るなら覚えておいたほうが良いコマンド3選+α
http://qiita.com/kobatatakayuki/items/0fa9faf8003c713ce5d5

23
20
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
23
20

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?