#browser-sync

[maheshwaghmare]

How to install and use NPM package 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…

View On WordPress

[rwoodleyhowto]

gulp, browser-sync

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); });

gulp browser-sync

[k7n4n5t3w4rt-devlog]

Browser-Sync

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

 "scripts": { ...     "watch": "./node_modules/webpack/bin/webpack.js -d --watch",     "reload": "browser-sync start --proxy \"brokenbaysoftware.dev\" --files \"scripts/main.dist.js\"",     "watch_reload": "npm run watch & npm run reload"  },

[toshihiko461-blog]

Windows7環境でgulpとbrowserSyncとjadeとstylus

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

これでweb_publicの中身が更新されれば勝手にリロードされる。 jadeやstylusも入っているので基本的なことはできる。まだまだjshintとかbrowserifyとかconcatとか素敵モジュールは色々あるけどとりあえずこれで

[kazu69]

[superfine-de]

Introducing Browser-Sync