akkey247
3/14/2017 - 1:04 PM

【gulp】ブラウザ自動更新

【gulp】ブラウザ自動更新

src\index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>gulpテスト</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1 class="message">Hello World!!</h1>
</body>
</html>
src\css\style.css
content_copyfile_download
@charset "UTF-8";

.message {
    color: blue;
}
package.json
content_copyfile_download
{
  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.18.8",
    "gulp": "^3.9.1",
    "gulp-plumber": "^1.1.0"
  }
}
gulpfile.js
content_copyfile_download
var gulp = require('gulp');
var plumber = require("gulp-plumber");
var browserSync = require("browser-sync");

gulp.task("server", function() {
    browserSync({
        server: {
            baseDir: "src/"
        }
    });
});

gulp.task('browser-reload', function () {
  browserSync.reload();
});

gulp.task("default",['server'], function() {
    gulp.watch([
        'src/css/*.css',
        'src/index.html'
    ],['browser-reload']);
});
README.md
content_copyfile_download
  • Rendered
  • Source

使い方

  1. パッケージインストール
$ npm i
  1. gulp 実行
$ gulp

ブラウザが立ち上がって、青い文字で「Hello World!!」と表示されたら成功。
src/css/style.css の color: blue; を color: red; に変更したりすると、自動でブラウザが更新されて反映される。