玩转gulp之watch监听文件自动编译

博客移至 https://www.dodoblog.cn/blog?id=5befc928e0feb34495b57035 

咱们在写页面的时候，用到sass less等css预处理器的时候，虽然写的很爽，可是有一个麻烦就是总是要不停的去编译文件

例如咱们写一个variable.scss时，但愿引入这个scss文件的index.scss list.scss都发生变化。可能还有不少不少。那咱们应该怎么作呢

还有若是咱们但愿html变化了就从新编译一下scss

 

诸如此类，ok咱们如今就开始着手解决问题。

1. 咱们上次讲了编译less的方法，参见如何用gulp编译less，咱们会在这个的基础上开始讲解。

2. 因为我更加钟爱sass，咱们如今回引入新的npm依赖，gulp-sass去编译我所写的sass文件，用法和gulp-less相同

 

解决多个sass文件同时编译，能够用通配符*来表示全部文件

gulp.task('sass',function(){
    gulp.src('./stylesheets/sass/*.scss') //*表示全部的scss文件
        .pipe(sass())
        .pipe(gulp.dest('./stylesheets/css'))
})

会把对应的scss所有编译成scss，并且不会去编译对应的variable和mixin

 

可是咱们不想每次改变输入一次gulp，因而乎咱们但愿这些步骤能够自动完成的话，就须要用gulp的watch方法去监听文件变化了。

咱们的需求是监听sass文件夹下的全部文件，若是发生变化就立马执行sass任务。

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

因此咱们添加以上代码，**是指全部深度的文件夹，包括varible和mixin

 

运行gulp watch命令实现监听

同时若是咱们也能够添加更多的监听命令

gulp.task('watch',function(){
    gulp.watch('./stylesheets/**/*.scss',['sass']);
    gulp.watch('./index.html',['sass']);
})

例如监听index.html页面什么的，也去更新css文件。

我在咱们就能够运用gulp完成监听咯。咱们的前端自动化大业又向前走进了一大步。啦啦啦