gulp创建本地服务器自动刷新浏览器

最新推荐文章于 2021-06-09 23:05:20 发布

原创最新推荐文章于 2021-06-09 23:05:20 发布 · 588 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 3 个专栏收录

34 篇文章

订阅专栏

nodejs

3 篇文章

订阅专栏

sass

1 篇文章

订阅专栏

本文介绍如何利用Gulp任务运行器配合Sass预处理器和Browser Sync插件，快速搭建一个支持实时编译Sass文件及自动刷新浏览器的前端开发环境。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var path = require('path');


var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');


var browserSync = require('browser-sync').create();//创建本地服务器


var sassPath = './src/sass';//sacc文件路径
var cssPath = './src/css';


gulp.task('sass',function(){
  gulp.src(sassPath+'/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(cssPath))
});


//服务器插件中，监视文件并自动刷新
gulp.task('serve',
function() {
  browserSync.init({ server: { baseDir: 'src' } })
});


gulp.watch(['src/sass/*.scss'],function(){
  gulp.run('sass');
});


gulp.watch(['src/js/**/*.js','src/css/*.css','src/html/*.html','src/html/*.js','src/*.html'],
  function(){
    browserSync.reload();
});


//默认行为,直接调用服务器
gulp.task('default',
  function(){
    gulp.run('serve');
    gulp.run('sass');
});