Javascript 我的gulp.js文件没有在浏览器上更新我的css

我正在使用gulp.js文件将我的less代码转换为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"));

            });

---

看起来您的缓存有问题。我在css+browsersync上读了更多关于这方面的内容。 也许对你有帮助。 那可能是你的解决办法

将手表移到另一个任务

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

并让它依赖于

浏览器同步

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

然后将

default

更改为

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

---

阅读有关重新加载+browserSync的更多信息，手动删除压缩的CSS和JavaScript文件也是值得的

rm-fweb/css/compressed/style.css

例如

---

…然后再次尝试一次

吞咽构建

。

首先，您可以使代码更加简单。Gulp.src可以glob（请参见：）

返回Gulp.src（'./library/less/{main，admin，editor style，style bootstrap}.less'）.pipe（plumber（））.pipe（sourcemaps.init（））.pipe（less（））/.pipe（autoprefixer（））/.pipe（sourcemaps.write（'./maps'））.pipe（Gulp.dest（'./library/css/）你的意思是这些文件没有更新，还是它们从未写入预期位置？@Rik-谢谢，我会清理它。当我更新less文件时，我可以看到它在CSS中发生了更改，但它不会更新我的页面CSS，尽管它会在我做出更改后立即重新加载页面。因此，如果我理解正确，您的less任务正在工作，并且您的CSS被移动到正确的位置，但在刷新时它不会加载到浏览器中。这听起来像是浏览器中的缓存问题。如果手动重新加载（Ctrl+F5），会发生什么情况？它会刷新css吗？因为这肯定是一个缓存问题。我为YouTunks添加了一个可能的解决方案。我明天上班时会试试这个解决办法。只是一个想法可能是源地图没有更新吗？我怀疑这一点。源映射仅用于调试目的。在你的代码片段中，它们也被注释了，但不知道你是否对其进行了注释以查看是否有帮助。我尝试过此解决方案，但它似乎仍然没有更新页面上的css。你是否尝试过使用Ctrl+F5手动重新加载该页面，然后你看到了更改？现在正在运行。出于某种原因，它开始更新。谢谢Rik的帮助和努力！