rotundasoftware / parcelify

Add css to your npm modules consumed with browserify.
MIT License
251 stars 20 forks source link

Watch not catching css changes in symlink components #46

Open Galderak opened 7 years ago

Galderak commented 7 years ago

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 commented 7 years ago

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

Galderak commented 7 years ago

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 commented 7 years ago

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