search

stealjs / steal-tools

Build easy. Load fast.
https://stealjs.com/docs/steal-tools.html
MIT License
67 stars 23 forks source link

Tools api (stealTools.build({...) not processing steal-css plugin #1096

Closed DaveO-Home closed 5 years ago

DaveO-Home commented 5 years ago

Using v1 config - current v2.0.8

stealTools.build({
        configMain: "stealjs/appl/js/config",
        main: "stealjs/appl/js/index",
        baseURL: "../../"
    }, {
            sourceMaps: false,
            bundleAssets: {
                infer: true,
                glob: [
                    '../images/favicon.ico',
                    '../appl/testapp.html',
                    '../appl/views/**/*',
                    '../appl/templates/**/*',
                    '../../README.md'
                ]
            },
            bundleSteal: false,
            dest: "dist",
            removeDevelopmentCode: true,
            minify: true,
            maxBundleRequests: 5,
            maxMainRequests: 5
        });

Builds everything except the index.css bundle

package.json...

"ext": {
      "css": "steal-css"
    },
    "cssOptions": {
      "timeout": "15"
    },
    "plugins": [
      "steal-css"
    ],

config

require("package.json!npm");
var steal = require("@steal");
/*
 * During the production build you can ignore the "Unable to load CSS in an environment without a document." exception.
 */
steal.import("node_modules/bootstrap/dist/css/bootstrap.min.css").then(function () {
    steal.import("stealjs/appl/css/site.css");    //Make sure site.css loads after bootstrap for sticky nav
});
steal.import("node_modules/tablesorter/dist/css/theme.blue.min.css");
steal.import("node_modules/tablesorter/dist/css/jquery.tablesorter.pager.min.css");  
steal.import("node_modules/font-awesome/css/font-awesome.css");

Note: stealTools.streams will build the bundles including index.css but fails to glob the artifacts and build steal.production.js

gulp.task('build', ['build2', 'bootlint'], function () {
    const graphStream = stealStream.graph({
        configMain: "stealjs/appl/js/config",
        main: "stealjs/appl/js/index",
        baseURL: "../../"
    }, {
           sourceMaps: false,
            bundleAssets: {
                infer: true,
                glob: [
                    '../images/favicon.ico',
                    '../appl/testapp.html',
                    '../appl/views/**/*',
                    '../appl/templates/**/*',
                    '../../README.md'
                ]
            },
            bundleSteal: false,
            dest: "dist",
            removeDevelopmentCode: true,
            minify: true,
            maxBundleRequests: 5,
            maxMainRequests: 5
        });

    return graphStream
        .pipe(stealStream.transpile())
        .pipe(stealStream.minify())
        .pipe(stealStream.bundle())
        .pipe(stealStream.concat())
        .pipe(stealStream.write());
});
matthewp commented 5 years ago

Is your question about using bundleAssets with the stream API?

DaveO-Home commented 5 years ago

I would prefer using just stealTools.build({..., steal-css does not work with v2 (works with streams). So my work-around was to use both. It appears that bunldeAssets fails with the stream Api which is another issue.

matthewp commented 5 years ago

So what's the problem with the stealTools.build() method?

DaveO-Home commented 5 years ago

Expecting stealTools.build to generate ../dist/bundles/stealjs/appl/js/index.css. This does not happen, the index.js file does get generated. All other files are generated as expected.

matthewp commented 5 years ago

And your CSS is all imported in that config file?

DaveO-Home commented 5 years ago

Yes, I just pushed out my work around, @github.com/DaveO-Home/embedded-acceptance-tests. The code is in ../public/stealjs/build/Gulpfile.js - starting at line 86. You can change gulp.task('build2', ['clean', 'bootlint'], function () { to gulp.task('build2', ['clean'], function () { and run "gulp build2" stand-alone. Don't forget to run "npm install" And yes all css is defined in the config

matthewp commented 5 years ago

That's not how people normally import css. It's not being built because those CSS files are not part of your dependency graph. What's the reason for dynamically importing your CSS in your config file?

DaveO-Home commented 5 years ago

So what do you suggest, they need to be loaded in a certain order. The streams api picks them up.. I'm gone for several hrs.

matthewp commented 5 years ago

I would put this in your index.js:

require("bootstrap/dist/css/bootstrap.min.css");
require("tablesorter/dist/css/theme.blue.min.css");
require("tablesorter/dist/css/jquery.tablesorter.pager.min.css");
require("font-awesome/css/font-awesome.css");

steal.import("stealjs/appl/css/site.css");

And then update your package.json to include the dynamically imported one as a bundle:

{
  ...
  "steal": {
    "bundle": ["stealjs/appl/css/site.css"]
  }
}
DaveO-Home commented 5 years ago

When I put the require("... ahead of steal(.. in index.js I get " ReferenceError: require is not defined" at build time; when I put the require(".. inside the steal call I get; "TypeError: "require is not a function" in the browser.
Your config definitely wakes of steal-css and the build is much cleaner, but the node-module scripts are not found, even when I load via "steal.import...". It will work however, if I copy the node_module css scripts to ".../dist". Is that how it's works? Before, tools was putting all css into 1 file, "index.css".

When I build it from config using steal.import I get BUNDLE: stealjs/appl/js/index.css

When I use it in index.js with the new defined bundle, I get; BUNDLE: stealjs/appl/css/site.css

DaveO-Home commented 5 years ago

Configuring individual bundles for each css file works, however load time seems to be slightly increased. BUNDLE: node_modules/bootstrap/dist/css/bootstrap.min.css

DaveO-Home commented 5 years ago

FYI, I attempt to keep this Demo up to date because it is referenced via "fuse-box" as a testing resource. @ https://fuse-box.org/docs/test-runner/test-runner Canjs is getting some exposure via this.....

matthewp commented 5 years ago

< When I put the require("... ahead of steal(.. in index.js

If you are using steal syntax then instead do it like this:

steal("bootstrap/dist/css/bootstrap.min.css",
"bootstrap/dist/css/bootstrap.min.css",
"tablesorter/dist/css/theme.blue.min.css",
"tablesorter/dist/css/jquery.tablesorter.pager.min.css",
"font-awesome/css/font-awesome.css",

// Your other imports here
, function() {
  steal.import("stealjs/appl/css/site.css"); 
});
DaveO-Home commented 5 years ago

Now that was an easy fix..thanks