HTML - Autoprefixer - 環境構築 - npm-5.8

 
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 ってのが必要ですよと。  これは参考サイト通りです。