packer.ts

let packer: any;
let ts: any;
let autocss: any;
let autoprefixer: any;
let cssmin: any;
let jsmin: any;
let scss: any;
let cssmodules: any;
let grab: any;
let less: any;
let jade: any;
let htmlMin: any;
let json: any;
let pngmin: any;
let babel: any;
let transform: any;
let filter: any;
let out: any;
let hash: any;
let named: any;
let css: any;
let html: any;
let not: any;
let chunks: any;
let pick: any;
let src: any;
let sprite: any;
let inlineCssAssets: any;
let If: any;
let debug: any;
let concat: any;
let importantCss: any;

function scssProcess() {
    return scss('src/index.scss').then(
        cssmodules().then(inlineCssAssets()).then(
            grab('*.png').then(sprite()).then(
                concat('dist/sprite.png')
            ),
            If(debug).then(autoprefixer()).then(
                cssmin().then(
                    concat('dist/bundle.css')
                ),
            ),
        )
    )
}

function autocss() {
    p((tree, done) => {
        tree.changed().filter('*.js').forEach(f => {
            const scss = tree.find(f.basename() + '.scss');
            const result = scsspatch(f.source, scss.source);
            if (result) {
                scss.update(result);
            }
        });
        done();
    });
}

function grab(filter, next) {
    p((tree, done, originTree) => {
        const files = originTree.find(filter);
        originTree.remove(files);
        tree.only(files);
        done();
    }, next);
}


packer(() => {
    ts('tsconfig.json', () => {
        grab('*.scss', () => {
            autocss(() => {
                grab('*.png', () => {
                    sprite('dist/sprite.png', out);
                });
                inlineCssAssets({maxSize: 10000}, () => {
                    autoprefixer(() => {
                        concat('bundle.css', () => {
                            cssmin(() => {
                                jade('src/index.jade', {style: importantCss()}, out);
                                out();
                            });
                        });
                    })
                });
            })
        });
        grab('react', 'mobx', () => {
            concat('dist/vendor.js', out);
        });
        concat('dist/bundle.js', () => {
            jsmin(out);
        })
    });
    jade('src/index.jade', () => {
        out()
    });
}).watch();



packer(
    ts('tsconfig.json').then(
        grab('*.scss').then(scssProcess()),
        grab('react', 'mobx').then(
            concat('dist/vendor.js').then(out())
        ),
        concat('dist/bundle.js').then(jsmin()).then(out()),
        out(),
    ),
    scss('src/index.scss').then(scssProcess()),
    jade('src/index.jade').then(
        concat('dist/index.html').then(out())
    )
);