- 1. 前提条件
- 2. npm インストール
- 3. gulp インストール
- 4. 動かしてみる
1. 前提条件
さて、参考サイトによれば「Webpack」や「Ruby on Rails」などといった環境で使えるらしいのです。
どちらも使ったことがないし、前者は初めて（2018年3月3日）名前を聞いたくらいなのです。
プラットフォームもいろいろありそうな・・・。
わたしは、今このサイトを表示している FreeBSD な環境の中で構築したいと思います。
参考サイトでは Windows やら Mac の手順が載っていますが、どちらの環境でもコマンドラインを多用するみたいなので。
それならば、使い慣れた FreeBSD で十分ですじゃ。
えっとそれには、Gulp ってのが必要で、Gulp をインストールするには npm が必要で・・・。
どちらも使ったことがありませんが、手探りで進めていきます。
もう一点、既に運用中の .scss がありますので、Gulp を使用して
.scss
↓
sass でコンパイル
↓
.css
↓
Autoprefixer でベンダープレフィックスの解決
↓
.css
てなことができないかと夢想しておりますです。
2. npm インストール
Gulp を手に入れるために npm ってのをインストールせにゃならん。
これがどうも ports にあるみたいなんですな。
Node package manager って書いてあります。また、python みたいに依存関係が壊れていくのが怖いですが・・・。
cd /usr/ports/www/npm
make
make install
2018年3月5日の時点では、バージョン 4.x、6.x、8.x、9.x があるようです。
デフォルトが 9.x のようで、ports の中では一番新しいようですのでそのままインストールしました。
と 2018年5月8日 に発生したトラブルシュートでご注意。
npm が依存する（？）node という ports があってこれも 4.x、6.x、8.x、9.x がありましたが、9.x が 10.0 に更新されたとき、npm が対応できていなかったのでだいぶ苦労しました。
npm-node8 と node8 をインストールしておく方が無難かもしれません。
3. gulp インストール
ここもご注意。前項までは root ユーザで実行しますが、以下は一般ユーザで実行します。
さて、ここからがいよいよ手探りなわけで・・・。
どこにインストールされるかよくわからないので
> cd ~
> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (npm) Enter
version: (1.0.0) Enter
description: Enter
entry point: (index.js) Enter
test command: Enter
git repository: Enter
keywords: Enter
author: Enter
license: (ISC) Enter
About to write to ~/npm/package.json:
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
Is this ok? (yes) Enter
何をやっているか理解していないので、やみくもに Enter を入力しました。
~/npm/package.json
というファイルが出来上がりまして中身は、下記のように記述されております。
{
"name": "npm",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
このまま参考サイトの通りに続けてみるしかないな
> cd ~
> npm install --save-dev gulp
> npm install --save-dev gulp-sass
> npm install --save-dev gulp-autoprefixer
npm install gulp-sass のところでエラーが発生しました。
python2 やら python がないってんですな。
実際にはあるわけで
> ls -la /usr/local/bin/pytho*
-r-xr-xr-x 1 root wheel 5464 2月 18 23:56 /usr/local/bin/python2.7
-r-xr-xr-x 1 root wheel 1769 2月 18 23:57 /usr/local/bin/python2.7-config
-r-xr-xr-x 2 root wheel 7288 2月 18 23:59 /usr/local/bin/python3.6
lrwxr-xr-x 1 root wheel 17 2月 19 00:00 /usr/local/bin/python3.6-config -> python3.6m-config
-r-xr-xr-x 2 root wheel 7288 2月 18 23:59 /usr/local/bin/python3.6m
-r-xr-xr-x 1 root wheel 3102 2月 19 00:00 /usr/local/bin/python3.6m-config
シンボリックリンクを作成しようと思います。（今後、python のバージョンアップが心配ですが・・・）
> ln -s /usr/local/bin/python2.7 /usr/local/bin/python2
> ln -s /usr/local/bin/python3.6 /usr/local/bin/python3
> ln -s /usr/local/bin/python3.6 /usr/local/bin/python
これでなんとか gulp-sass がインストールできました。
--save-dev というオプションは、はずそうかと思ったのですが。
これをつけていると package.json の devDependencies にインストールしたモジュールが記録されるそうで、後から使えるそうなので、つけることにしました。
-g というオプションがあり、そのオプションを指定するとカレントディレクトリではなく
/usr/local/lib/node_modules
の下にモジュールがインストールされるようです。
-g はグローバルオプションだそうで、システム全体へのインストールということになるわけです。
まだ、実験段階なので -g オプションはやめておきます。
インストール後
~/node_modules
の下におびただしい数の .js ファイルが作成されました。
4. 動かしてみる
参考サイトではこれで gulp が起動できるように書いてはいますが、パスを通してないからそのままじゃ動かないですよね。
gulp ってのがどこにあってどうなっているのか少しばかり見てみます。
> find ~/ -name gulp
~/node_modules/gulp
~/node_modules/.bin/gulp
> file ~/node_modules/gulp
~/node_modules/gulp: directory
> file ~/node_modules/.bin/gulp
~/node_modules/.bin/gulp: symbolic link to ../gulp/bin/gulp.js
~/npm/node_modules/.bin/gulp ってのが動かせそうなので、実行してみます。
> ~/npm/node_modules/.bin/gulp
[08:53:53] No gulpfile found
なるほど gulpfile ってのが必要ですよと。
これは参考サイト通りです。
|
