I would like to append new .coffee files to a single .js file.
Right now my project structure is
coffee /
--controllers /
----Ajax.coffee
--views /
----Login.coffee
--app.coffee
The file app.coffee was created first, but when I created Ajax.coffee the code got prepended to the app.js file, because it is higher in the structure. Is there a way to append the code instead? I really want to use a compile-to-single file rather than loading loads of files with requires, but the code prepending makes it a pain in the ass.
I am using PHPStorm and it's watchers.
You can use grunt as a build tool to structure a project like yours. Grunt can be configured to watch, compile, minify, uglify, test and even run your code automatically on change. The initial learning curve might be a bit steep, but you will never look back.
http://gruntjs.com/
You should give 'cake' a shot. It is a comprehensive build system for coffee.
You can create build tasks that do different things, for instance, a build:dev task that leaves comments in the generated JS and a build:release task that minifies, removes comments etc from the generated JS.
Here's the official documentation
Related
Due to the governance constraints on my day-job project, I'm unable to use a lot of the nice new JS libraries and frameworks. So, for the MVP we're using vanilla JS loaded directly (non-minified) to the client (gross). While this is a great way to show management that's not the best approach, I still have to get it out of the door. However, we do have NPM and Node installed on our dev machines, and I'd like to use this to optimize our JS into a combined bundle, with a hash to break caching.
My question is how do I go about gathering a bunch of disjoint JS files and adding them to a new NPM project to be minified while avoiding having the expected variables, objects, and functions being mangled by webpack/prettify?
I tried just copying the js files into the src directory, and adding the normal import/export lines, but I was getting a bunch of "identifier not found" messages in the console, so I think a lot of stuff was getting mangled.
I have some experience using create-react-app for React side projects, but unfortunately that insulates me from the pain of getting a project setup the hard way, and now I'm paying for my inexperience.
EDIT: To be more succinct, I'm trying to package a bunch of existing js files into a single bundle, while maintaining the same interface. If this isn't possible, please let me know. Otherwise, a place to start would be ideal.
In the days before browserify, babel, webpack, grunt, gulp... we would just concatenate the files and minify them. Since the files expose their API as global objects everything keeps working as if the files where included with different script tags.
On Linux you can simply do this
cat a.js b.js c.js | uglifyjs -cm > bundle.js
The files would often start with a semicolon to make sure nothing breaks when concatenating them.
Once babel is configured integration is as easy as
cat a.js b.js c.js | babel | uglifyjs -cm > bundle.js
https://babeljs.io/docs/usage/cli/
I'm starting with bower and followed this tutorial at first. I have no problems with installing a package, but with how to use it in a static web page.
I could obviously do something like:
<script src="bower_components/module_name/module.js"></script>
for each the components I need, but it seems to me not the good way to do. So I think I am missing something which could link the page generation to my bower components.
May be there a bower component which could help me to include all packages in a bower_components directory.
That is one way to do it but I usually use bower in conjunction with other build tools, like grunt or gulp. Then you can use a task, like grunt-bower-task, to copy only the necessary files to a directory of your choosing.
If you are feeling really ambitious, you could leverage the bower api to roll your own build solution that extracts the "main" files into your project.
Another thing to be aware of, is that not every dependency you will want to include will implement bower's configuration properly (example: missing main attribute or bower.json file). There will also be those projects that require you to include assets (fonts, images, etc.), which bower doesn't currently solve for. In these cases, you will need to come up with a way to move the files around. I always end up having to use something like grunt-contrib-copy to get everything in it's place.
I'm about to develop a large javascript library, and am wondering what the best workflow / source tree layout is. The end result will be a single, minified javascript file.
Suppose the library looks something like:
/
src/
main.js
folder1/
file1.js
file2.js
file3.js
folder2/
f1.js
f2.js
build/
docs/
tests/
How do I debug this? Is the answer as simple as "import all the js via script tags in an html file?" I REALLY don't want to do that, but if that's what everybody else is doing... I was thinking require.js would work well, but then I'd have to be sure to rip out everything that uses require.js when I build (concatenate the files, use uglify.js/closure/etc).
Basically I've never worked on a javascript library before that I didn't need to split into more than a handful of files. I've never had to create a build process for my javascript code.
Am I doing this right? How would one have modules that don't or shouldn't be built into the main, minified file (eg, the developer can optionally include them)?
How do large javascript libraries intended for a browser run automated tests?
Stackoverflow seems like the best place to ask this question, even if it is open ended and rather subjective.
As the title says I'm trying to automatically compile the public static coffeescript files on page load, rather than having to compile them myself and use the .js files, how might I achieve this, I'm trying to maintain a full CoffeeScript stack, this is the only thing I'm having trouble figuring out.
tl;dr: Read the title of the post.
There are a number of ways to accomplish what you're trying to do. Two of the easiest that I know of:
Use the connect-assets module. The idea behind this is that you have an /assets folder in the root, and you instantiate it with express.static, as you normally would with your /public folder. In there, you have two more folders: /js and /css. Your CoffeeScript goes in your /js folder. Then, from within your view template, just call js('yourfile'). It's a wonderfully simple module, but isn't the most advocated asset pipeline.
Use asset-rack. While not as simple to grasp as connect-assets, it's very flexible and is easy to extend. It would be the closest comparator to Rails' asset pipeline and is used by most of the popular JS frameworks (like Sails.js).
However, I would really advise that you refrain from on-the-fly compilation of assets, as it can really drain server performance.
It would be way better to compile on file save using a build system - CoffeeScript ships with Cake, so you can define a watch/compile/build/concatenate step right in your Cakefile and all it would take for you to compile on file save is to type $ cake watch in to the terminal before you change any code.
Alternatively you could write code, then $ cake build. Whichever you prefer. I might also add that cake-flour takes all of the pain out of writing Cake tasks.
coffee --watch --compile .
watches for files changes in . and compiles them as they change. Since you are using expressjs I think you would also like to restart the server as soon as a recompile happens:
coffee --compile --watch . &; nodemon server.js
which uses https://github.com/remy/nodemon
If you only want to have access to compiled CoffeeScript files over HTTP, you could also give connect-coffee-script middleware a try. It has worked quite well for me.
It has the advantage over using coffee --watch --compile that you don't need to have a separate program running.
When i use r.js to optimize my project, how do I get it to produce a single index.html file that includes only one script (my optimized script) and one css file (my optimized css)? Is this something I would need to write myself post build?
r.js don't include this option built-in. But with a full stack build tool, this will be achievable. I'd recommend grunt.js for this (you'll probably want to take a look at how to create custom grunt task for this though).