はじめに

最近のマイブームがフロントエンド開発なので、すぐに開発スタートできるテンプレート作ろうと思い立ちました。
というわけで、Gulpを使ってフロントエンド開発環境を構築していきます。
ちゃんとこれ最後まで連載するのか。。。

※本連載ではWebのフロントエンド開発環境の整備をしていきます(Web以外でも使えるけど、そういう体で)。

シリーズ

Node.jsのインストール

下記サイトにアクセスし、INSTALLをクリックしてインストーラーをダウンロードする。
ダウンロードしたインストーラーを起動してインストールする。
Node.js

インストールが完了したらコマンドプロンプトを起動し、以下のコマンドを実行する。

node -v

バージョン番号が表示されればインストール完了。

npmのインストール

プロジェクト用のディレクトリを作成し、作成したディレクトリで以下のコマンドを実行する。

npm init

こんな感じですね。
(自分は『frontend-develop』というディレクトリを作成して実行しました。) f:id:heribo821:20160401150143p:plain

質問は適当に答えておけばいいです(あとで編集できるため)。
ディレクトリ内にpackage.jsonができていることを確認する。

詳しく知りたい方は以下の記事を参考にしてください。
Node.js環境構築

あ、licenseがデフォルトでMITになっているのはデフォルト設定をMITに変更したからです。

なにも設定変えていない人はISCになります。

Gulp.jsのインストール

以下のコマンドでグローバル領域にGulpをインストールする。

npm install gulp -g

ついでに以下のコマンドでローカルにもインストールする。

npm install gulp --save-dev

package.jsonのdevDependenciesにGulpが記載されていることを確認する。
package.jsonに記載されている場合、npm installコマンドを実行するだけでインストールできる。

package.json

{
  "name": "frontend-develop",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT",
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

gulpfile.jsの作成

gulpfile.jsをpackage.jsonと同じディレクトリに作成し、以下の用に記述してGulpを呼び出す。

gulpfile.js

const gulp = require('gulp');

ディレクトリは以下のようになったかと思います。

frontend-develop
  ┣ /node_modules - 環境構築時に生成される。各種プラグインが入る。
  ┣ gulpfile.js - gulpタスクの設定ファイル。
  ┣ package.json - npmパッケージ設定ファイル。

今回はこのへんで、Gulpを使った処理はまた次回。

まとめ

とりあえずここまででGulpを使う準備が終わりました。
次回からは実際にGulpを動かしつつ、環境構築を進めたいと思います。
フロントエンドの設計についても踏み込みたいなぁ。

えんじにあときどきくらいまー

個人的な技術メモとかボルダリングのこととかなんか色々書けたらいいなぁ

Gulpを用いたフロントエンド開発環境の構築基礎編 Section1 ～Gulpの準備～