为了账号安全,请及时绑定邮箱和手机立即绑定

gulp 自动刷新配置文件

标签:
JavaScript
//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'); //本地安装gulp所用到的地方
var sass = require('gulp-sass');

// 定义一个sass的任务
gulp.task('sass', function () {
  return gulp.src('dist/css/*.scss')   //该任务针对的文件
  .pipe(sass.sync().on('error', sass.logError))
    .pipe(gulp.dest('dist/css'));  //将会在dist/css下生成*.css
});

// 监听sass编译 自动执行sass任务,编译监听sass并生成css文件
gulp.task('sass:watch', function () {
    gulp.watch('dist/css/*.scss', ['sass']);
});

 //引入gulp插件browser-sync
 var browserSync = require('browser-sync').create();
// 静态服务器 + 监听 scss/html/js 文件
gulp.task('browser-sync', function() {
    browserSync.init({ //初始化项目跟目录为'./'
        server: {
            baseDir: "./"
        }
    });
    gulp.watch('*.html').on('change', browserSync.reload);            //监听html文件的变化,自动重新载入
    gulp.watch('dist/css/*.css').on('change', browserSync.reload);    //监听css文件的变化,自动重新载入
    gulp.watch('dist/js/*.js').on('change', browserSync.reload);      //监听js文件的变化,自动重新载入

});

//默认启动的gulp任务数组['browser-sync', 'sass:watch']
gulp.task('default', ['browser-sync', 'sass:watch']);输入代码
点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消