How do you automatically minify your client JS files?

[Srirangan]

Hi,

For one of my projects I have split my client app into a number of JS files. Am using the Express framework.

I'd like to automate the minification of all these client side JS files, without of course modifying the original sources.

I don't think it should be too different to generating CSS files from LESS, SASS or Stylus sources. How do I go about it? 

- Sri

--
Srirangan  |  About   GitHub  LinkedIn  Twitter  |  Review19  "Next generation, real-time project collaboration"

[vision media [ Tj Holowaychuk ]]

depends on what you want. we do this statically in production with a makefile that compresses css/js into their respective "bundles" and gzips them. you can do this on the fly too if you like things get a bit more complicated

--
You received this message because you are subscribed to the Google Groups "Express" group.
To post to this group, send email to expre...@googlegroups.com.
To unsubscribe from this group, send email to express-js+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/express-js?hl=en.

--
Tj Holowaychuk
Vision Media
President & Creative Lead

[Joe McCann]

Have a look at Smoosh.

npm install smoosh -dg

You can call Smoosh programmatically or from the CLI.

[RJYO]

There are many solutions to compress/combine JS/CSS files. If all 3 JS files are used in development and there's only one file for production, what is the best practice to handle the template? Checking process.env in the layout template seems not that elegant.

[RJYO]

Thanks for the tip.  If the stylesheets and scripts files are combined in production, what's the best practice to combine multiple <script> and <link> tags into one? Shall we just check env in the view?

[Ben Gourley]

I have created a middleware layer for express which compiles JS for
you at run time.
`npm install minj`
See github.com/bengourley/minj for usage.
Essentially you can just drop it in to your app.js without making any
other changes and it will just work.
For CSS minfication, if you are using stylus, there is a `compress`
option in the middleware, see: http://learnboost.github.com/stylus/docs/middleware.html
Hope this helps!

On Dec 6, 11:31 am, Srirangan <sriran...@gmail.com> wrote:
> Hi,
>
> For one of my projects I have split my client app into a number of JS
> files. Am using the Express framework.
>
> I'd like to automate the minification of all these client side JS files,
> without of course modifying the original sources.
>
> I don't think it should be too different to generating CSS files from LESS,
> SASS or Stylus sources. How do I go about it?
>
> - Sri
>
> --

> Srirangan  |  About <http://srirangan.net/about>
> GitHub<https://github.com/Srirangan>
>   LinkedIn <http://www.linkedin.com/in/srirangan>
> Twitter<http://twitter.com/srirangan>  |
>  Review19 <http://review19:3000>  "Next generation, real-time project
> collaboration"

[Shripad K]

I use Plovr for minification. The idea is that I don't run the build until the app is production ready. So it runs as a web server (In RAW mode). I use the NODE_ENV environment setting to figure out whether to point to the server URL (if development) or to a minified build file(if production). That way I'm not unnecessarily building a minified file on every file change.

Also, most of the apps i develop are fat clients. I don't render anything except the layout server side (which is a single jade file).

> collaboration"

[Srirangan]

uglify-js-middleware didn't work for me, I looked at its code and could not make head or tail of it. Ended up writing my own middle ware, perhaps similar to Ben Gourley's minj.

Its not as perfect as it should be, but it works for now which was needed at Review19. I'll open source it when I'm confident of my code.

- Sri

--
Srirangan  |  About   GitHub  LinkedIn  Twitter  |  Review19  "Next generation, real-time project collaboration"