はじめに
gulpは長い事つかってますが、
フロントの方が入れてくれた環境を基に使っているのでゼロから学んだ経験は乏しいです。
(自分はサーバサイド)
そこでgulpの基礎をゼロからなるはやで覚えるための自分用メモです
アジェンダ
- gulpとは
- gulp環境つくる
- gulp使ってみる
1. gulpとは
公式リポジトリは以下です。
https://github.com/gulpjs/gulp
参考サイトからの抜粋です。
gulpはNode.jsをベースとしたビルドシステムヘルパーです。
gulpの一番の特徴はサイトのトップページで「ストリーミングビルドシステム」と自ら名乗っているように、
ファイルの処理をストリームで行うというところです。
この特徴によって複雑なタスクも細かくカスタマイズして書くことができます。
現場で使えるgulp入門 第1回 gulpとは何か
2. gulp環境つくる
gulp環境を作るにはシンプルに以下の3つが必要です
- Node.jsのインストールする
- nodeコマンドとnpmコマンドを使えるようにする
- npmでgulpをインストールする
- gulpコマンド使えるようにする
- package.json作る
- タスクを書く
- gulpfile.js作る
Node.jsのインストールする
公式サイトからダウンロードしてinstallします。
https://nodejs.org/
とりあえず動かしてみるにしてもLTSの方を落としてみると良いでしょう。
npmでgulpをインストールする
gulpはglobalとlocalとにインストールします。
また、パッケージ管理のためにpackage.jsonを作成します。
# パッケージディレクトリに移動 $ pwd /path/to/package dir # package.jsonを作成 # {} だけ記載 $ vim package.json ---- vi ---- {} ------------ # gulpをグローバルにインストール $ npm install -g gulp # gulpをパッケージローカルにインストール # このタイミングでpackage.jsonに # インストールしたものとversionが書かれる $ npm install --save-dev gulp # versionが出れば成功 $ gulp -v [19:53:54] CLI version 3.9.1 [19:53:54] Local version 3.9.1 $ cat package.json { "devDependencies": { "gulp": "^3.9.1" } }
3. gulp使ってみる
gulpタスクの作成
使ってみるといってもまずはgulpタスクを作成する必要があります。
タスクはgulpfile.jsに記載します。
- gulpfile.js
var gulp = require('gulp'); gulp.task('hello', function() { console.log('say Hello!'); }); gulp.task('world', function() { console.log('say World!'); }); gulp.task('default', ['hello', 'world']);
gulpタスクの実行
あとは実行するだけです
# helloタスクを実行してみる $ gulp hello [19:58:33] Using gulpfile ~/github/my/for_hatena/gulp-basic-sample/gulpfile.js [19:58:33] Starting 'hello'... say Hello! [19:58:33] Finished 'hello' after 144 μs # gulpとだけうってdefaultタスクを実行 # default task = hello + worldが呼ばれる $ gulp [19:58:48] Using gulpfile ~/github/my/for_hatena/gulp-basic-sample/gulpfile.js [19:58:48] Starting 'hello'... say Hello! [19:58:48] Finished 'hello' after 145 μs [19:58:48] Starting 'world'... say World! [19:58:48] Finished 'world' after 54 μs [19:58:48] Starting 'default'... [19:58:48] Finished 'default' after 9.73 μs
いちおうサンプル
作ったサンプルをそのままpushしたので貼っておきます。
おわり
これだけだとまだ何もできないですが、
導入して動かしてみるだけで雰囲気はわかるかと思います\(^o^)/