sassのブラウザへの自動反映について
実現したいこと
gulpを導入してsassをコンパイル後、ブラウザへの反映を自動化したいのですがうまく動きません。アドバイスをお願いします。
発生している問題
sassのコンパイルまでは動くのですが、その後のブラウザへの反映が動きません。以下コマンドプロンプトに表示されたエラーメッセージです。
event.js:141
throw er; // Unhandled 'error' eventError: 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です。