read

You've certainly already heard and/or use Grunt,
Gulp, Broccoli, Brunch or another node-based build system that is rising every month. This article explains a simpler yet powerful alternative.

For me, a front-end build system is just a way to include javascript and
stylesheet dependencies, pack them togheter into a single file, and compress
everything at the end of the proccess. And that's just what
lazy-assets do. (usage instructions)

How it works:

There is no specific configuration file, such as Gruntfile.js. You just define
whatever you want to include in your plain html files, with some goodies:

Source

<assets>
  <asset href="bootstrap" source="bower" />
  <asset href="jquery" source="bower" />
  <asset href="datejs" source="bower" main="build/date.js,build/date-pt-BR.js" />
  <asset href="js/*.js" />
  <asset href="css/main.styl" />
</assets>

If you provide source="bower", the router will install the dependency via
bower, and require the files defined main attribute of the dependency's bower.json file. If the main attribute isn't defined, you have to define it as
an attribute on your html asset tag.

<link href="dependencies/bootstrap/dist/css/bootstrap.css" rel="stylesheet" media="all" type="text/css" />
<script type="text/javascript" src="dependencies/bootstrap/dist/js/bootstrap.js"></script>
<script type="text/javascript" src="dependencies/jquery/dist/jquery.js"></script>

You're good to go defining lots of dependencies. On development mode every
dependency will have it's own inclusion tag. On production mode they're all
concatened and minified.

Conclusion

You can still use "complex" build systems like Grunt/Gulp/etc for libraries. But
for apps/products you can go simple with
lazy-assets, which may improve considerably your time tasks configuring those tools.

Blog Logo

Endel Dreyer

Full-stack developer. Loves Ruby and JavaScript.


Published

Image

bugfixer / @endel

About programming, tools and solving problems.

Back to Overview