gulp-sass-inheritance-plus

1.0.0 • Public • Published

gulp-sass-inheritance-plus

Rebuild a sass/scss file with other files that have extended or included those file

Based on custom-gulp-sass-inheritance

gulp-sass-inheritance not support nested import;

custom-gulp-sass-inheritance resolve this bug, but the dependence sass-gragh is outdate.

Uses sass-graph for the heavy lifting.

Install

npm install gulp-sass-inheritance-plus --save

Usage

You can use gulp-sass-inheritance with gulp-changed to only process the files that have changed but also recompile files that import the one that changed.

'use strict';
var gulp = require('gulp');
var sassInheritance = require('gulp-sass-inheritance-plus');
var sass = require('gulp-sass');
var cached = require('gulp-cached');
var gulpif = require('gulp-if');
var filter = require('gulp-filter');
 
gulp.task('sass', function() {
    return gulp.src('src/styles/**/*.scss')
 
      //filter out unchanged scss files, only works when watching
      .pipe(gulpif(global.isWatching, cached('sass')))
 
      //find files that depend on the files that have changed
      .pipe(sassInheritance({dir: 'src/styles/'}))
 
      //filter out internal imports (folders and files starting with "_" )
      .pipe(filter(function (file) {
        return !/\/_/.test(file.path) || !/^_/.test(file.relative);
      }))
 
      //process scss files
      .pipe(sass())
 
      //save all the files
      .pipe(gulp.dest('dist'));
});
gulp.task('setWatch', function() {
    global.isWatching = true;
});
gulp.task('watch', ['setWatch', 'sass'], function() {
    //your watch functions...
});

License

MIT

Package Sidebar

Install

npm i gulp-sass-inheritance-plus

Weekly Downloads

1

Version

1.0.0

License

MIT

Last publish

Collaborators

  • rdshoep