TOPWEB

gulpで時短　CSSを効率的に書く

WEB

Web制作において、「効率化」は重要なポイントです。
デザイナーの作業においても「CSSファイルの管理」や「ベンダープレフィックス（各ブラウザに応じたコーディング）」など、本質のデザイン以外にもやるこはたくさんあります。それらをすべて手動で行っていたのでは時間がいくらあっても足りませんし、ミスの元です。

タスクマネージャーはこれら作業を管理してくれるツールです。ここでは最もメジャーな「gulp」の導入について紹介します。

必要なもの

  • Homebrew（macのパッケージ管理ソフト）
  • nodebrew（nodeバージョン管理ソフト）
  • node（簡単に言うとサーバサイドで動くJavaScript）
  • gulp

gulpの導入方法は他にもありますが、上記が一番わかり易いかつ管理しやすい方法だと思います。

gulpをインストールするためにnodeをインストール。nodeをインストールするためにnodebrewをインストール。nodebrewをインストールするためにHomebrewをインストールする。
ちょっと面倒くさいですが、最初だけです。

Homebrewをインストール

nodebrewをインストールするため、macパッケージ管理ソフトの「Homebrew」をインストールします。

Terminalで以下を入力。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

インストールされたかどうか確認

$ brew doctor

Your system is ready to brew.と表示されればOKです。
Homebrewの各コマンドを知りたい方は下記ヘルプで参照ください。

$ brew commands

nodebrewをインストール

続いてnodebrewをインストールします。

Homebrewを使い、nodebrewをインストールする

$ brew install nodebrew

インストールされたか確認

$ nodebrew -v

バージョンが表示されればOK

nodebrew 1.0.1

Usage:
    nodebrew help                         Show this message
    nodebrew install <version>            Download and install <version> (from binary)
    nodebrew compile <version>            Download and install <version> (from source)
    nodebrew install-binary <version>     Alias of `install` (For backward compatibility)
    nodebrew uninstall <version>          Uninstall <version>
    nodebrew use <version>                Use <version>
    nodebrew list                         List installed versions
    nodebrew ls                           Alias for `list`
    nodebrew ls-remote                    List remote versions
    nodebrew ls-all                       List remote and installed versions
    nodebrew alias <key> <value>          Set alias
    nodebrew unalias <key>                Remove alias
    nodebrew clean <version> | all        Remove source file
    nodebrew selfupdate                   Update nodebrew
    nodebrew migrate-package <version>    Install global NPM packages contained in <version> to current version
    nodebrew exec <version> -- <command>  Execute <command> using specified <version>

Example:
    # install
    nodebrew install v8.9.4

    # use a specific version number
    nodebrew use v8.9.4

nodebrewのセットアップ

Homebrewでインストールした場合はnodebrew setupコマンド実行(セットアップしないとNode.jsインストール時にエラーが出る)

$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

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

node.jsをインストール

続いてnode.jsをインストールします。

インストールインストールできるバージョンを調べる

$ nodebrew ls-remote

インストール可能なnode.jsのバージョンが表示されます。

v0.0.1    v0.0.2    v0.0.3    v0.0.4    v0.0.5    v0.0.6

v0.1.0    v0.1.1    v0.1.2    v0.1.3    v0.1.4    v0.1.5    v0.1.6    v0.1.7
v0.1.8    v0.1.9    v0.1.10   v0.1.11   v0.1.12   v0.1.13   v0.1.14   v0.1.15
v0.1.16   v0.1.17   v0.1.18   v0.1.19   v0.1.20   v0.1.21   v0.1.22   v0.1.23
v0.1.24   v0.1.25   v0.1.26   v0.1.27   v0.1.28   v0.1.29   v0.1.30   v0.1.31
v0.1.32   v0.1.33   v0.1.90   v0.1.91   v0.1.92   v0.1.93   v0.1.94   v0.1.95
v0.1.96   v0.1.97   v0.1.98   v0.1.99   v0.1.100  v0.1.101  v0.1.102  v0.1.103
v0.1.104
......
......

この中から最新版をインストール。

$ nodebrew install-binary latest

latestで最新版がインストールされる。

インストール済みの node.js バージョンを表示。

$ nodebrew ls
v13.1.0

current: none

※「v13.1.0」がインストールされた。ただし「current: none」となっており、使用Verが選択されていない。

node.js 使用バージョンを切り替える

使用するnode.js のバージョンを指定します。

$ nodebrew use v13.1.0

確認します。

$ nodebrew ls
v13.1.0

current: v13.1.0

「current: v13.1.0」となり、切り替わりました。

gulpをインストール

さあ、あともう少しです。gulpのインストールを進めます。

package.jsonを作成

package.jsonを生成する。（npmプロジェクトの管理ファイル）
まず、ターミナルでプロジェクトフォルダ（gulpを使用したいディレクトリ）へ移動し、下記を。（生成時にProject nameなど聞かれるが、とりあえずenter連打でOK）

$ npm init

プロジェクトフォルダ内に「package.json」が生成されます。

パッケージのインストール

$ npm i -D (パッケージ名)

gulpをインストールする場合は

$ npm i -D gulp

「-D」は「–save-dev」の略。この記述をいれるとpackage.jsonの”devDependencies”欄に、インストールしたパッケージが記載されます。（自分が何をインストールしたのか。また、他Projectで同じパッケージをインストールする際に便利）

以下でインストール済みパッケージを確認

$ npm list --depth=0
test@1.0.0 /Volumes/Storage/local_app/app/public/wp-content/themes/original-theme-m01
├── gulp@4.0.2
├── gulp-autoprefixer@7.0.1
├── gulp-csscomb@3.1.0
├── gulp-group-css-media-queries@1.2.2
├── gulp-sass@4.0.2
└── gulp-sass-glob@1.1.0

※ここではgulp以外にもパッケージ（gulp-autoprefixer/gulp-csscombなど）もインストールしています

以上でプロジェクトフォルダに「gulp」がインストールされました。

その他のnpmコマンド

パッケージの最新バージョンがあるかどうか確認したい場合

$ npm outdated

使用しているパッケージ群を最新版にアップデート

$ npm update -D

パッケージのアンインストール方法

$ npm un -D (プラグイン名)

他プロジェクトで同パッケージ群を使用する

package.jsonをプロジェクトフォルダに置いて下記を

$ npm i
はてブ シェア

最新記事