0

実現したいこと

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です。

1
  • 使用しているOSと、ブラウザの情報を追記してください。システムにアクセスする系統は、その2つに大きく依存します。 Commented 2016年1月30日 11:21

1 件の回答 1

1

予想ですが、

  • 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を使用した部分の抜粋です。

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

以下gulpfile全文になります。

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。