'Gulp or gulp watch doesn't watch file changes
I am trying to watch scss & js files.
so far I've tried this answer: gulp watch doesn't watch
How can I make sure all files are watched automatically when I run gulp
or gulp watch
My gulpfile looks like:
let gulp = require('gulp'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
cleanCss = require('gulp-clean-css'),
rename = require('gulp-rename'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
strip = require('gulp-strip-comments');
uglify = require('gulp-uglify');
browserSync = require('browser-sync').create()
const paths = {
scss: {
src: './scss/style.scss',
mobify: './scss/mobify.scss',
dest: './css',
// watch all the scss files in the scss folder
watch: './scss/**/*.scss',
bootstrap: './node_modules/bootstrap/scss/bootstrap.scss'
},
js: {
bootstrap: './node_modules/bootstrap/dist/js/bootstrap.min.js',
mobify: './scripts/mobify.js',
global: './scripts/global.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',
dest: './js'
}
}
// Compile sass into CSS & auto-inject into browsers
function styles () {
return gulp.src([paths.scss.bootstrap, paths.scss.mobify, paths.scss.src])
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(postcss([autoprefixer({
browsers: [
'Chrome >= 35',
'Firefox >= 38',
'Edge >= 12',
'Explorer >= 10',
'iOS >= 8',
'Safari >= 8',
'Android 2.3',
'Android >= 4',
'Opera >= 12']
})]))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.scss.dest))
.pipe(cleanCss())
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest(paths.scss.dest))
.pipe(browserSync.stream())
}
// Move the javascript files into our js folder
function js () {
// don't uglify the popper.js as it was giving some gulp errors
if (paths.js.popper) {
gulp.src([paths.js.popper])
.pipe(gulp.dest(paths.js.dest))
.pipe(browserSync.stream())
}
return gulp.src([paths.js.bootstrap, paths.js.global, paths.js.mobify, paths.js.jquery])
.pipe(strip())
.pipe(uglify())
.pipe(gulp.dest(paths.js.dest))
.pipe(browserSync.stream())
}
// Static Server + watching scss/html files
function serve () {
// set BrowserSync in a headless environment, you might want to set the open option to false)
browserSync.init({
proxy: 'https://mobify.io',
open: false
})
gulp.watch([paths.scss.watch, paths.scss.bootstrap], styles).on('change', browserSync.reload)
}
// new task to watch all scss files and compile scss if any change
gulp.task('watch', function () {
return gulp.watch([paths.scss.watch, paths.scss.mobify, paths.scss.bootstrap], styles);
})
const build = gulp.series(styles, gulp.parallel(js, serve))
exports.styles = styles
exports.js = js
exports.serve = serve
exports.default = build
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|