Skip to content
Gulp plugin to rebuild scss files and other files that have included those files
JavaScript
Branch: master
Clone or download
#25 Compare This branch is 27 commits ahead, 11 commits behind juanfran:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test Fix style #2 May 12, 2017
.editorconfig
.gitignore
.travis.yml Add Travis May 12, 2017
README.md
index.js
package.json
yarn.lock

README.md

gulp-sass-inheritance

npm npm travis Greenkeeper badge deps

Rebuild a sass/scss file with other files that have imported this file

Useful when working on a larger project: Styles can be (re-)built incrementally on a per-need basis.

Changelog

v1.1.0 (2017-05-13)

  • The file initially emitted is now being passed through as well
  • Support for nested imports - Thanks @safareli! Fixes #3 #5
  • Added tests & solid coverage
  • Updated dependencies
Previous: v0.5.1 (2015-04-09)

Install

# Using npm
npm install gulp-sass-inheritance --save

# Using yarn
yarn add gulp-sass-inheritance

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');
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...
});

Contributing 🎉

# Install dependencies
yarn

# Run tests
yarn test

License

MIT

You can’t perform that action at this time.