About automatic reflection of sass into the browser

What do you want to do

I want to automate the reflection in the browser after installing gulp and compiling sass, but it doesn't work well.Please give me some advice.

Problems you are having

It works until the sass compilation, but it doesn't work in the browser after that.The following error message appears at the command prompt:

event.js:141
below;// Unhandled 'error' event

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

Source Code

Description in gulpfile.js.

var gulp=require("gulp");
varass = require("gulp-sass");
var autoprefixer=require("gulp-autoprefixer");
variable = 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"]);
});

I installed it. (package.json)

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

Supplementary information (e.g. language/FW/tool version)

The node version is 4.2.6.

javascript gulp sass

2022-09-30 15:50

1 Answers

As expected,

gulp server=>watch Not updated
gulpsass=>Error in reload because it did not initialize (browser({OPTIONS})).

It may be a state thatGitHub has an example, so why don't you use it as a reference?

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

There is also a Gulp+browser-sync+ass document on the official website.

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

Also, I have done something similar before, so the implementation at that time may be helpful.

browser-sync excerpts from the section.

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

The following is the full gulpfile statement.

var gulp=require("gulp");
var jade=require("gulp-jade");
varass = 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);
  });
};

2022-09-30 15:50

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656