#browser-sync

How to install and use NPM package browser-sync

Introduction

Browsersync is a Node.js module. It provides a platform for fast network applications.

It is a Time saving synchronized browser testing.

In short, it creates a server like http://localhost:3000/ and watches the file changes. When our specified files change it auto-reload the browser and show these changes instantly.

It saves our time to refresh the browser, while…

install node, then:

npm install gulp-cli -g sudo npm install gulp-cli -g sudo npm install gulp -D

sudo npm install browser-sync --save-dev

then you need a gulpfile.js:

var gulp        = require('gulp'); var browserSync = require('browser-sync').create(); var reload      = browserSync.reload; // Static server gulp.task('browser-sync', function() {    browserSync.init({        server: {            baseDir: "./"        }    });  gulp.watch('public/**/*.html').on('change', reload);  gulp.watch('public/**/*.js').on('change', reload);  gulp.watch('public/**/*.css').on('change', reload); });

FROM: https://www.browsersync.io/#install

[1] Install globally using npm

npm install -g browser-sync

[2] Tell browser-sync to watch a file or files and reload if there is any change - like if webpack creates a new one.

NOTE: In this case we’re starting it up as a proxy because the site is already being served by apache

browser-sync start --proxy "brokenbaysoftware.dev " --files "scripts/main.dist.js"

[3] Set it up as an npm script in package.json

FROM: http://substack.net/task_automation_with_npm_run

Windows環境で～というほど特に違いはないんだけどWindows7で環境構築した備忘録。 使いまわせるようにかつあまり環境を汚さないようにgulp以外はlocalにいれるようにした。 かつ、あんまりCUIに慣れてない人向けに書いたつもり

インストールするもの

git

node.js

gulp

browser-sync

stylus

gulp-stylus

jade

gulp-jade

node.jsのインストール

http://nodejs.jp/nodejs.org_ja/docs/v0.10/

上記のサイトからインストールを押してぽちぽちするだけ。筆者DL時点ではv0.10.25。最近ではnode.jsを入れればnpmも入るんだね。

gitのインストール

http://msysgit.github.io/

上記サイトからDownloadおしてポチポチ。筆者DL時点ではGit-1.9.4-preview20140815.exe

ここから先はコマンドプロンプトを使います

ここはコマンドプロンプトでの作業

コマンドプロンプトとはスタートメニューのアクセサリの中にある黒い奴

まず開発環境を作りたいフォルダーを開く。 そこでShift + 右クリックを押すと出てくる「コマンドウィンドウでここを開く(W)」をクリックするとコマンドプロンプトが立ち上がる。 パスとかcdとかわからない人は上記操作で開いたコマンドプロンプトで行うように

リポジトリのクローン

git clone https://github.com/grazios/template.git cd template

gulpをインストール

npm i -g gulp npm link gulp

その他モジュールをインストール

時間がかかるかもしれない

npm i

実行

gulp