Copy all files under specific directory name format in Grunt? - javascript

I have translation files under a t9n directory throughout my app...in some component directories, etc.
app
components
ComponentA
t9n
translations_A.json
ComponentB
t9n
translations_B.json
t9n
common-translations.json
And I'm looking to create a grunt task to copy all those .json files into an assets directory when the app is built.
Is there a way to grab all contents under specific directory names? So that I could say....for every directory under app, grab the contents of any t9n directory?
I know you can do things like...
"**/*.{png}" to say copy all PNG files....but not sure what it would be for the above.

Answer is like mentioned in the comments, "app/**/t9n/*.json particularly I was confused on what globbing patterns were with Grunt https://gruntjs.com/configuring-tasks#globbing-patterns
I ended up using the files array format from the grunt documentation https://gruntjs.com/configuring-tasks#files-array-format
and ended up with something like this...
"build-t9n": {
files: [
{
cwd: "src/app/js",
src: ["**/t9n/*.json"],
dest: "build/assets/t9n",
expand: true
}
]
}

Related

Will uglify include a file twice if a wildcard selector is used

Given my grunt uglify settings below; will the file manager.js be included twice in the resulting file foo.js? Or is uglify smart enough to figure out to not to include manager.js twice?
...
uglify: {
options: {
compress: true,
},
build: {
files: {
'dist/foo.js': [
'js/manager.js', // Other files depend on this - must be included first
'js/*.js', // Does this mean manager.js will be included twice?
],
}
}
},
Folder structure:
./js/manager.js
./js/bar.js
./js/baz.js
If uglify grabs the file twice, any recomendations how I can avoid this without having to manually add each javascript file?
Short Answer
Given my grunt uglify settings below; will the file manager.js be included twice in the resulting file foo.js?
No, the content of js/manager.js will be first in the resultant file, (i.e. dist/foo.js), and will NOT be included twice using your current uglify Task configuration.
Or is uglify smart enough to figure out to not to include manager.js twice?
Yes sort of, however it's actually grunt that works this out before passing an Array of unique file paths to uglify.
Long Answer
Excerpts from the grunt documentation for Globbing patterns read:
Also, in order to simplify otherwise complicated globbing patterns, Grunt allows arrays of file paths or globbing patterns to be specified. Patterns are processed in-order, with !-prefixed matches excluding matched files from the result set. The result set is uniqued.
The pertinent part here being: The result set is uniqued
The following code example is also given in the documentation:
// Here, bar.js is first, followed by the remaining files, in alpha order:
{src: ['foo/bar.js', 'foo/*.js'], dest: ...}
To prove the points mentioned in the documentation, let's assume we have the following five source .js files stored in the js/ directory. The pseudo content for each file is provided below the filename:
manager.js
console.log('manager.js')
a.js
console.log('a.js')
bar.js
console.log('bar.js')
baz.js
console.log('baz.js')
quux.js
console.log('quux.js')
If we run grunt using the files listed above and your current uglify Task configuration the resultant output is:
foo.js
console.log("manager.js"),console.log("a.js"),console.log("bar.js"),console.log("baz.js"),console.log("quux.js");
As you can see:
console.log("manager.js") appears first and only once (i.e. the result set has been uniqued).
The remaining files (i.e. those found via the glob pattern 'js/*.js') have been added in alpha order.

Grunt target subdirectories only

Is it possible with Grunt to target only subdirectories? I have a javascript folder in my project and it contains a few .js files and within this folder I also have a few subdirectories.
MainDirectory
/javascript
global.js
modal.js
/subdirectory1
somescripts.js
/subdirectory2
otherscrips.js
So in my grunt config I am using concat to grab only the files in the javascript folder and ignore the subdirectories. So what I need is to copy the files in the subdirectory and ignore the files outside the subdirectory, in this case global.js and modal.js. Here is my copy code (Gruntfile.js):
copy: {
subdirs: {
expand: true,
dot: true,
cwd: 'javascript',
dest: 'app/assets/javascript',
src: '**/*.js'// I know this grabs files and subdirectories
}
}
I'm sure there is a way to do this but after Googling and reading Grunt docs I still cant figure out a proper solution. Any help would be appreciated. Thanks.
The basic approach would be to specify all files in the current and any subdirectories, then explicitly ignore all files in the current directory.
reference grunt globbing patterns
Change your src property to:
src: ['**/*.js', '!*.js'],

How to package bower_components with only required resources?

I'm using Bower and Grunt on my application. Thus, I have a bower_components directory with several sub-directories, containing all my dependencies.
Currently, on my Gruntfile.js, I have something like that:
copy: {
bower: {
files: [
{
expand: true,
cwd: 'app/',
dest: 'dist/',
src: [ 'bower_components/**/*' ]
}
]
},
...
which means that I copy everything under bower_components to finally package my application. The problem is that I don't need everything under this directory, for example there are non minified JS, resources, documentation, etc.
Is there a way to make an intelligent filter that only takes the required elements in the bower_components directory (i.e. without selecting the files myself)?
Am I missing some good practices regarding the packaging of an application with bower and grunt?
Thanks
ps: as it is for an intranet application, I prefer not to use CDN.

Gruntfile issue with grunt-contrib-requirejs

I'm configuring my Gruntfile and I'm stuck on something I feel should be possible but I'm not able to find the right configuration for it. I'm trying to copy my bower components to my dist on build with the grunt-contrib-requirejs module. The part I'm stuck on is keeping the folder structure in tact when copying to dist.
My app's basic structure, and dist/ should build the same way
Gruntfile.js
app/
- assets/
- bower_components/
- js/
- img/
- etc/
- index.html
Currently, I define each file in the copy module and it copy's them all over
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: 'app',
dest: 'dist',
src: [
'*.{ico,png}',
'.htaccess',
'partials/**/*',
// Bower Components
'assets/bower_components/requirejs/require.js',
'assets/bower_components/fastclick/lib/fastclick.js',
'assets/bower_components/jquery/dist/jquery.min.js',
'assets/bower_components/modernizr/modernizr.js'
]
}]
}
},
But I want to eliminate this and use the paths I've already defined in main.js to copy these files over. Less hardcoded stuff, more automation.
My require task
requirejs: {
dist: {
options: {
mainConfigFile: app + '/assets/js/main.js',
dir: dist + '/assets/js',
optimize: 'uglify',
paths: {
modernizr: 'empty:',
jquery: 'empty:',
fastclick: 'empty:'
}
}
}
},
This current configuration combined with copy moves them all over properly. If I could eliminate the paths property all together and use directory properties only that would be great. If I have to copy my paths from my main.js into here thats ok... if it's the only way to do it.
Let me know if you need any more info!
The JS files in your bower directory should be included in the optimized output of requirejs, as long as they are configured and referenced in your require js app. If they're not referenced as dependencies, I don't think they get included.
The ico, png, htaccess and other files may need to be copied over manually.
Depending on your partials, the text plugin and hbs plugin could compile those into the optimized file I think.
I think defining empty: in paths are for using network resources (e.g. when using CDNs instead of using local bower libraries), so the paths config is probably unnecessary

concat underscore templates in a directory to a single js file and load it for use with a backbone app

I'd like to combine all the underscore templates in a directory to a single js file ( possibly precompile it ? ) for use with the backbonejs part of my sails.js app.
I think I can use the plain fs module with nodejs to read the files and combine them, I'm looking at grunt to do this as well but still not sure.
Can someone help me with this ?
You can use grunt to do this. The plugin grunt-contrib-jst is what you're looking for; it has installation and usage documents here.
A simple Gruntfile.js like this should do it. (This example assumes all your source code is under a src/ subdirectory, all templates are in *.html files under src/, and you're creating an output file in the build/ subdirectory. Adjust as needed to fit your actual situation.) Run by typing grunt on the command line.
Just include the single file build/view-templates.js in your index file to load all of your Underscore view templates.
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-jst');
grunt.initConfig({
// compile view templates into single file
jst: {
compile: {
files: {
"build/view-templates.js": ["src/**/*.html"]
}
}
}
});
grunt.registerTask('default', 'jst' );
};

Categories