Gruntfile issue with grunt-contrib-requirejs - javascript

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

Related

How to use external libraries in grafana datasource-plugin

how can I use a external library in a grafana datasource plugin?
My plugin works but when i require the "mqtt" library which I have installed and saved to the package.json file I get the following error:
Plugin Error
Error loading http://localhost:3000/public/mqtt as "mqtt" from http://localhost:3000/public/plugins/myfirstplug/datasource.js
this is what my datasource.js head looks like:
define([
'mqtt'
'angular',
'lodash',
'../core_module',
'app/core/config',
],
function (mqtt,angular, _, coreModule, config) {
'use strict';
As I said the package.json already includes mqtt as dependency and ive put the mqtt folder in almost every folder which may be used as library folder manually , too.
How can I use a npm library in a grafana datasource plugin so that it works?
Thanks in advance!
I came across the same issue with including additional dependency for my plugin. I used this experimental plugin as boilerplate to tackle this issue:
You need to create a folder: src/external/
Add the compiled single file dist versions of your dependency under this folder like src/external/mqtt.js. (Actually even Grafana project has vendors in git repository)
In build task, you need to copy the files under your external folder, so your Gruntfile.js should be like this: https://github.com/NatelEnergy/grafana-plotly-panel/blob/master/Gruntfile.js
...
copy: {
...
externals: {
cwd: 'src',
expand: true,
src: ['**/external/*'],
dest: 'dist'
}
...
},
...
grunt.registerTask('default', ['clean', 'copy:src_to_dist', 'copy:pluginDef', 'copy:img_to_dist', 'copy:externals', 'babel']);
Now you can import the external library: import * as mqtt from './external/mqtt';

Requirejs and Grunt: mainConfigFile vs grunt task options

I find there to be a lot of confusion/lack a specific way of handling building with require in grunt. I'm just confused what configuration should go directly in Grunt task options:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
requirejs: {
compile: {
options: {
baseUrl: './js',
mainConfigFile: 'config.js',
optimize: 'none',
include: ['./main'],
out: 'optimized.js'
}
}
}
});
And then in config file:
({
appDir: './',
baseUrl: './js',
dir: './dist',
optimize: 'none',
optimizeCss: 'standard',
removeCombined: true,
paths: {
jquery: './js/jQuery/jquery',
}
})
Obviosuly there seems to be some redundancy but that is mostly what I've found. Can someone explain why or if I'm mistaken? Can I place all config in one or the other? I'm only planning on working off of the optimized single file with almond.
Also do I only state the initial single point of entry to build the dependency chain from ie my main.js file and any require calls in there or can I state a wildcard list of files that calls modules:
include: ['./variousFiles/*.js']
Any and all clarifications of how to best utilize require with Grunt will be appreciated. Thank you!
When you use RequireJS' r.js optimizer there are two configurations to speak of:
The runtime configuration which is what is described in the RequireJS documentation. This is where you tell RequireJS where to find modules at runtime.
The build configuration, which is what is described with r.js' documentation. This tells r.js how to build bundles from your modules.
The mainConfigFile option is for the build configuration, it tells r.js where to find the runtime configuration you plan to use when you run the bundles it will create. This is to prevent having to duplicate shim and paths options from the runtime configuration to the build configuration.
In your description, it looks like you are making mainConfigFile point to a build configuration. This is useless.

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.

Grunt + require.js config for a simple website

I have the following simple structure for my website:
src
js
core.js
main.js
lib
jquery-1.8.2.js
require-2.1.1.js
require-text.js
templates
1.html
2.html
index.html
build
I want all js+lib files to be compiled into one build/js/main.js file and other files just to be copied to build folder. How to write grunt.js config for this task? It seems I should use grunt-contrib-require..
The second question is how to compile 1.html and 2.html (I use require text! plugin) into one line for each and include theese lines to build/js/main.js? This case there should be only two files into build folder - index.html and main.js.
Take a look at grunt-contrib-requirejs and see if it is helpful to you.
The Grunt Website offers a very good tutorial to get you started, this is what you will need:
grunt-contrib-concat - To put files together in one
grunt-contrib-copy - To copy files to your "build" folder
grunt-usemin - To use the compiled js file in your html
I am not sure how to put those html files together though, feels weird to do that but maybe you can find a plugin for it.
Your Gruntfile.js should reside at the root of the directory i.e ls should show src/ build/ Gruntfile.js
Contents of `Gruntfile.js specific for your requirements:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
js: {
src: [
'src/js/*', 'src/lib/*'
],
dest: 'build/js/combined.js'
}
},
uglify: {
js: {
files: {
'build/js/main.js': ['build/js/combined.js']
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat:js', 'uglify:js']);
};
I don't think require-js to be used here. Require-js is helpful when you need to load your js scripts in a specific order. If that being the case add the below code in your Gruntfile.js just below pkg: grunt.file.readJSON('package.json'), line
requirejs: {
compile: {
options: {
baseUrl: "path/to/base",
mainConfigFile: "path/to/config.js",
name: "path/to/almond", // assumes a production build using almond
out: "path/to/optimized.js"
}
}
}
You might consider adding grunt-require to the list that luschn put together. It uses r.js, has lots of options, and is pretty darn nice.

Categories