Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

Gulpとは?使う環境を整えよう

$
0
0

はじめに

未経験のWeb中級者です。
効率的なWeb制作を実現するために、Gulpを使ったフロントエンドの開発環境の構築方法について学びました。

開発環境:Macでターミナルを使いました。

Gulpとは

さまざまな処理を自動で行なってくれるタスク自動化ツールで、一度設定しておくと開発の作業効率が図れます。

Gulpはタスクランナーと呼ばれていて、決められたタスクをJavaScripを用いてプログラムすることができます。

メリット

導入が簡単でプラグインが豊富
タスクランナーはGulpが人気!!

Gulpでどんな事ができるか

1.JavaScriptのES6+からES5へのトランスパイルが自動化(ESLint連携)
2.SassファイルをCSSファイルに自動でプリコンパイル(node-sass連携)
3.画像のリサイズや圧縮を自動化(GraphicsMagick連携)
4.JavaScriptファイル、CSSファイルのminifyを自動で行える

他、さまざまなプラグインがあるので、やりたいことに合わせてインストールができます。

実行する環境を整える

1.node.jsをインストール

Gulpが動作する環境はnode.jsがありインストールするとターミナルからJavaScriptを実行できるようになります。使うにはnode.jsにさまざまなモジュール(部品)をインストールして繋ぎ合わせて実行します。https://nodejs.org/ja/
screencapture-nodejs-org-ja-2020-01-30-00_28_53.png
LTS(長期間サポートが保証されているバージョン)を選び

Tarmnar
npm -v

↑ターミナルで入力してインストール。

Tarmnar
npm -v
v6.9.0

↑こちらが出たらOK。

私は、エラーが出てしまい...こちらを参考にして解決しました!
npmでpermission deniedになった時の対処法
https://qiita.com/okohs/items/ced3c3de30af1035242d

2.yarnをインストール

yarnはパッケージ管理ツールでnode.jsにインストールするモジュールの管理を行います。
screencapture-legacy-yarnpkg-ja-docs-install-2020-01-30-00_47_20.png

Tarmnar
npm install -g yarn

↑ターミナルで入力してインストール。

Tarmnar
yarn -h

↑インストールできているか確認。
インストールした内容が出ればOK。

3.Gulpをインストール

Gulpをインストールするにはターミナルを使います。
node.jsをインストールした時にnpmというパッケージ管理ツールが一緒にインストールされていますが、yarnの方が高速なのでこちらを使っていきます。

screencapture-gulpjs-2020-01-30-01_24_31.png

1.プロジェクトフォルダーを用意

私の場合はtestフォルダの中に以下のファイルを準備しました。
スクリーンショット 2020-01-30 1.46.50.png

2.globalをインスストール

Tarmnar
yarn global add gulp-cli

globalをターミナルに付けることによって、このプロジェクト以外からでも使えるようになりnode.jsで使うモジュールをインストールする事ができます。

※ターミナルでフォルダ内に移動していないとエラーが出てしまいます。
cdと打ってからファイルごとドラック&ドロップして移動すると簡単です。

3.プロジェクト内の設定・初期化・確認

Tarmnar
yarn init -y

↑ターミナルで打つと、package.jsonというnode.jsの設定ファイルがtestフォルダ内に作成されます。こちらにモジュールが追加されて情報が管理されます。

スクリーンショット 2020-01-30 2.11.11.png

Tarmnar
yarn add gulp -dev

↑ターミナルで打つとgulpのインストールが完了!
package.jsonの中身に"devDependencies": {"gulp": "^4.0.2"と追加されていればOK。

また、testフォルダ内にyarn.lock(ファイル)とnode_modules(フォルダ)もインストールされているかを確認してください。

yarn.lock→インストールされた状況を記載
node_modules→沢山のモジュール達が格納されている

Tarmnar
 gulp --help

↑インストールされていいるかを確認できます!

最後に

無事に環境を整えられました!
次回は、基本的な文法を学ぼうと思います。

Gulpについては、こちらの記事も参考になります。
https://flex-box.net/gulp/


Viewing all articles
Browse latest Browse all 8691

Trending Articles