サイト改装への道(18) 「MacでYii2+gulp」

WindowsとMacで違うところはそれほどないが、自己満足のために書いておく。
まず、yiiのルートフォルダに移動し、

$ cd yii_advanced

npmを初期化してpackage.jsonファイルを作る。

$ npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sane defaults.
See `npm help json` for definitive documentation on these fieldsand exactly what they do.
Use `npm install –save` afterwards to install a package andsave it as a dependency in the package.json file.
Press ^C at any time to quit.name: (yii_advanced) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to yii_advanced/package.json:
{  “name”: “yii_advanced”,  “version”: “1.0.0”,  “description”: “Yii 2 Advanced Project Template ===============================”,  “main”: “index.js”,  “directories”: {    “test”: “tests”  },  “scripts”: {    “test”: “echo “Error: no test specified” && exit 1″  },  “author”: “”,  “license”: “ISC”}

Is this ok? (yes) yes

gulpをローカルインストール。
sudoを付けないとファイルの権限不足でエラーになる。

$ sudo npm install –save-dev gulp
gulp@3.9.0 ../../../node_modules/gulp
├── pretty-hrtime@1.0.0
├── interpret@0.6.2
├── deprecated@0.0.1
├── archy@1.0.0
├── minimist@1.1.1
├── v8flags@2.0.9 (user-home@1.1.1)
├── tildify@1.1.0 (os-homedir@1.0.0)
├── semver@4.3.6
├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, strip-ansi@2.0.1, has-ansi@1.0.3)
├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)
├── liftoff@2.1.0 (extend@2.0.1, rechoir@0.6.1, flagged-respawn@0.3.1, resolve@1.1.6, findup-sync@0.2.1)
├── vinyl-fs@0.3.13 (graceful-fs@3.0.8, mkdirp@0.5.1, strip-bom@1.0.0, vinyl@0.4.6, defaults@1.0.2, through2@0.6.5, glob-stream@3.1.18, glob-watcher@0.0.6)
└── gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reescape@3.0.0, lodash._reinterpolate@3.0.0, beeper@1.1.0, object-assign@3.0.0, replace-ext@0.0.1, vinyl@0.5.0, multipipe@0.1.2, lodash.template@3.6.1, through2@2.0.0, dateformat@1.0.11)

バージョンチェック!

$ gulp -v[5:48:18] CLI version 3.8.11[5:48:18] Local version 3.9.0

あれ?バージョン違う。
グローバルインストールができていない時や、バージョンが違う時は、

$ sudo npm install -g gulp
/usr/local/bin/gulp -> /usr/local/lib/node_modules/gulp/bin/gulp.jsgulp@3.9.0 /usr/local/lib/node_modules/gulp├── pretty-hrtime@1.0.0├── interpret@0.6.2├── deprecated@0.0.1├── archy@1.0.0├── minimist@1.1.1├── v8flags@2.0.9 (user-home@1.1.1)├── tildify@1.1.0 (os-homedir@1.0.0)├── chalk@1.0.0 (escape-string-regexp@1.0.3, ansi-styles@2.0.1, supports-color@1.3.1, strip-ansi@2.0.1, has-ansi@1.0.3)├── semver@4.3.6├── orchestrator@0.3.7 (stream-consume@0.1.0, sequencify@0.0.7, end-of-stream@0.1.5)├── gulp-util@3.0.6 (array-differ@1.0.0, array-uniq@1.0.2, lodash._reevaluate@3.0.0, lodash._reinterpolate@3.0.0, beeper@1.1.0, lodash._reescape@3.0.0, object-assign@3.0.0, replace-ext@0.0.1, vinyl@0.5.0, lodash.template@3.6.1, through2@2.0.0, multipipe@0.1.2, dateformat@1.0.11)├── vinyl-fs@0.3.13 (graceful-fs@3.0.8, strip-bom@1.0.0, defaults@1.0.2, vinyl@0.4.6, mkdirp@0.5.1, through2@0.6.5, glob-watcher@0.0.6, glob-stream@3.1.18)└── liftoff@2.1.0 (extend@2.0.1, rechoir@0.6.1, flagged-respawn@0.3.1, resolve@1.1.6, findup-sync@0.2.1)$ gulp -v[5:54:37] CLI version 3.9.0[5:54:37] Local version 3.9.0

バージョンも一致!

$ gulp
[6:24:32] No gulpfile found

それではgulpfile.jsを作りましょう。

$vi gulpfile.jsvar gulp = require(‘gulp’);
gulp.task(‘default’, function() {
console.log(“Hello World!”);
});

で、

$ gulp[6:27:04] Using gulpfile yii_advanced/gulpfile.js[6:27:04] Starting ‘default’…Hello World![6:27:04] Finished ‘default’ after 151 μs

よし。
あとは、Browsersyncをやりたいが、それはWindowsの時と一緒だから、もういいか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です