继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

gulp 自动刷新配置文件

罂厢墨己
关注TA
已关注
手记 1
粉丝 1
获赞 2
//导入工具包 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']);输入代码
打开App,阅读手记
1人推荐
发表评论
随时随地看视频慕课网APP