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.
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'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.
I would like to use browserify and the hbsfy Handlebars transform to modularise the JavaScript in a web application I'm writing.
Using gulp, I set up tasks to run browserify and hbsfy to compile several js and hbs files into one using a source structure that grouped my modules:
/src
- /javascript
- app.js
- /module-one
- module-one.js
- module-one.hbs
- /moduleTwo
- module-two.js
- module-two.hbs
However this is problematic when referencing one module from another - requiring the use of brittle relative paths that would need updating if a module is moved or further nested.
substack wrote on Avoiding ../../../../../../.. in his (great) browserify handbook. There, he suggests storing app modules in a directory under node_modules.
Happily I set about doing this, but quickly ran into issues with hbsfy no longer compiling my templates. According to the docs, browserify will only transform top level files, and will only transform those in node_modules if the global option is set to true.
This fixed my problem, but the documentation states:
Use global transforms cautiously and sparingly, since most of the time
an ordinary transform will suffice.
I don't believe my use case is unusual - should I be storing my modules in a different manner? Or am I missing a piece of the puzzle?
I found a simple example in hbsfy itself which might be helpful to you https://github.com/epeli/node-hbsfy/blob/master/example/index.js
It depends on what is the framework you are looking at, if you are doing angularjs, you can see an example in https://github.com/mallim/sbangular/blob/master/src/main/resources/js/login/LoginCtrl.js
In this case, the specific code will be as follows:
app.run(['$templateCache', function($templateCache) {
$templateCache.put('login.html', require('./login.html') );
}]);
login.html is actually in the same folder as LoginCtrl.js
I've a bunch of subtasks for grunt watch (e.g. grunt watch:styles, grunt watch:sprites, etc). Then many other tasks run grunt watch. I would like to exclude one task. Is there a way to specify that? Basically run all grunt watch subtasks except grunt watch:dist.
I know I could create another task and only specify the subtasks I'm actually interested on, however, if I add another subtask later, that means now I've to add it, so I would rather not do it that way.
Thanks
There might be a better way, but this is doing the trick for now:
grunt.registerTask('watch:basic', function () {
delete grunt.config.data.watch.dist;
grunt.task.run('watch');
});
Fortunately, in this case, I don't have other tasks that might run grunt watch:dist, so it's safe to simply remove the config, but I can think of other cases where this approach would create conflicts.