Home
Sweet build

Objectives

Try some tools for fast development, and trace dependencies in a project.

Tools

Browserify

Allows to require dependencies from npm to the browser (by default uses CommonJs) bundling up as you need... and more.

Source Maps

Maps the source code, this was introduced with HTML5

Dependo

Trace dependencies for CommonJs, AMD, ECMA2015 modules

Gulp-Watch

Gulp as a task manager, provides a watcher of source code changes to trigger your own tasks.

Watchify

Rebundle code with browserify using cache to produce small changes.

Dependo

This are the results on creating the diagram of dependo for an angular application.

In this case we can say, that the application works with controllers for login and posts.

Also we can see that there are two other modules, blog core and ui blog. Those modules will handle services and directives that are reusable for some of the controllers of the blog.

Gulp-watch

Gulp watch can handle all of the updates related to assets, markup, and sass.

Browser Sync

This is a task that triggers every time gulp watch or watchify says.

Browser sync will synchronize the browser with latest updates.

Watchify

Substack(author of browserify) created a little module called watchify. It works as browserify, but makes the bundle with those little changes.

This watchify has some improvements on performance using memory cache to track small changes. So we can watch javascript with this tool and add changes very fast, so it updates and then call to browser sync.

Conclusions

  1. Live reload when creating things.
  2. No need for bower, npm can do it.
  3. Synchronize many devices / browsers to see how the impact of our changes are working
  4. Track dependencies in the project, commonjs / amd / Ecma2015.
  5. See local code and debug it, even after minification.

Here are the implementations of this tools for a simple blog. The comments and posts are fake, just in order to work with the front end.


Home Travis CI