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

Question

我正在使用 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"));

            });

Answer 1

您似乎遇到了缓存问题我阅读了有关 css + browsersync 的更多信息。 this post 可能会对您有所帮助。可能是您的解决方案。

将手表移至单独的任务

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 here

Answer 2

也值得尝试手动删除压缩的 CSS 和 JavaScript 文件。

rm -f web/css/compressed/style.css 例如

...然后再次尝试 gulp build。

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

My gulp.js file is not updating my css on the browser

javascript

css

less

gulp-watch

browser-sync