

### 実現したいこと

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内の記述です。

[code]

    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"]);
    });
    
[/code]

* * *

インストールしたものです。(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です。


CC BY-SA 3.0
2016-01-30T05:40:51.177
21501
2016-09-05T15:35:08.123
2016-01-30T06:51:38.780
76
14181
question
javascript gulp sass
sassのブラウザへの自動反映について


予想ですが、

  * `gulp server` => `watch`してないので更新されない
  * `gulp sass` => 初期化してない（`browser({OPTIONS})`）ので`reload`でエラー

という状態になっているのかもしれません。GitHubに例がありますので参考にしてみてはいかがでしょうか。

<https://github.com/Browsersync/recipes/tree/master/recipes/gulp.sass>

公式サイトにもGulp + browser-sync + sassのドキュメントがあります。

<https://browsersync.io/docs/gulp/#gulp-sass-css>

また、僕も以前似たようなことをやったことがありますので、もしかしたらその際の実装も参考になるかもしれません。

`browser-sync`を使用した部分の抜粋です。

[code]

    var gulp = require("gulp");
    var browserSync = require("browser-sync").create();
    
    gulp.task("dev", function() {
      browserSync.init({"server": "build"});
    
      gulp.watch("source/**/*", function() {
        buildHTML()
          .then(buildCSS)
          .then(buildJS)
          .then(buildASSETS)
          .then(browserSync.reload);
      });
    });
    
[/code]

以下gulpfile全文になります。

[code]

    var gulp = require("gulp");
    var jade = require("gulp-jade");
    var sass = require("gulp-sass");
    var browserify = require("browserify");
    var babelify = require("babelify");
    var source = require("vinyl-source-stream");
    var plumber = require("gulp-plumber");
    var browserSync = require("browser-sync").create();
    
    gulp.task("build-html", buildHTML);
    gulp.task("build-css", buildCSS);
    gulp.task("build-js", buildJS);
    gulp.task("build-assets", buildASSETS);
    
    gulp.task("build", [
      "build-html",
      "build-css",
      "build-js",
      "build-assets"
    ]);
    
    gulp.task("dev", function() {
      browserSync.init({"server": "build"});
    
      gulp.watch("source/**/*", function() {
        buildHTML()
          .then(buildCSS)
          .then(buildJS)
          .then(buildASSETS)
          .then(browserSync.reload);
      });
    });
    
    function buildHTML() {
      return new Promise(function(resolve, reject) {
        gulp.src(["source/**/*.jade", "!source/**/_*.jade"])
            .pipe(plumber())
            .pipe(jade({"pretty": true}))
            .pipe(gulp.dest("build"))
            .on("end", resolve);
      });
    };
    
    function buildCSS() {
      return new Promise(function(resolve, reject) {
        gulp.src(["source/**/*.scss", "!source/**/_*.scss"])
            .pipe(plumber())
            .pipe(sass({"outputStyle": "expanded"}))
            .pipe(gulp.dest("build"))
            .on("end", resolve);
      });
    };
    
    function buildJS() {
      return new Promise(function(resolve, reject) {
        browserify({
          "entries": ["source/javascripts/script.jsx"],
          "extensions": [".jsx"]
        }).transform("babelify")
          .bundle()
          .pipe(plumber())
          .pipe(source("script.js"))
          .pipe(gulp.dest("build/javascripts"))
          .on("end", resolve);
      });
    };
    
    function buildASSETS() {
      return new Promise(function(resolve, reject) {
        gulp.src(["source/**/*",
                  "!source/**/*.jade", "!source/**/*.scss", "!source/**/*.jsx",
                  "!source/**/layouts", "!source/**/modules", "!source/**/partials"])
            .pipe(gulp.dest("build"))
            .on("end", resolve);
      });
    };
    
[/code]


CC BY-SA 3.0
2016-02-01T03:56:39.927
21560
2016-02-01T04:07:02.397
2016-02-01T04:07:02.397
13493
13493
21501
answer