I'd like to have something likes this:
app.import('path/to/file.js');
app.import('path/to/file.css');
And it would concate everything. Is there a way using Grunt?
This is documented in the sample gruntfile on the Grunt site.
http://gruntjs.com/sample-gruntfile
Use the standard grunt file specifications. How to specify files is here:
http://gruntjs.com/configuring-tasks#files
Note that you do not have to add files one at a time. That's why they allow wild cards. You specify entire directory trees if you want. And mostly this is what you want. Study the file glob patterns on the grunt site. There are lots of examples too.
Related
Question, i'm trying to precompile my .handlebars files to templates.js.
So far it's working for all files in source dir, but not for files in a subdirectory (where i keep the partials).
The command i'm using:
handlebars -m resources/views/handlebars/> resources/assets/js/handlebars/templates.js
How can i make this recursive, so that it iterates all directories?
The solution was very simple:
handlebars resources/views/handlebars/ -f public/js/templates.js
Note, this also precompiles all partials that reside in a subdir.
To make these accessible in templates, add this line in beginning of your code:
Handlebars.partials = Handlebars.templates;
Since partials are also templates, this seems like a harmless solution, albeit not the most memory friendly one. If anyone has a suggestion for this..?
Now i want to delve into precompiling custom helpers... documentation is not very clear about that. I'll properly concat these with elixir.
I'm writing a single-page JavaScript application and I'm using Atom as my text-editor. (It's an Electron application, but that's besides the point.)
I'm also using the linter-jshint plugin for Atom. This is great, as it shows immediately in the text-editor when I make a typo in a variable, among other useful things.
Lately, my app has been getting very long. Naturally, I want to try and split it up across multiple files. After doing some research on StackOverflow, I've determined that I can use Grunt to automatically concatenate JavaScript files together. This is great because I don't have to refactor my code - I can just copy paste my existing functions into separate files. Easy!
However, once I do this, Atom fills up with warnings and errors from JSHint, because it can't find variables and functions that are located in the other files!
Now, I could just abandon the JHint plugin in Atom altogether and use the JSHint plugin for Grunt after the concatenation has already occured. But that sucks! I want the code that I'm going to be writing to be checked on the fly like a real IDE.
Is there a way to tell Atom/JSHint to assume that a bunch of JavaScript files will all be concatenated together? Or am I just approaching this problem completely wrong?
You can split your electron application with Node Common Modules, and use require('./state.js'); within your application.
Although I don't use Atom, that should allow for it to understand how you're using your variables and functions in other files.
Also this should eliminate your need for concatenation as the single-page app will have all it's dependencies accounted for.
I am using grunt to build my JS project. I see that the uglify plugin for grunt is capable of merging multiple JS files into a single file and uglify them. Given this feature, I am wondering if there is a need to use concat plugin at all. Can I directly use uglify. Is there something that i am missing.
Most tutorials seem to suggest that I must first use concat then uglify.
You don't need a separate concat tool. See the docs (under "Usage examples - Basic compression"). You just specify the files you want uglified, and it will concatenate them for you.
I'm trying to put together a Grunt task to build our JS assets as part of our build/deploy process. I'd characterize our needs as fairly standard, but serious (in that we need to support a real-world production app, not just a toy example).
We have a bunch of source files, some JavaScript, some CoffeeScript, in a bunch of separate files in a structured directory tree. We need to compile the CoffeeScript, and concatenate and minify all the code into several defined output files (i.e. all.js and vendor.js). And we need to end up with usable source maps to accompany this output that reflect the original source (the CS or JS files), preferably with embedded sourcesContent.
I'm having a surprisingly difficult time putting this together, and have yet to find an example of a Gruntfile that accomplishes all of these goals in a realistic build scenario. Has anyone accomplished this? It seems like almost any major Angular project that's building with Grunt would have a set of requirements that looks a lot like ours.
Right now I'm using grunt-contrib-coffee, grunt-contrib-concat, and grunt-contrib-uglify, and have something that's almost working but for all sorts of trouble with relative paths in the source maps. I've also run into problems with uglify not handling multiple source maps, and problems with each of those plugins having different capabilities when it comes to reading and generating source maps.
I'm in the process of taking a couple of separate asp.net applications, and combining them.
One problem is rationalizing the CSS between the two app - app1 has two css files, while app2 has about 8 of them. Much of the CSS between the two apps is the same, but there are some differences. I'm looking for a tool to compare all the elements of each app, and show what's missing, what's different, etc. Ideally the output would be 3 files: Common, app1 and app2, but I won't be that fussy if it can just show me the differences between the two apps.
Does such a tool exist?
If you hate downloading tools, there's an online version of css comparer here http://www.alanhart.co.uk/tools/compare-css.php
It provides a comparison of css class files between two files
I don't know of a stand-alone tool tailored for this specific purpose. There's a PHP class called "CSS Comparer", but I have no idea how easy it is to use. The screenshot on that page looks promising though.
Personally, I would probably just concatenate all the files together, so that you have one file for each app, and then run a diff on them. To make it even easier, you could run both files through something like CSSTidy or do some imaginative file processing with search/replace and sorting. That could get all the declarations in the same order in both files, so the diff would be clearer.
Combine all of these files into a single file and give it a run through a CSS optimizer or compressor. An optimizer should see all of your duplicate selectors and weed them out.
I'd recommend YUI's compressor, but there are plenty of web-based compressors/optimizers available, too. Here's one and another. YMMV with them, but a good Google search can turn up a bunch more.
Normally I'd recommend diff. Since you explicitly write that you are looking for something "not diff based", maybe you could describe why diff does not help you.
Then others might be able to propose something different.