Skip to content
This repository was archived by the owner on Sep 5, 2019. It is now read-only.

install pug #1

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

install pug #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 34 additions & 128 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,32 @@
# npm-gulp
フロントエンドエンジニアによる、フロントエンドエンジニアのための
フロントエンドエンジニアによる、フロントエンドエンジニアのための依存関係を極力減らした開発環境を目指します。

依存関係を極力減らした開発環境を目指します。

## 参考リンク
[npm で依存もタスクも一元化する - Qiita](http://qiita.com/Jxck_/items/efaff21b977ddc782971)

[僕がnpm installに-gをつけないわけ - Qiita](https://qiita.com/Mic-U/items/cd456d6bea72937464f8)

[gulpjs/gulp](https://github.com/gulpjs/gulp/blob/master/docs/recipes/server-with-livereload-and-css-injection.md)
[![GitHub issues](https://img.shields.io/github/issues/t--takai/front_gulp_framework.svg?style=flat)](https://github.com/t--takai/front_gulp_framework/issues)
[![GitHub forks](https://img.shields.io/github/forks/t--takai/front_gulp_framework.svg?style=flat)](https://github.com/t--takai/front_gulp_framework/network)
[![GitHub stars](https://img.shields.io/github/stars/t--takai/front_gulp_framework.svg?style=flat)](https://github.com/t--takai/front_gulp_framework/stargazers)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://github.com/t--takai/front_gulp_framework/blob/master/LICENSE)

***

## USAGE

環境構築__Mac側
## Setup

1. install Xcode at AppStore
1. install Homebrew [How to install](https://brew.sh/index_ja.html)
1. `$ brew install node`

```
$ npm doctor // npmの診断をしています。以下の環境で動作を確認できました。
Check Value Recommendation
npm ping OK
npm -v v5.5.1
node -v v8.9.1
npm config get registry https://registry.npmjs.org/
which git /usr/bin/git
Perms check on cached files ok
Perms check on global node_modules ok
Perms check on local node_modules ok
Verify cache contents verified 933 tarballs
```


環境構築__リポジトリ側
1. clone
```
$ git clone https://github.com/t--takai/front_gulp_framework.git
$ cd front_gulp_framework
$ npm install
```

動作確認
## Running

```
$ npm test
```

`npm test` で発行されたURLは仮想Winでも使える

例は以下の通り
## Browsing Any Device

```
[Browsersync] Access URLs:
Expand All @@ -58,105 +36,33 @@ $ npm test
--------------------------------------
```


### USAGE__外部デバイスでブラウジング

1. 環境構築
1. `$ brew cask install ngrok`
1. `$ ngrok` // ngrokが動くのか確認をするだけ
1. `$ brew cask install ngrok`
1. `$ ngrok` // ngrokが動くのか確認をするだけ
1. Macの外からでも閲覧できるURLを発行
1. ※ローカルで起動しているページのポート番号を入れ起動する。
1. `$ ngrok http 3000`
1. ※ローカルで起動しているページのポート番号を入れ起動する。
1. `$ ngrok http 3000`

参考: [ngrokを使用してローカル環境を外部に公開する - Qiita](https://qiita.com/kitaro729/items/44214f9f81d3ebda58bd)

***

***

### npm-run-script
https://docs.npmjs.com/cli/run-script

Lifecycle scripts
run無し実行できるコマンド
```
$ npm start
$ npm restart
$ npm stop
$ npm test
```

### npm
https://docs.npmjs.com/getting-started/what-is-npm

| command | discription |
| ------------ | ---------------------------------------------- |
| access | Set access level on published packages |
| adduser | Add a registry user account |
| bin | Display npm bin folder |
| bugs | Bugs for a package in a web browser maybe |
| c | Manage the npm configuration files |
| cache | Manipulates packages cache |
| completion | Tab Completion for npm |
| config | Manage the npm configuration files |
| ddp | Reduce duplication |
| dedupe | Reduce duplication |
| deprecate | Deprecate a version of a package |
| dist-tag | Modify package distribution tags |
| docs | Docs for a package in a web browser maybe |
| doctor | Check your environments |
| edit | Edit an installed package |
| explore | Browse an installed package |
| get | |
| help | Get help on npm |
| help-search | Search npm help documentation |
| i | Install a package |
| init | Interactively create a package.json file |
| install | Install a package |
| install-test | package(s) and run tests |
| it | |
| link | Symlink a package folder |
| list | List installed packages |
| ln | Symlink a package folder |
| login | |
| logout | Log out of the registry |
| ls | List installed packages |
| outdated | Check for outdated packages |
| owner | Manage package owners |
| pack | Create a tarball from a package |
| ping | Ping npm registry |
| prefix | Display prefix |
| profile | Change settings on your registry profile |
| prune | Remove extraneous packages |
| publish | Publish a package |
| rb | Rebuild a package |
| rebuild | Rebuild a package |
| repo | Open package repository page in the browser |
| restart | Restart a package |
| root | Display npm root |
| run | Run arbitrary package scripts |
| run-script | Run arbitrary package scripts |
| s | Search for packages |
| se | Search for packages |
| search | Search for packages |
| set | |
| shrinkwrap | Lock down dependency versions for publication |
| star | Mark your favorite packages |
| stars | View packages marked as favorites |
| start | Start a package |
| stop | Stop a package |
| t | Test a package |
| team | Manage organization teams and team memberships |
| test | Test a package |
| token | Manage your authentication tokens |
| tst | Test a package |
| un | Remove a package |
| uninstall | Remove a package |
| unpublish | Remove a package from the registry |
| unstar | |
| up | Update a package |
| update | Update a package |
| v | View registry info |
| version | Bump a package version |
| view | View registry info |
| whoami | Display npm username |
## Thanks & Resources

* Design philosophy
* [MCSS - Multilayer CSS](https://operatino.github.io/MCSS/ja/)
* [npm で依存もタスクも一元化する - Qiita](http://qiita.com/Jxck_/items/efaff21b977ddc782971)
* [僕がnpm installに-gをつけないわけ - Qiita](https://qiita.com/Mic-U/items/cd456d6bea72937464f8)
* Role model
* [tj/frontend-boilerplate](https://github.com/tj/frontend-boilerplate)
* [h5bp/html5-boilerplate](https://github.com/h5bp/html5-boilerplate)
* [nmihalyov/gulp-pure-start](https://github.com/nmihalyov/gulp-pure-start)
* [minamarkham/sassy-starter](https://github.com/minamarkham/sassy-starter)
* [bjankord/Style-Guide-Boilerplate](https://github.com/bjankord/Style-Guide-Boilerplate)
* [mozilla-neutrino/neutrino-dev](https://github.com/mozilla-neutrino/neutrino-dev)
* [vigetlabs/blendid](https://github.com/vigetlabs/blendid)
* [kayac/kayac-html5-starter](https://github.com/kayac/kayac-html5-starter)
* [zoxon/gulp-front](https://github.com/zoxon/gulp-front)
* Reference
* [gulpjs/gulp](https://github.com/gulpjs/gulp/blob/master/docs/recipes/server-with-livereload-and-css-injection.md)
* [pugjs/pug](https://github.com/pugjs/pug)
Empty file added app/asset/views/.gitkeep
View file
Open in desktop
Empty file.
12 changes: 9 additions & 3 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<title>sample</title>
<meta charset="UTF-8" />
<title>テスト</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
<h1>Foo Bar Fighters</h1>
<header class="header"><img src="https://placehold.jp/c7c7c7/ebebeb/810x150.png?text=header" alt="header"></header>
<main class="main">
<div class="container">content</div>
</main>
<footer class="footer"><img src="https://placehold.jp/c7c7c7/ebebeb/810x150.png?text=footer" alt="footer"></footer>
</body>
</html>
Loading