I am having some issues with my gulpfile configuration when I edit main.scss, gulp watch is running in the terminal but it does not detect the changes made in main.scss, but when I run gulp.sass, it detects the changes, I have looked through some of the other "gulp watch issues" and I still can't find a fix, what am I doing wrong? Let me know if it needs to be more clear
Folder directory -
weather-app
---node_modules
---public
---css
---main.css
---js
---main.js
---index.html
---src
---sass
---main.scss
---mobile.scss
---js
---main.js
---gulpfile.js
---package-lock.json
---package.json
const gulp = require('gulp'), sass = require('gulp-sass'), uglifyCss = require('gulp-uglifycss'), concatCss = require('gulp-concat-css'); gulp.task('sass', () => { gulp.src('src/sass/*.scss') .pipe(sass()) .pipe(uglifyCss({ 'uglyComments': true })) .pipe(concatCss('main.css')) .pipe(gulp.dest('public/css')) }) gulp.task('default', ['sass']); gulp.task('watch', () => { gulp.watch('src/sass/*.scss', ['watch']) })
gulp.watch mustn't be a returned value.
Don't forget to use the double asterisk as well, for targeting any .scss file inside your sass folder.
gulp.task('watch', function() {
gulp.watch('src/sass/**/*.scss', ['watch'])
})
将gulp.watch('src/sass/**/*.scss', ['watch'])
监视行更改为gulp.watch('src/sass/**/*.scss', ['watch'])
const gulp = require('gulp'), sass = require('gulp-sass'), uglifyCss = require('gulp-uglifycss'), concatCss = require('gulp-concat-css'); gulp.task('sass', () => { gulp.src('src/sass/**/*.scss') // gulp.src('src/sass/*.scss') .pipe(sass()) .pipe(concatCss('main.css')) .pipe(uglifyCss({ 'uglyComments': true })) .pipe(gulp.dest('public/css')) }) gulp.task('default', ['watch']); //i changed 'sass' to 'watch' gulp.task('watch', function () { gulp.watch('src/sass/**/*.scss', ['sass']) })
thanks, everyone for contributing, I fixed it, it was a minor error I overlooked
This is the wrong line:
gulp.task('default', ['sass']);
So you must call watch as default task. So this is solution:
gulp.task('default', ['watch']);
AND this line change from
gulp.watch('src/sass/*.scss', ['watch'])
to
gulp.watch('src/sass/*.scss', ['sass'])
That's all. :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.