我的gulp.js文件没有在浏览器上更新我的CSS(My gulp.js file is not updating my css on the browser)

我的gulp.js文件没有在浏览器上更新我的CSS(My gulp.js file is not updating my css on the browser)

我正在使用gulp.js文件将我较少的代码转换为css，然后使用BrowserSync自动更新网站，但是，当我保存文件时，没有进行任何更改。 我的gulp.js文件的代码如下：

var gulp = require('gulp'), less = require('gulp-less'), uglifycss = require("gulp-uglifycss"), path = require('path'), watch = require('gulp-watch'), autoprefixer = require('gulp-autoprefixer'), browserSync = require('browser-sync'), uglify = require('gulp-uglify'), sourcemaps = require('gulp-sourcemaps'), jshint = require('gulp-jshint'), imageResize = require('gulp-image-resize'), rename = require("gulp-rename"), changed = require("gulp-changed"), plumber = require("gulp-plumber"), cmq = require('gulp-combine-media-queries'); var run = require('gulp-run'); //gulp.src(['js/**/*.js', '!js/**/*.min.js']) gulp.task('default', function () { var devProxy = "mywebsite.dev.chand.co"; // } browserSync({ proxy: devProxy, files: "library/css/*.css" }); //gulp.watch('./library/less/**/*.less', ['compile-css']); gulp.watch('./library/less/**/*.less', ['compile-css']); gulp.watch(['./library/js/*.js', '!./library/js/main-built.js'], ['javascript']); }); gulp.task('javascript', function() { gulp.src(['./library/js/*.js','./library/js/components/*.js', '!./library/js/main-built.js', '!./library/js/cf7.js']) // ignore vendor stuff .pipe(plumber()) .pipe(jshint()) .pipe(jshint.reporter('default')); // gulp.src(['./library/js/**/*.js', '!./library/js/require.js']) //.pipe(uglify()) // .pipe(gulp.dest('library/dist/js')); run('r.js -o build.js').exec(); }); gulp.task('compile-css', function () { gulp.src('./library/less/main.less') .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer()) //.pipe(uglifycss()) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./library/css/')); gulp.src('./library/less/admin.less') .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer()) //.pipe(uglifycss()) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./library/css/')); gulp.src('./library/less/editor-style.less') .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer()) //.pipe(uglifycss()) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./library/css/')); gulp.src('./library/less/style-bootstrap.less') .pipe(plumber()) //.pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer()) //.pipe(uglifycss()) .pipe(gulp.dest('./library/css/')); return; }); gulp.task('dist-css', function () { gulp.src('./library/less/main.less') .pipe(less()) .pipe(autoprefixer()) .pipe(cmq({ log: true })) .pipe(uglifycss()) .pipe(gulp.dest('./library/css/')); gulp.src('./library/less/admin.less') //.pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer()) .pipe(uglifycss()) //.pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./library/css/')); gulp.src('./library/less/editor-style.less') //.pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer()) .pipe(uglifycss()) //.pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./library/css/')); }); gulp.task('resize-images', function () { // this doesn't happen automatically, because it's a bit intensive, it should be done when we need. var originalName; gulp.src("images/src/**/*.{jpg,png}") .pipe(changed("images/dist")) // This isn't ideal, but it'll work fine // Make sure that you go BIGGEST FIRST because of piping // Need to change renaming to the wordpress convention // need to specify heights? // need to do lossless optimisation // remember to set new name as well as new size for each resize. .pipe(imageResize({ imageMagick : true, width : 200 })) .pipe(rename(function (path) { originalName = path.basename; path.basename = originalName + "-200"; })) .pipe(gulp.dest("images/dist")) .pipe(imageResize({ imageMagick : true, width : 100 })) .pipe(rename(function (path) { path.basename = originalName + "-100"; })) .pipe(gulp.dest("images/dist")); });

I am using a gulp.js file to convert my less code to css and then update the website automatically on save using BrowserSync however, when I save the file no changes have been made. the code for my gulp.js file is below:

var gulp = require('gulp'), less = require('gulp-less'), uglifycss = require("gulp-uglifycss"), path = require('path'), watch = require('gulp-watch'), autoprefixer = require('gulp-autoprefixer'), browserSync = require('browser-sync'), uglify = require('gulp-uglify'), sourcemaps = require('gulp-sourcemaps'), jshint = require('gulp-jshint'), imageResize = require('gulp-image-resize'), rename = require("gulp-rename"), changed = require("gulp-changed"), plumber = require("gulp-plumber"), cmq = require('gulp-combine-media-queries'); var run = require('gulp-run'); //gulp.src(['js/**/*.js', '!js/**/*.min.js']) gulp.task('default', function () { var devProxy = "mywebsite.dev.chand.co"; // } browserSync({ proxy: devProxy, files: "library/css/*.css" }); //gulp.watch('./library/less/**/*.less', ['compile-css']); gulp.watch('./library/less/**/*.less', ['compile-css']); gulp.watch(['./library/js/*.js', '!./library/js/main-built.js'], ['javascript']); }); gulp.task('javascript', function() { gulp.src(['./library/js/*.js','./library/js/components/*.js', '!./library/js/main-built.js', '!./library/js/cf7.js']) // ignore vendor stuff .pipe(plumber()) .pipe(jshint()) .pipe(jshint.reporter('default')); // gulp.src(['./library/js/**/*.js', '!./library/js/require.js']) //.pipe(uglify()) // .pipe(gulp.dest('library/dist/js')); run('r.js -o build.js').exec(); }); gulp.task('compile-css', function () { gulp.src('./library/less/main.less') .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer()) //.pipe(uglifycss()) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./library/css/')); gulp.src('./library/less/admin.less') .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer()) //.pipe(uglifycss()) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./library/css/')); gulp.src('./library/less/editor-style.less') .pipe(plumber()) .pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer()) //.pipe(uglifycss()) .pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./library/css/')); gulp.src('./library/less/style-bootstrap.less') .pipe(plumber()) //.pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer()) //.pipe(uglifycss()) .pipe(gulp.dest('./library/css/')); return; }); gulp.task('dist-css', function () { gulp.src('./library/less/main.less') .pipe(less()) .pipe(autoprefixer()) .pipe(cmq({ log: true })) .pipe(uglifycss()) .pipe(gulp.dest('./library/css/')); gulp.src('./library/less/admin.less') //.pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer()) .pipe(uglifycss()) //.pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./library/css/')); gulp.src('./library/less/editor-style.less') //.pipe(sourcemaps.init()) .pipe(less()) .pipe(autoprefixer()) .pipe(uglifycss()) //.pipe(sourcemaps.write('./maps')) .pipe(gulp.dest('./library/css/')); }); gulp.task('resize-images', function () { // this doesn't happen automatically, because it's a bit intensive, it should be done when we need. var originalName; gulp.src("images/src/**/*.{jpg,png}") .pipe(changed("images/dist")) // This isn't ideal, but it'll work fine // Make sure that you go BIGGEST FIRST because of piping // Need to change renaming to the wordpress convention // need to specify heights? // need to do lossless optimisation // remember to set new name as well as new size for each resize. .pipe(imageResize({ imageMagick : true, width : 200 })) .pipe(rename(function (path) { originalName = path.basename; path.basename = originalName + "-200"; })) .pipe(gulp.dest("images/dist")) .pipe(imageResize({ imageMagick : true, width : 100 })) .pipe(rename(function (path) { path.basename = originalName + "-100"; })) .pipe(gulp.dest("images/dist")); });

最满意答案

看起来你有一个缓存问题我为css + browsersync阅读了更多关于此的内容。 这篇文章可能对你有帮助。 这可能是你的解决方案。

将手表移到单独的任务中

gulp.task('watch', ['browser-sync'], function(){ gulp.watch('./library/less/**/*.less', ['compile-css']); gulp.watch('./library/css/**/*.css').on('change', browserSync.reload); });

并让它依赖于browser-sync

gulp.task('browser-sync', function() { var devProxy = "mywebsite.dev.chand.co"; browserSync({ proxy: devProxy, files: "library/css/*.css" }); });

然后将default更改为

gulp.task('default', 'watch');

在这里阅读有关重新加载+ browserSync的更多信息

It looks like you are having a caching problem I read more about this for css + browsersync. this post might help you. This could be your solution then.

move your watch to a seperate task

gulp.task('watch', ['browser-sync'], function(){ gulp.watch('./library/less/**/*.less', ['compile-css']); gulp.watch('./library/css/**/*.css').on('change', browserSync.reload); });

and let it depend on browser-sync

gulp.task('browser-sync', function() { var devProxy = "mywebsite.dev.chand.co"; browserSync({ proxy: devProxy, files: "library/css/*.css" }); });

And then change default to

gulp.task('default', 'watch');

read more about reloading + browserSync here