I recently started developing in Laravel but quickly ran into a problem with using Gulp and Vagrant. The problem is that when I compile my SCSS (SASS) to css, the browser doesn't seem to update the css file. The file is getting properly synced in vagrant and does not get cached by NGINX. I know this because I disabled caching on the server side and checked the synced-folder /var/www/my-project/public/css folder to see if the file got correctly compiled.
The file only correctly loads when I reload the vagrant box, which is weird as the synced-folder shows the correctly compiled file on the server. Clearing cache in the browser does not help. I have no idea where the problem lies. I use Google Chrome.
Below my server block and Gulpfile:
NGINX server-block (note that this is not Laravel homestead):
location / {
try_files $uri $uri/ /index.php;
add_header Last-Modified $date_gmt;
add_header Cache-Control 'no-store, no-cache, must-revalidate, $date, proxy-revalidate, max-age=0';
if_modified_since off;
expires off;
etag off;
}
location ~ \.php$ {
include snippets/fastcgi-php.conf;
# With php7.0-fpm:
fastcgi_pass unix:/run/php/php7.1-fpm.sock;
}
location ~ /\.ht {
deny all;
}
Gulp task:
gulp.task("sass", function () {
gulp.src(path.sass.src)
.pipe(plumber({
errorHandler: function (err) {
console.log(err.message);
this.emit("end");
}
}))
.pipe(sass())
.pipe(gulp.dest(path.sass.destination))
.pipe(notify({
message: "Sass compiled.",
onLast: true
}));
});
I hope someone can help me out.
