clempat / gulp-systemjs-resolver Goto Github PK

View Code? Open in Web Editor NEW

6.0 3.0 4.0 28 KB

Gulp-Systemjs import resolver (sass)

License: MIT License

JavaScript 100.00%

gulp-systemjs-resolver's Introduction

gulp-systemjs-resolver

My Sass Import resolver using systemjs gulp plugin

Install

$ npm install --save-dev gulp-systemjs-resolver

Usage

var gulp = require('gulp');
var sassResolver = require('gulp-systemjs-resolver');

gulp.task('sass', function () {
	return gulp.src('src/file.scss')
		.pipe(sassResolver({systemConfig: './config.js'}))
		.pipe(gulp.dest('dist'));
});

I personally in my project use jspm and configure the package this way for bourbon:

{
  "jspm": {
    "dependencies": {
      "bourbon": "github:thoughtbot/bourbon@^4.2.3"
    },
    "overrides": {
      "github:thoughtbot/[email protected]": {
        "directories": {
          "lib": "bourbon-v4.2.3"
        }
      }
    }
  }
}

Then in your scss file, you can import like:

@import "~bourbon/_bourbon.scss"; //Import bourbon file
@import "./variable.scss"; // Import local file

var gulp = require('gulp');
var sass = require('gulp-sass');
var sassResolver = require('gulp-systemjs-resolver');

var includePaths = [];

gulp.task('sass', function () {
	return gulp.src('src/file.scss')
		.pipe(sassResolver({systemConfig: './config.js', includePaths: includePaths}))
		.pipe(sass({includePaths: includePaths}))
		.pipe(gulp.dest('dist'));
});

and

/* @importPath '~bourbon' */
@import "_bourbon.scss"; //Import bourbon file
@import "./variable.scss"; // Import local file

API

systemjsResolver(options)

options

systemConfig

Type: string
Default: ``

This is the path to the SystemJs config file for example ./config.js

includePaths

Type: Array
Default: []

This is the original includePaths which will be passed to sass plugin

License

MIT © Clément Patout

gulp-systemjs-resolver's People

Contributors

Stargazers

Watchers

Forkers

madington igosuki rkrzewski dominicboettger

gulp-systemjs-resolver's Issues

Failure on repeated builds

The resolver works great during first processing of scss sources, but when it is invoked from a gulp.watch for the second and consecutive time, it fails with the following exception:

TypeError: Incorrect configuration order. The baseURL must be configured with the first SystemJS.config call.
    at SystemJSNodeLoader.SystemJSLoader.config (/home/rafal/workspaces/web/gulp-jspm-sbt/node_modules/gulp-systemjs-resolver/node_modules/systemjs/dist/system.src.js:1753:13)
    at eval (eval at <anonymous> (/home/rafal/workspaces/web/gulp-jspm-sbt/node_modules/gulp-systemjs-resolver/index.js:26:11), <anonymous>:1:8)
    at module.exports (/home/rafal/workspaces/web/gulp-jspm-sbt/node_modules/gulp-systemjs-resolver/index.js:26:3)
    at Gulp.<anonymous> (/home/rafal/workspaces/web/gulp-jspm-sbt/gulpfile.js:110:13)

My test project is hosted on Bitbucket: https://bitbucket.org/rkrzewski/gulp-jspm-sbt

As far as I can tell, the problem arises because SystemJS is intialized on the first invocation of
eval(fs.readFileSync(options.systemConfig, 'utf8')); and there is no obvious way to change or reset this configuration afterwards. A possible workaround would be introduced a guard variable that would ensure that SystemJS is initialized only once during node process lifetime. SystemJS config is not changed too often, so the requirement to restart resident gulp process to reload changes is not too onerous.

On the other hand, if there's something wrong with my gulpfile, I'm all ears :)

Imported sass file are not treated and so not getting resolve

Step to reproduce

Add as source multiple file
File 1 has import File 2
File 2 has ImportPath

Expected Behaviour

Included Path include the one from file 2

What do you see instead?

Included Path DOES NOT include the one from file 2

Manage to import paths

In this way the idea is to have in the original file.

/* @importPath '~bourbon' */
@import '_bourbon.scss';

then write in includePaths variable:
../jspm_packages/github/thoughtbot/[email protected]

Windows issue

Under windows i get this error:


>> @import "../../../../../../C:/Users/dob/Development/static/myproj_q
   ^

    column: 1
    line: 3
    file: C:/Users/dob/Development/static/myproj_questionaire_2016/src/application.scss
    status: 1
    messageFormatted: src\application.scss
Error: File to import not found or unreadable: ../../../../../../C:/Users/dob/Development/static/myproj_questionaire_2016/jspm_packages/github/angular/[email protected]/angular-material.scss
       Parent style sheet: C:/Users/dob/Development/static/myproj_questionaire_2016/src/application.scss
        on line 3 of src/application.scss
>> @import "../../../../../../C:/Users/dob/Development/static/myproj_q
   ^

    messageOriginal: File to import not found or unreadable: ../../../../../../C:/Users/dob/Development/static/myproj_questionaire_2016/jspm_packages/github/angular/[email protected]/angular-material.scss

The same project runs under MacOSX without any problems.

Resolve the src path of file when the path is ~font-awesome/* for exemple

var gulp = require('gulp');
var systemResolver = require('gulp-systemjs-resolver');

gulp.task('sass', function () {
    return gulp.src('~font-awesome/fonts/*')
        .pipe(systemResolver({systemConfig: './config.js'}))
        .pipe(gulp.dest('dist/fonts'));
});