Буду благодарен за помощь, поскольку сам я ещё новичок в этом деле.
Есть следующие плагины: browser-sync, gulp-sass, gulp-autoprefixer.
И следующая файловая структура.
- dist
- src
- css
- fonts
- img
- js
- sass
- index.html
Нужно настроить gulpfile.js так, чтобы при вызове таска "gulp" запускался browser-sync и отслеживал изменения в index.html, во всех js-файлах и во всех sass-файлах, компилируя последние в css-файл, автоматически расставляя вендорные префиксы и отображая изменения в реальном времени.
А при запуске "gulp dist" все папки и файлы (кроме папки sass и её содержимого) переносились в папу dist.
Вот мой gulpfile.js, подскажите, где и что я делаю не так?
let gulp = require('gulp'),
browserSync = require('browser-sync').create(),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer')
gulp.task('sass', function(done) {
gulp.src("src/sass/**/*.sass || scss")
.pipe(sass())
.pipe(gulp.dest("scr/css"))
.pipe(browserSync.stream());
done();
});
gulp.task('serve', function(done) {
browserSync.init({
server: "src/"
});
gulp.watch("scr/sass/**/*.sass || scss", gulp.series('sass'));
gulp.watch("scr/*.html").on('change', () => {
browserSync.reload();
done();
});
done();
});
gulp.task('dist', function(done) {
gulp.src('src/**/*.html, .css, .js')
.pipe(gulp.dest('dist/'))
});
gulp.task('default', gulp.series('sass', 'serve'));
gulp.task('dist', gulp.('dist'));