0
Einrichten Gulp browserSync richtig
Ich habe Probleme Gulp mit der aktuellen Ordnerstruktur korrekt einrichten, wie oben gezeigt.
Hier ist meine 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);
});
Meine 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>
Hinweis: Ich habe einen SCSS Ordner im öffentlichen Ordner.
EDIT: Meine index.html ist innerhalb der Ansichten Ordner
Was mache ich falsch? In meinem console.log, sagt es, dass es seine styles.css erhalten kann nicht
zu ändern schwer zu sagen, was los ist, ohne auf die gesamte Verzeichnisstruktur zu schauen. Auf einen Blick vermute ich, dass Sie ein Problem mit relativen Pfaden haben. Es ist ziemlich ungewöhnlich, dass Sie Ihre Builddateien und statischen Dateien im selben Verzeichnis haben. Versuchen Sie, '.pipe (sass(). On ('error', sass.logError) ') anstelle der einfachen Methode sass() hinzuzufügen und sehen Sie, was sie sagt. –
Ich würde auch versuchen, Ihre scss-Quelle in etwas wie 'return gulp.src ('../ public/scss/**/*. Scss')' zu ändern –