설정하기 꿀꺽 browserSync 제대로

나는 위와 같이 문제가 현재의 폴더 구조를 제대로 꿀꺽를 설정해야합니다.

여기 내 gulpfile.js있어 :

var gulp = require('gulp'); 
var sass = require('gulp-sass') 
var browserSync = require('browser-sync').create() 

gulp.task('sass', function(){ 
    return gulp.src('../public/scss/*') 
    .pipe(sass()) // Converts Sass to CSS with gulp-sass 
    .pipe(gulp.dest('../public/css')) 
    .pipe(browserSync.reload({ 
     stream: true 
    })) 
}); 

gulp.task('browserSync', function() { 
    browserSync.init({ 
    server: { 
     baseDir: 'public' 
    }, 
    }) 
}) 

gulp.task('watch', ['browserSync', 'sass'], function(){ 
    gulp.watch('../public/scss/**/*.scss', ['sass']); 
    // Reloads the browser whenever HTML or JS files change 
    gulp.watch('views/*.html', browserSync.reload); 
    gulp.watch('../public/javascript/**/*.js', browserSync.reload); 
    gulp.watch('../public/css/**/*.css', browserSync.reload); 
});

내 index.html을 :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta charset="UTF-8"> 
    <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="/public/css/styles.css"> 
    <title>FCC Image Search Abstraction</title> 
</head> 
<body> 
    <div class="container"> 
    <div class="row"> 
     <h1>Hello world</h1> 
    </div> 
    </div> 
</body> 
</html>

참고 : 나는 공용 폴더에하는 SCS 폴더가 않습니다.

편집 : 내 index.html을이보기 폴더 내가 잘못 뭐하는 거지

안쪽에? 내 CONSOLE.LOG에서, 그것은

출처

2016-08-05 Alejandro

에 대한 귀하의 HTML에 CSS 링크를 변경/

server: { baseDir: 'public'},

시도에서 공공 봉사 자사의 styles.css가를 GET 질수 있다고 전체 디렉토리 구조를 보지 않고 무엇이 잘못되었는지 알기가 어렵습니다. 언뜻 보면 상대 경로에 문제가있는 것 같습니다. 빌드 파일과 정적 파일을 같은 디렉토리에 두는 것은 매우 이례적인 일입니다. 단순한 sass() 메소드 대신'.pipe (sass(). on ('error', sass.logError))'를 추가하고 그녀가 말하는 것을 보아라. –

나는 당신의 scss 소스를'return gulp.src ('../ public/scss/**/*. scss')와 같은 것으로 변경하려고한다.' –

BrowserSync 예쁜

<link rel="stylesheet" href="/css/styles.css">

출처

2016-08-05 19:01:05 mrdotb

설정하기 꿀꺽 browserSync 제대로

답변

관련 문제