Khi chạy gulp. Nó chạy và biên dịch SASS một lần. Làm cách nào tôi có thể điều chỉnh đồng hồ để đồng hồ tiếp tục theo dõi các thay đổi. Tôi có cần thêm usePolling: true hoặc usegulp.series không. Tôi đang làm theo hướng dẫn chính xác từ Bootstrap 4 SASS - Bộ khởi động Barrio
thiết lập của tôi:
lõi drupal 9.1.10
bootstrap_barrio 8.x-4.33
bootstrap_sass 8.x-1.13
nút v12.22.1
chiều 6.14.12
phiên bản gulp CLI: 2.3.0
gulp Phiên bản cục bộ: 4.0.2
Vagrant trên Windows bằng máy ảo Redhat 7
hãy nuốt nước bọt = yêu cầu ('nuốt nước bọt'),
sass = yêu cầu ('gulp-sass'),
sourcemaps = yêu cầu('gulp-sourcemaps'),
cleanCss = yêu cầu('gulp-clean-css'),
đổi tên = yêu cầu ('gulp-đổi tên'),
postcss = yêu cầu('gulp-postcss'),
autoprefixer = yêu cầu('autoprefixer'),
browserSync = yêu cầu('đồng bộ hóa trình duyệt').create()
đường dẫn const = {
scss: {
src: './scss/style.scss',
đích: './css',
xem: './scss/**/*.scss',
bootstrap: './node_modules/bootstrap/scss/bootstrap.scss'
},
js: {
bootstrap: './node_modules/bootstrap/dist/js/bootstrap.min.js',
jquery: './node_modules/jquery/dist/jquery.min.js',
popper: 'node_modules/popper.js/dist/umd/popper.min.js',
popper: 'node_modules/popper.js/dist/umd/popper.min.js.map',
đích: './js'
}
}
// Biên dịch sass thành CSS & tự động đưa vào trình duyệt
kiểu hàm () {
trả về gulp.src([paths.scss.bootstrap,paths.scss.src])
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss([autoprefixer({
trình duyệt: [
'Chrome >= 35',
'Firefox >= 38',
'Cạnh >= 12',
'Người khám phá >= 10',
'iOS >= 8',
'Safari >= 8',
'Android 2.3',
'Android >= 4',
'Opera >= 12']
})])))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.scss.dest))
.pipe(cleanCss())
.pipe(đổi tên({ hậu tố: '.min' }))
.pipe(gulp.dest(paths.scss.dest))
.pipe(browserSync.stream())
}
// Di chuyển các tệp javascript vào thư mục js của chúng tôi
hàm js() {
trả về gulp.src([paths.js.bootstrap,paths.js.jquery,paths.js.popper])
.pipe(gulp.dest(paths.js.dest))
.pipe(browserSync.stream())
}
// Máy chủ tĩnh + xem tệp scss/html
hàm phục vụ () {
browserSync.init({
proxy: 'http://orgex1',
mở: sai,
})
gulp.watch([paths.scss.watch,paths.scs.bootstrap],styles).on('change', browserSync.reload)
}
const build = gulp.series(kiểu, gulp.parallel(js, phục vụ))
xuất khẩu.styles = phong cách
xuất khẩu.js = js
xuất khẩu.serve = phục vụ
xuất khẩu.default = xây dựng
Kết quả khi chạy gulp:
[bản trình bày vagrant@vagrant6]$ nuốt nước bọt
[15:47:33] Sử dụng gulpfile /var/www/html/orgex1/web/themes/custom/presentation/gulpfile.js
[15:47:33] Đang bắt đầu 'mặc định'...
[15:47:33] Bắt đầu 'phong cách'...
[15:47:37] Hoàn thành 'kiểu' sau 3,62 giây
[15:47:37] Bắt đầu 'js'...
[15:47:37] Bắt đầu 'phục vụ'...
[Đồng bộ hóa trình duyệt] 3 tệp đã thay đổi (bootstrap.min.js, jquery.min.js, popper.min.js.map)
[15:47:37] Đã hoàn thành 'js' sau 56 ms
[Đồng bộ hóa trình duyệt] Ủy quyền: http://orgex1
[Đồng bộ hóa trình duyệt] Truy cập URL:
----------------------------------
Cục bộ: http://localhost:3000
Bên ngoài: http://10.0.2.15:3000
----------------------------------
Giao diện người dùng: http://localhost:3001
Giao diện người dùng bên ngoài: http://localhost:3001
----------------------------------
