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.
Related
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
}
]
}
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';
I am building an application in Sails.js and i want to compile some jade templates to javascript functions for use from the client. I have found a few articles explaining how to do this, but when i try to implement their steps they don't seem to work for me
I am trying to compile files located in App/Views/Client and put the compiled javascript files into App/.tmp/public/templates
My grunt task is in App/tasks/config and is based on the coffeescript grunt task that comes with sails.js. My grunt task looks like this
module.exports = function(grunt) {
grunt.config.set('jade', {
dev: {
templates:{
options: {
pretty: true,
client: true,
namespace: 'Templates'
},
files: [{
expand: true,
cwd: 'views/client/',
src: ['**/*.jade'],
dest: '.tmp/public/templates/',
ext: '.js'
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-jade');
};
I have added it to the compileAssets.js grunt task that comes with sails.js, and i can see it being run when i run the sails lift command.
When it runs it reports 0 files created, which suggests to me that there is a problem with my paths. However i have defined them based on the same working folder as the other grunt tasks in sails.js. I have tried a number of variations on the paths, including putting ./ at the start of them, but none seem to work.
Can anyone help explain what is wrong with my grunt file? Or how to make it output the folder it is looking at to the console so i can figure out whether my path is correct or not?
Your configuration object is one level too deep.
dev is already the task's target and Grunt will start looking for the files property in there. templates is quietly ignored.
So the configuration object should look like this:
dev: {
options: {
pretty: true,
client: true,
namespace: 'Templates'
},
files: [{
expand: true,
cwd: 'views/client/',
src: ['**/*.jade'],
dest: '.tmp/public/templates/',
ext: '.js'
}]
}
I use grunt-urequire plugin to compile my project-1's modules into single file (let's call it project-1.js). Config looks like this:
urequire: {
umd: {
template: 'UMD',
path: 'src',
dstPath: 'dist/umd'
},
dev: {
template: 'combined',
path: 'src',
main: 'Main',
dstPath: 'dist/<%= pkg.name %>-<%= pkg.version %>.js'
},
min: {
derive: ['dev', '_defaults'],
dstPath: 'dist/<%= pkg.name %>-<%= pkg.version %>.min.js',
optimize: 'uglify2'
},
_defaults: {
useStrict: true,
noConflict: true,
bundle: {
dependencies: {
exports: {
root: {
'Main': 'Project1'
}
}
}
}
}
}
Project-1 depends on project-2 which is also managed by grunt-urequire. In package.json:
"devDependencies": {
"project2": "^0.1",
...
}
Now I want to embed project-2 dependency into project-1 on build so that one could just do
<script src="project-1.js"></script>
in browser and don't include project-2 manually.
I know browserify supports this, but can I do it using urequire?
uRequire doesn't embed external dependencies (like jquery, underscore etc) into the combined.js file, unlike browserify which is the only option (as far as I know) and its also the default behavior of r.js.
This is partly intentional, cause its better to load (either using RequireJS or <script/>) these external libraries from a CDN: your user's browser might have already cached them last time it loaded your app (or someone else's app). And next time your myApp.js changes, it will download only that and not a monolithic bundle that contains all the same external libs all over again.
uRequire actually goes a long way to make sure these are loaded externally, whether on nodejs (using plain node's require) or the browser, using AMD or the exported global properties (like window.$, window._ or whatever the external library is mapped to).
I would imagine you can easily override this behavior: just place project-2.js whenever you build it onto the source folder of project-1, and just use it in project-1 as a normal dependency.
Alternatively you can again build/convert all project-2 files as AMD (not combined) into the source folder of project-1 and use them as being part of it.
Finally, you could just symlink the project-2 source into project-1, its supported on unix/linux for decades and also on Windows 7 onwards. Then uRequire will convert the sources from both projects only once and build as a single output.
Ideally I would like to have virtual sources (see https://github.com/anodynos/uRequire/issues/40) so you can leave both projects separate (i.e not build one into the other), but build both as one output.
If you want to version the 2 projects on the same git repository because they are updated together and have the same release lifecycle, you can have a build script in 2 parts:
First part is to compile project2 (project2/src)
Second part is to compile project1 (project1/src)
During the compilation of project2, you can copy the distributed JS of project2 into project1/src so that it is automatically.
If you have different release lifecycles, you can use some grunt tool to download the dependency from a CDN / NPM and put it into the project1/src folder before packaging project 1
This is somehow what is done by Browserify by using NPM, but it would probably be the same with Bower, components or custom JS code to download the dependencies. I would recommend using a tool like NPM however because it also download transitive dependencies (if one day project2 introduces a dependency, you won't have to touch project1 build...)
Finally, I don't know uRequire but maybe you could be inspired by this project, which embeds dependencies in the packaged version (eventie)
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