设置 gulp + browsersync 来编译 css 并上传到站点

问题描述

我正在尝试设置 gulp 来编译 scss 并将其上传到站点，之后我想在浏览器中查看预览。浏览器仅在 galp 主任务启动时启动一次。编辑scss时，重新编译文件上传到站点。但是浏览器不会随着更改而更新。请帮助，我明白这个问题很幼稚，但仍然如此。我的 gulpfile.js - 在互联网上找到，试图为自己定制：

var gulp = require( 'gulp' );
var sass = require( 'gulp-sass' );
var comb = require('gulp-csscomb');
var autoprefixer = require('gulp-autoprefixer');
var gutil = require( 'gulp-util' );
var ftp = require( 'vinyl-ftp' );
var notify = require('gulp-notify');
var browserSync = require('browser-sync').create();





//browser sync
gulp.task('browser-sync',function() {
    browserSync.init({
        
        
        host: 'my-web-space.pro',proxy: 'mysite.com',port:      80,// порт через который будет проксироваться сервер
        open: 'external',// указываем,что наш url внешний 
        notify:    true,ghost:     true,},function(){
        // something you want to do
    }
    );

    
});




// Compile and autoprefix SASS
gulp.task('sass',function () {
    return gulp.src('./sass/**/*.scss')
        .pipe(sass({
            outputStyle: 'expanded'
        }).on('error',sass.logError))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],cascade: false
        }))
        .pipe(gulp.dest('./build'));
        
        
});

// Beautify and format CSS
gulp.task('comb',['sass'],function() {
    return gulp.src('./build/*.css')
    .pipe(comb())
    .pipe(gulp.dest('./build/'));
});

gulp.task( 'deploy',['sass','comb'],function () {

    var conn = ftp.create( {
        host:     '',user:     '',password: '',parallel: 3,log:      gutil.log
    } );

    var globs = [
        './build/*.css'
    ];

    // turn off buffering in gulp.src for best performance
    return gulp.src( globs,{
            base: './build',buffer: false
        } )
        .pipe( conn.dest( '/my-web-space.pro/wp-content/themes/astra-child/custom-css/' ) )
        .pipe(notify("Загрузка завершена успешно!"))
        .pipe(browserSync.reload({stream:true}));
        
} );

gulp.task('default','comb','deploy','browser-sync'],function() {
    gulp.watch('./sass/**/*.scss','browser-sync']);
    
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）