前言
随着前端项目的复杂度与需求的增加，前端任务工作量逐渐变得繁琐，特别是在开发sass时。文件的数量与嵌套层级的增加，让开发者感到很不方便。在这种情况下，我们推荐使用gulp-sass-inheritance-plus这个npm包，以帮助开发者更易于管理大型sass项目。
功能介绍
gulp-sass-inheritance-plus是一个gulp插件，可以方便地实现sass的继承和管理。使用这个npm包可以让sass代码更易于维护和管理。具体功能包括：
- 基于文件修改时间、文件继承关系的增量编译
- 支持选择性编译
- 支持部分编译
- 支持多个sass目录及sass文件的匹配设置
安装
安装gulp-sass-inheritance-plus，你需要在终端中运行下面这个命令：
npm install gulp-sass-inheritance-plus --save-dev
使用
引入依赖：
var sassInheritance = require('gulp-sass-inheritance-plus');配置插件
gulp.task('sass', function () { return gulp.src(['sass/**/*.scss']) .pipe(sassInheritance({dir:'sass/'})()) .pipe(sass().on('error', sass.logError)) .pipe(gulp.dest('public/css')); });
注：这里的sass()是gulp-sass插件
详细API
sassInheritance(options)
options：一个object类型，一些选项的集合dir：string. 源码目录，默认值为'./'.extensions：array. sass文件扩展名，默认值为['.scss', '.sass'].
return callback(file)： 返回一个函数，用于在pipe中调用。file：string；sass文件名，可以是绝对路径或相对路径。
具体使用方法可以参考下面的代码片段：
gulp.task('example', function () {
return gulp.src(['sass/**/*.scss'])
.pipe(sassInheritance({dir:'sass/'}))
.pipe(gulp.dest('public/css'));
});sassInheritancePlus
sassInheritancePlus是一个对象，包含了一些方法，我们可以根据需要来引用。
sass()： 把sass转化成css。ignoreImports()： 在编译时忽略scss或sass导入的文件。
选择性编译
你可以让gulp仅编译你需要的文件。例如下面的代码片段，只有在scss/目录下的文件才被编译。
gulp.task('example', function () {
return gulp.src(['scss/**/*.scss'])
.pipe(sassInheritance({dir:'./scss/'}))
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('public/css'));
});自动编译
你可以在每次修改scss文件后，自动编译。这个功能使用gulp-watch实现。
var watch = require('gulp-watch');
gulp.task('watch', function () {
watch(['sass/**/*.scss'], function () {
gulp.start('sass');
}
);
});部分编译
可能在开发过程中，只需要编译某部分的sass文件。例如下面这个例子，只编译了base.scss和common.scss的文件。
-- -------------------- ---- ------- -------------------- -------- -- - --- --------- -------- - ------------------------ -------- - -------------------------- ------ -------------------- --------------------------------------- ------------------------ --------------- --------------------------------- ---
总结
在这篇文章中，我们介绍了npm包gulp-sass-inheritance-plus的使用方法。相信通过这篇文章，你已经了解了使用gulp-sass-inheritance-plus如何帮助你更好地维护你的sass代码。作为前端开发者，在开发过程中，难免会遇到一些繁琐的操作。我们需要结合自己的实际情况，寻找解决办法。gulp-sass-inheritance-plus为我们提供了一种方便实用的解决方案，可以让我们在高效率和低出错率之间找到一个平衡点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555de81e8991b448d2ed3