Web制作効率化

1.はじめに

とある、HomePageを最近作っているのですが、gulp使い始めました。
gulpについては以下のページがわかりやすいかな。

https://www.wan55.co.jp/column/detail/id=287

2.gulpインストール必要なファイル

以下のソフトをインストールしてください。ちなみに私の環境はwindows10とwindows7です。普段はwindows7で作業することが多いです。

インストールコマンドはnpmコマンドを使います。コマンドターミナル(DOS窓)から以下のように打ちます。以下のコマンドをターミナルに入力します。

npm install -g gulp

npm install

「※Macはroot権限での実行が必要になるのでsudo npm install -g gulp // sudo npm installと入力してください。」だそうです。

3.必要ファイルの設置

ホームページを作っているトップフォルダ(通常だとindex.htmlを置いてるフォルダ)に以下のgulp設定ファイルたちを作成します。(上記サイトから引用)

  • gulpfile.js … タスク(処理)を定義したファイル
  • package.json … タスクに必要なパッケージが記載されたファイル(npm initで作成可)
  • config.rb … compassの設定ファイル
  • .gitignore … git管理対象外ファイル(Gitを使用する場合)

を設置していきます。ちなみに私はcofig.rbと.gitgnoreは作ってません。なくてもgulp使えてます。

4.gulpの起動方法

以下のようなバッチファイルを作って、作業前にダブルクリックしてます。作業フォルダがDドライブのD:\web/Tama フォルダ配下にあるのでそこまで移動した後にgulpコマンド実行して、一旦待つ感じのスクリプトです。終了させるときは、起動時に開いだDOS窓上で、^+C(コントロールキーと”C”の同時押し)で終了させてください。

rem 作成日20170921
rem xxWebページ タスクランナー起動スクリプト
D:                <--この辺は環境に合わせて変えてね
cd \Web\Tama      <--この辺は環境に合わせて変えてね
gulp
pause

こんな感じで

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください