Sass 设置gulp+;browsersync编译css并上传到站点
我正在尝试设置gulp来编译SCS并将其上载到站点,之后我希望在浏览器中看到预览。启动主galp任务时,浏览器仅启动一次。编辑SCS时,将再次编译该文件并将其上载到站点。但浏览器不会随更改而更新。请帮忙,我知道这个问题很幼稚,但仍然是。My gulpfile.js-在互联网上找到,试图为自己定制:Sass 设置gulp+;browsersync编译css并上传到站点,sass,gulp,gulp-browser-sync,Sass,Gulp,Gulp Browser Sync,我正在尝试设置gulp来编译SCS并将其上载到站点,之后我希望在浏览器中看到预览。启动主galp任务时,浏览器仅启动一次。编辑SCS时,将再次编译该文件并将其上载到站点。但浏览器不会随更改而更新。请帮忙,我知道这个问题很幼稚,但仍然是。My gulpfile.js-在互联网上找到,试图为自己定制: var gulp = require( 'gulp' ); var sass = require( 'gulp-sass' ); var comb = require('gulp-csscomb');
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',['sass', 'comb', 'deploy', 'browser-sync'], function() {
gulp.watch('./sass/**/*.scss', ['sass', 'comb', 'deploy', 'browser-sync']);
});