【gulp】ブラウザへの反映を自動化

Question

###前提・実現したいこと
gulpを導入してsassをコンパイル後、ブラウザへの反映を自動化したいのですがうまく動きません。アドバイスをお願いします。

###発生している問題・エラーメッセージ
sassのコンパイルまでは動くのですが、その後のブラウザへの反映が動きません。以下コマンドプロンプトに表示されたエラーメッセージです。

event.js:141
throw er; // Unhandled 'error' event

Error: spawn cmd ENOENT
at exports._errnoException (util.js:870:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:178:32)
at onErrorNT (internal/child_process.js:344:16)
at nextTickCallbackWith24Args (node.js:441:9)
at process._tickCallback (node.js:355:17)

###ソースコード
gulpfile.js内の記述です。

var gulp = require("gulp");
var sass = require("gulp-sass");
var autoprefixer = require("gulp-autoprefixer");
var uglify = require("gulp-uglify");
var browser = require("browser-sync");
var plumber = require("gulp-plumber");

gulp.task("server", function() {
browser({
server: {
baseDir: "./html"
}
});
});

gulp.task("sass", function() {
gulp.src("html/common/sass/**/*scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer())
.pipe(gulp.dest("./html/common/css"))
.pipe(browser.reload({stream:true}))
});

gulp.task("js", function() {
gulp.src(["html/common/js//*.js","!html/common/js/min//*.js"])
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest("./html/common/js/min"))
.pipe(browser.reload({stream:true}))
});

gulp.task("html", function() {
gulp.src(["html/**/*.html"])
.pipe(plumber())
.pipe(browser.reload({stream:true}))
});

gulp.task("default",['server'], function() {
gulp.watch(["html/common/js//*.js","!html/common/js/min//.js"],["js"]);
gulp.watch("html/common/sass/**/.scss",["sass"]);
gulp.watch("html/**/*.html",["html"]);
});

---

インストールしたものです。(package.json)

{
"name": "myproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.11.1",
"gulp": "^3.9.0",
"gulp-autoprefixer": "^3.1.0",
"gulp-sass": "^2.1.1",
"gulp-uglify": "^1.5.1"
}
}

###補足情報(言語/FW/ツール等のバージョンなど)
nodeのバージョンは4.2.6です。

Comments

[horse_n_deer]

devDependenciesにrequireしている`gulp-plumber`が定義されていませんが、インストールは終了していますか？

Answer 1

initが足りないです。browser.initにしてください。

公式ドキュメント
https://www.browsersync.io/docs/gulp/

gulp.task("server", function() { 
    browser.init({ // ここ 
        server: { 
            baseDir: "./html" 
        } 
    }); 
});