browserSync.reload가 Gulp 작업을 사용하여 실행하지 않습니다.

Question

Gulp 작업에 많은 시간 동안 문제가 있습니다. 어떻게 작동시키는 지 알 수 없었습니다.

내가 먼저 내 프로젝트 구조을 보여주지 :

project/ 
| 
|-- Gulp/ 
| |-- Base/ 
|  |-- start-server.js 
|  |-- sass.js 
|   ... 
| |-- Watch/ 
|  |-- watch-sass.js 
|   ... 
| |-- config.js 
|  ... 
|-- gulpfile.js 
| ... 

이 또한 나를이 구조에서 언급 된 각 파일의 코드를 보여 드리겠습니다. gulpfile.js

/*jslint node: true */ 
"use strict"; 

var requireDir = require('require-dir'); // Node module to require whole directories 

// ***** Require all tasks from Gulp folder ***** 
requireDir('./Gulp', { 
    recurse: true 
}); 

꿀꺽/config.js

module.exports = { 
    paths: { 
    Project: { 
     dir:   './', 
     src:   './www', 
     dist:   './dist' 
    }, 

    HTML: { 
     all:   './www/Views/**/**/*.html', 
     dir:   './www/Views', 
     entry:   './www/Views/index.html' 
    }, 

    Sass: { 
     all:   './www/StyleSheets/Sass/**/**/*.scss', 
     dir:   './www/StyleSheets/Sass', 
     entry:   './www/StyleSheets/Sass/main.scss', 
     map:   '../../../dist/maps/sass', 
     vendor:   './www/StyleSheets/Sass/Vendor/**/*.scss' 
    }, 

    CSS: { 
     all:   './www/StyleSheets/CSS/**/**/*.css', 
     dir:   './www/StyleSheets/CSS', 
     entry:   './www/StyleSheets/CSS/main.css', 
     map:   '../../../dist/maps/css', 
     vendor:   './www/StyleSheets/CSS/Vendor/**/*.css' 
    }, 

    JS: { 
     all:   './www/JavaScripts/**/**/*.js', 
     dir:   './www/JavaScripts', 
     entry:   './www/JavaScripts/app.js', 
     map:   '../../../dist/maps/js', 
     vendor:   './www/JavaScripts/Vendor/**/*.js' 
    }, 
    // ... 
    } 
}; 

꿀꺽/자료/자동 reload.js

var gulp   = require('gulp'), 
    config  = require('../config'); 

// ********* IMPORTS ********* 
var browserSync = require('browser-sync').create(); 
// ***END*** IMPORTS ***END*** 

// ***** Start server on localhost for live preview ***** 
gulp.task('start-server', function() { 
    browserSync.init({ 
    server: { 
     baseDir: config.paths.Project.dir 
    }, 
    open: true 
    }); 
}); 

꿀꺽/자료/sass.js

var gulp   = require('gulp'), 
    config  = require('../config'); 

// ********* IMPORTS ********* 
var sass   = require('gulp-sass'), 
    browserSync = require('browser-sync'), 
    notify  = require('gulp-notify'), 
    sourceMaps = require('gulp-sourcemaps'); 
// ***END*** IMPORTS ***END*** 

// ***** Sass compiler ***** 
gulp.task('sass', function() { 
    return gulp.src(config.paths.Sass.all) 
    .pipe(sourceMaps.init()) 
    .pipe(sass({ 
     style: 'compressed' 
    })) 
    .on("error", notify.onError(function (error) { 
     return "Error: " + error.message; 
    })) 
    .pipe(sourceMaps.write(config.paths.Sass.map)) 
    .pipe(gulp.dest(config.paths.CSS.dir)) 
    .pipe(browserSync.reload({ 
     stream: true 
    })); 
}); 

꿀꺽/시계/시계 - sass.js

var gulp   = require('gulp'), 
    config  = require('../config'); 

// ********* IMPORTS ********* 
var browserSync = require('browser-sync'), 
    runSequence = require('run-sequence'); 
// ***END*** IMPORTS ***END*** 

// ***** Gulp watch Sass files ***** 
gulp.task('watch-sass', ['start-server'], function() { 
    gulp.watch(config.paths.Sass.all, ['sass', browserSync.reload]); 
}); 

문제 설명 :

마지막 파일에서 꿀꺽/시계/시계 - sass.js 함수 browserSync.reload 않습니다. 일. 'watch-sass start-server sass'이 작동하면 문제없이 실행됩니다. 그러나 * .scss 파일을 컴파일하고 나면 browserSync.reload를 사용하여 페이지를 자동 새로 고치지 않아 그 이유를 알 수 없습니다. 누구든지 나를 도울 수 있습니까?

Answer 1

나는 꿀꺽 꿀꺽하기에 조금 익숙하지만 꿀꺽 꿀꺽 마시고 설치하거나 가져 오지 않은 것처럼 보입니다. 설치/가져 오기.

var watch = require("gulp-watch"); 

그런 시계를 gulp.watch 교체 :

// ***** Gulp watch Sass files ***** 
gulp.task('watch-sass', ['auto-reload'], function() { 
    watch(config.paths.Sass.all, ['sass'], function() { 
     browserSync.reload(); 
    }); 
}); 

위 그렇지 않다면, 아마도 당신은 여기 내 꿀꺽 파일에 코드를 비교할 수 : https://github.com/FunkSoulNinja/travel-site

Answer 2

내가 발견하면 그 '스타트 - 서버'을 'watch-sass.js'파일에 넣어서 자신의 파일로 분리하는 대신 작동합니다.

는

시계 - sass.js에 대한 코드는 다음과 같습니다

var gulp   = require('gulp'), 
    config  = require('../config'); 

// ********* IMPORTS ********* 
var browserSync = require('browser-sync').create(), 
    runSequence = require('run-sequence'); 
// ***END*** IMPORTS ***END*** 

// ***** Start server on localhost for live preview ***** 
gulp.task('start-server', function() { 
    browserSync.init({ 
    server: { 
     baseDir: config.paths.Project.dir 
    }, 
    open: true 
    }); 
}); 

// ***** Gulp watch Sass files ***** 
gulp.task('watch-sass', ['start-server'], function() { 
    gulp.watch(config.paths.Sass.all, function() { 
    runSequence(
     'sass', 
     'useref-css', 
     'move-index', 
     browserSync.reload 
    ); 
    }); 
}); 

함수 browserSync.reload 작품. 적어도이 방법에서. 분리 된 파일에서 '시작 서버'작업을하고 싶었지만 어떻게 해야할지 잘 모릅니다.

그래서이 방법을 기반으로 JS 파일과 비슷한 것을하고 싶었습니다. 작업의 이름을 지정하고 'watch-js.js'을 제출했습니다. 이 코드는 거의 완벽하게 동일하며 runSequence의 다른 설정 경로와 작업 만 있습니다. 시계 - js.js

var gulp   = require('gulp'), 
    config  = require('../config'); 

// ********* IMPORTS ********* 
var browserSync = require('browser-sync').create(), 
    runSequence = require('run-sequence'); 
// ***END*** IMPORTS ***END*** 

// ***** Start server on localhost for live preview ***** 
gulp.task('start-server', function() { 
    browserSync.init({ 
    server: { 
     baseDir: config.paths.Project.dir 
    }, 
    open: true 
    }); 
}); 

// ***** Gulp watch JS files ***** 
gulp.task('watch-js', ['start-server'], function() { 
    gulp.watch(config.paths.JS.all, function() { 
    runSequence(
     'useref-js', 
     'move-index', 
     browserSync.reload 
    ); 
    }); 
}); 

Aaaand 여기에 놀라운 온다. 동일한 작업을 사용하여이 작업을 실행하려면 browserSync.reload가 실행되고 있지 않습니다.! 나는 그것이 작동하는 손목 시계와 똑같이 작동하는 것을 제외했다. 나는 지금 정말로 길을 잃었다. 경험이 많은 사람은 내가하는 일을 나를 도울 수 있을까?