Grunt target subdirectories only - javascript

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'],

Related

Copy all files under specific directory name format in Grunt?

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
}
]
}

Grunt clean to delete all folders at the root of a directory

clean: {
build: {
src: ['dist/src/vendors/**/*', '!dist/src/vendors/*']
}
}
these globbing patterns delete all files inside folders in the directory, it does not delete files at the root. However, the problem is that it doesn't delete the folders. The end result is the root has all the files (which is right) but it still has the folders (which are now empty).
What globbing pattern should be used to say "delete the folders, a keep the files at the root"
You will need to set the deletion as this:
['dist/src/vendors/*/']
This will delete all subfolders, but not the files at the root in vendors.
Read more about globbing patterns
Hope it helps.

Grunt source file relative path

Why must the leading slash be removed in the source file paths in order for Grunt to properly locate the files? The gruntfile is in the main project older along with the "includes" folder that contains the JS files.
module.exports = function(grunt) {
var SiteMasterHeaderArray = [
"/includes/js/knockout/knockout-3.4.0.js",
"/includes/js/common/common.js"
];
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
dest: {
files: {
'dest/SiteMasterHeader.js': SiteMasterHeaderArray
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
The destination file isn't written because (at least it appears this way to me) that Grunt is searching some other location for these files due to the "/" in the file path. Remove the slash and the function works perfectly.
A leading / means it's an absolute path and it's looking for it, starting from the root directory. Without that, it's searching for a relative path from where Gruntfile.js is.
If you'd like paths to be relative to a different folder than Gruntfile, please see grunt.file.setBase or the --base cli option. More information here.

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

Categories