npm 包 gulp-bmn-sass 使用教程

什么是 gulp-bmn-sass？

gulp-bmn-sass 是一款优秀的 gulp 插件，它基于 gulp-sass 封装，可以帮助我们更加轻松地编译 sass 文件并对其进行转化。

安装 gulp-bmn-sass

首先，我们需要在项目根目录下安装 gulp-bmn-sass，方法如下：

npm install gulp-bmn-sass --save-dev

安装完成后，我们可以在项目中引入该插件进行使用。

使用 gulp-bmn-sass

接下来，我们来详细讲解 gulp-bmn-sass 的基本用法，包括如何将 sass 文件转化为 css 文件，并实时监测文件变化并进行编译。

创建 gulpfile.js

首先，我们需要在项目根目录下创建一个名为 gulpfile.js 的文件，用于配置 gulp 任务。

在 gulpfile.js 文件中，我们需要引入 gulp 和 gulp-bmn-sass 插件，并创建我们需要的任务。

const gulp = require('gulp');
const sass = require('gulp-bmn-sass');

创建 sass 编译任务

接下来，我们需要创建一个任务，用于将 sass 文件编译为 css 文件。

gulp.task('sass', function() {
  return gulp.src('./src/sass/*.scss') // sass 路径
    .pipe(sass()) // 编译 sass
    .pipe(gulp.dest('./dist/css')) // 输出路径
})

在上面的代码中，gulp.src 用于指定 sass 文件所在的路径，sass() 用于编译 sass 文件并返回 css 文件流，而 gulp.dest 则指定编译后的 css 文件输出的路径。

创建实时编译任务

为了方便开发，我们需要在文件变化时自动编译 sass 文件。这个过程可以通过 gulp 的 watch 方法来实现。

gulp.task('watch', function() {
  gulp.watch('./src/sass/*.scss', gulp.series('sass'));
})

在上面的代码中，我们使用 gulp.watch 方法监测 sass 文件的变化，并在文件变化时调用 series 方法来执行 sass 任务。

启动项目

最后，我们需要创建一个默认任务，用于启动整个项目。

gulp.task('default', gulp.series('sass', 'watch'))

在上面的代码中，我们使用 gulp.series 方法来依次执行 sass 和 watch 任务，从而启动整个项目。

总结

到这里，我们已经学会了如何使用 gulp-bmn-sass 插件来编译 sass 文件，并可以实时监测文件变化并进行编译。通过学习本文，我们可以更加深入地了解 gulp-bmn-sass 的使用方法，并可以进一步优化我们的前端开发流程。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005518781e8991b448ceda7