Fail to build - Githubissues

duongphuhiep commented 9 years ago

When I run node build.js

D:\dev-js\marko-widgets-lasso\build.js:35
        callback();
        ^
ReferenceError: callback is not defined
    at D:\dev-js\marko-widgets-lasso\build.js:35:9
    at D:\dev-js\marko-widgets-lasso\node_modules\async\lib\async.js:697:13
    at D:\dev-js\marko-widgets-lasso\node_modules\async\lib\async.js:52:16
    at D:\dev-js\marko-widgets-lasso\node_modules\async\lib\async.js:272:32
    at D:\dev-js\marko-widgets-lasso\node_modules\async\lib\async.js:44:16
    at WriteStream.<anonymous> (D:\dev-js\marko-widgets-lasso\node_modules\async\lib\async.js:694:17)
    at WriteStream.<anonymous> (D:\dev-js\marko-widgets-lasso\node_modules\async\lib\async.js:173:37)
    at WriteStream.emit (events.js:129:20)
    at finishMaybe (_stream_writable.js:484:14)
    at afterWrite (_stream_writable.js:362:3)

But ok, I bypassed the error, and success to run the build. Here is my remark: I see that bundling is indispensable for Marko because it depends on at least 20 different modules

However at first glance, It seem not trivial to make the build.

Firstly we have to change the index.html with <lasso-page>, <lasso-body/>.. in the index template
Then we have to develop build.js, route.js, configure.js

It seem that you developed a static http server which build the package on first visit, it explains route.js and other stuff, right?

Can you make things simpler? What is the simplest way to build the package (and nothing more)

For a bundling tool, I expected to write some configuration and then execute some lasso command to create the build package.

After the build phase, we can use for example live-server to test the page on the browser. So a server.js is not needed

Thank you

patrick-steele-idem commented 9 years ago

Hi @duongphuhiep, sorry for the issue. This sample was created just for you very quickly so there were bound to be mistakes :/

Let me try to address your other concerns:

Firstly we have to change the index.html with <lasso-page>, <lasso-body/>.. in the index template

How is that worse than manually adding and maintaining more complicated <script> and <link> tags? The <lasso-page> is used to declare what the top-level dependencies are for the page. The <lasso-head/> tag injects the <link> tags (if any) and the <lasso-body/> tag injects the <script> tags if any. In addition, Lasso.js automatically minifies, fingerprints, etc. There's no 200 line build script to manage and it just works.

Then we have to develop build.js, route.js, configure.js

I could have put this all in one file, in theory. However for this sample app routes.js and configure.js are shared by both build.js and server.js. Maybe I made this more complicated than what you expected, but there was a reason for the split... I wanted to show how you can have an app with an Express-based server that can run locally as well as a way to build a static version of the app that can be deployed to any server. During development it is better to use the server.js file because there is no build step. Running node build.js generates static HTML, JS and CSS files that can be deployed to any static HTTP server. After running node build.js you can simply run the http-server command in the build/ directory to try out the static version of the app:

npm install http-server --global

node build.js
cd ./build
http-server

Can you make things simpler? What is the simplest way to build the package (and nothing more)

If you want to use the command line interface for Lasso.js instead of the JavaScript API please take a look at the following: https://github.com/lasso-js-samples/lasso-cli

However, using a CLI tends to be more awkward than just writing JavaScript code that talks to the JavaScript API directly. Would you rather deal with shell scripts or write JavaScript code?

For a bundling tool, I expected to write some configuration and then execute some lasso command to create the build package.

I think what you are looking for is the following:

lasso style.less --main main.js --inject-into my-page.html --plugins lasso-less --production

Please take a look at the docs for the Lasso.js CLI if that is what you are looking for: https://github.com/lasso-js/lasso#command-line-interface

After the build phase, we can use for example live-server to test the page on the browser. So a server.js is not needed

Not necessarily. As mentioned earlier, if you use node server.js then there is no build step. Simply run node server.js and go to http://localhost:8080/ to try out your app. In edition, the JS and CSS bundles are generated lazily and the templates are rendered in real time. If you use the browser-refresh process launcher to start your app for automatic page and CSS refreshing almost for free:

browser-refresh server.js

Please keep in mind that Lasso.js is just a general purpose tool that is used to generate JS and CSS bundles and it also handles packaging images, fonts and other front-end resources. It's pretty heavily documented and there lots of sample apps that are there to help guide you in integrated it into your workflow. There's no one-size fits all workflow so we designed the tool to be very flexible (but focused).

I hope that clarifies.

duongphuhiep commented 9 years ago

Hello,

Our backend is still locked in PHP, (Golang in the future). I'm considering to use marko / widget / lasso only on front-end, So the build step is unavoidable.

the first task for lasso-cli is that

The existed web application index.html has currently a bunch of <script>,<link>, I'll try to replace them with <lasso-body>, <lasso-head>, use the lasso-cli and hopefully it will give a nice optimized index.html, with every script/css neatly bundle/minify + source map

I'm not yet successful but I'll continue to read the lasso-cli docs and try to make things work.

Thank you, I'm appreciate your help very much

marko-js-samples / marko-widgets-lasso

Fail to build #1