Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Watch not catching css changes in symlink components #46

Open
Galderak opened this issue Nov 21, 2016 · 3 comments
Open

Watch not catching css changes in symlink components #46

Galderak opened this issue Nov 21, 2016 · 3 comments

Comments

@Galderak
Copy link

Galderak commented Nov 21, 2016

Using Gulp with parcelify works perfectly during the initial bundle().

However any changes made to css files inside one of my sym-linked components does not trigger a 're-bundle' of any kind.

OS: Windows 10

project
-node_modules
--component < this is a symlink via npm link
---src
----css
-----style.css < changes here are not triggering a re-build, the initial bundle includes this file correctly.

-- gulpfile.js

var index = browserify({
    entries  : __dirname + '/src/index.js',
    debug    : true,
    paths   : ['./node_modules'],
    transform: babelify,
    cache:{},
    packageCache:{},
    plugin:[watchify,parcelify]
});

var p = parcelify(index,{
    watch: true,
    bundles:{
        style:'./public/css/components.css'
    }
}).on('error',function(err){
    console.log("Component CSS Error:", err);
}).on('done',function(){
    console.log("Component CSS has been Finished");
}).on('assetUpdated', function (eventType, asset) {
    console.log("Component CSS has been updated", eventType, asset);
})

var w = watchify(index);

function indexBundle() {
    return index.bundle()
    .on('error', function (err) {
        console.error(err);
    })
    .pipe(source('index.js'))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('public'))
}

Not sure what the issue is but any assistance would be greatly appreciated, parcelify is the only solution I've found that works well for bundling deeply nested css dependencies with React components that also does not include multiple version of the same css files from different component dependencies etc.

Thanks.

@jholster
Copy link

I've found that the watch mode does not work at all on Windows (tried 7 & 10).

@Galderak
Copy link
Author

Galderak commented Feb 28, 2017

I ended up doing it manually via gulp.watch on the "bundleWritten" callback.

May not be the best solution but it has worked for me.

var p = parcelify(obj,options).on('bundleWritten', function (bundlePath, assetType, thisParcel, watchModeUpdate) {
            //Only watch for css changes if developing
            if(!debug) return;
            
            var arr = thisParcel.parcelAssetsByType.style;
            var len = arr.length;
            
            //Get all the srcPaths for found css
            for (var i = 0; i < len; i++) {
                var style = arr[i];
                _componentCSSPaths.push(style.srcPath);
            
            }
            //Watch for changes in src/css files and re-bundle as needed
            gulp.watch(_componentCSSPaths, ["bundleComponentCSS"]);
    
            done();
        });

@jholster
Copy link

jholster commented Mar 7, 2017

I made a fork which uses chokidar for reliable filesystem events, installable as parcelify2. I will delete the fork after pull request is accepted.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants