gulp 监听sass文件修改,自动执行编译任务

本例基于上篇文章

gulp 安装及入门

用到的命令:watch

gulp.watch('files-to-watch', ['tasks']);

1、创建监听任务

// 创建监听任务
gulp.task('watch', function(){
    // 如果文件app/scss/style.scss修改,调用sass任务
    gulp.watch('app/scss/style.scss', ['sass']);
});

如果检测到文件修改,则调用sass任务执行编译:

// 编译sass
gulp.task('sass', function() {
    gulp.task('sass', function(){
        return gulp.src('app/scss/style.scss') // 指定源文件
            .pipe(sass())  // sass 转为 css
            .pipe(gulp.dest('app/css')) // 指定输出目录
      });
});

2、执行watch任务。

gulp watch

3、修改app/scss/style.scss并保存后,自动执行sass任务

发表评论