I build a Angular App with Yo angular-genertor,
I was building the app with Grunt Build fine, then I added Bootstrap 3 and also npm install grunt-bower-install
I added these lines to the Grunt file
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
//ADDED THIS LINE
grunt.loadNpmTasks('grunt-bower-install');
grunt.initConfig({
yeoman: {
// configurable paths
app: require('./bower.json').appPath || 'app',
dist: 'dist'
},
//ADDED THESE LINES
'bower-install': {
target: {
src: [
'app/index.html'
],
}
},
I have removed these line however!
Now Grunt Build is throwing this error
Running "bowerInstall:app" (bowerInstall) task
Warning: Cannot read property 'main' of undefined Use --force to continue.
Aborted due to warnings.
I do know what to do or even where to start?
In my yeoman generated project this task looks like:
'bower-install': {
app: {
html: '<%= yeoman.app %>/index.html',
ignorePath: '<%= yeoman.app %>/'
}
},
In newer version instead of html uses src:
'bowerInstall': {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: '<%= yeoman.app %>/'
}
},
Maybe you adapt it to your case. Though i think it should work without changes.
But you have almost the same, so maybe the problem in another place.
I found the answer,
I simply needed to run Bower Install,
Related
I am having this problem and unable to find any answer which fix the problem.
I have created small Angularjs code with grunt build system.
Bower.json
http://pastebin.com/8AScfd7d
Gruntfile.js
http://pastebin.com/e0d7QLGG
log.txt (grunt --force)
http://pastebin.com/MYk9iR53
index.html
http://pastebin.com/B48w0Z58
using grunt --force command to build.
When I run the build it does not show any errors in console and under netowek tab all script loads fine but nothing happens. If I replace the minified script tag (my custom code) with the source script it start working.
Running out of ideas what could be wrong.
Replaced ngMin with ngAnnotate in Gruntfile.js and also added 'ngAnnotate:dist' in grunt build task.
/*ngmin: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat/scripts',
src: '*.js',
dest: '.tmp/concat/scripts'
}]
}
},*/
ngAnnotate: {
dist: {
files: [
{
expand: true,
cwd: '.tmp/concat/scripts',
src: '*.js',
dest: '.tmp/concat/scripts'
}
]
}
}
I use ui-tinymce module in angular project. In one controller are called tinymce.execCommand('mceRemoveControl', true, 'ntContent'); and this works fine. But after grunt build command I get the following error: ReferenceError: tinymce is not defined. Can anyone help with this ?
I had the same problem with angular-ui-tinymce module, I fixed this by making sure that the file is included.
<script src="bower_components/tinymce-dist/tinymce.min.js"></script>
<script src="bower_components/angular-ui-tinymce/src/tinymce.js"></script>
This scripts are inserted in the index.html file bower install angular-ui-tinymce and also the source code is downloaded and placed at the appropriate location.
Also when you run grunt build on the copy task it will not copy the files needed from the /tinymce-distfolder and a solution is to manually add to the copy task to copy the folders you need. I had to copy the /skins /themes /plugins folders directly into the dist/scripts folder by inserting the following code into the grunt.js file at the copy task:
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
...
}, {
...
}, {
expand: true,
cwd: 'bower_components/tinymce-dist/themes/modern/',
src: ['**'],
dest: '<%= yeoman.dist %>/scripts/themes/modern/'
}, {
expand: true,
cwd: 'bower_components/tinymce-dist/skins/',
src: ['**'],
dest: '<%= yeoman.dist %>/scripts/skins/'
}, {
expand: true,
cwd: 'bower_components/tinymce-dist/plugins/link/',
src: ['**'],
dest: '<%= yeoman.dist %>/scripts/plugins/link/'
}]
},
styles: {
...
}
}
This is not the best solution ever but it worked for me, hope it helps somebody.
I'm building an angular app with grunt which uses cache manifest.
My problem is that after concatenation and minification of all my js files in one, the manifest.cfm doesn't get rewritten and that makes the paths in it incorrect.
Here is some of my Gruntfile.js :
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
dest: '<%= yeoman.dist %>',
flow: {
html: {
steps: {
js: ['concat', 'uglifyjs'],
css: ['cssmin']
},
post: {}
}
}
}
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
html: ['<%= yeoman.dist %>/{,*/}*.html','<%= yeoman.dist %>/{,*/}*.tpl.html', '<%= yeoman.dist %>/views/templates{,*/}*.tpl.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
options: {
assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images', '<%= yeoman.dist %>/images/icons-app']
}
},
I know the question is a bit old, but I just solved something similar, and could not find many answers to help. Your best bet is to continue using filerev and use a grunt manifest creator like grunt-manifest. You want the file names to change when they are updated (with filerev) so the manifest file will change as well. That is the only way the application cache will know it needs to update.
After you install grunt-manifest, a config like this in your grunt file should do what your asking:
manifest: {
generate: {
options: {
basePath: 'app/',
network: ['*'],
preferOnline: true
},
src: [
'scripts/*.js',
'styles/*.css',
'images/*.*',
'views/{,*/}*.html'
],
dest: 'dist/cache.manifest'
}
}
More Info: http://bnlconsulting.com/blog/the-browser-cache-and-angular
I ended up hand-writing the new paths in manifest.cfm before building. I'm not sure there is actually a way to get it automatically rewritten by any grunt task.
you can comment the "filerev" task form your grunt build one. This will spare you the rewriting after a new build.
Maybe necromacing this thread but there is: https://github.com/JoshSchreuder/grunt-manifest-generator
It will scan a given html file and automatically include all javascript/css/html files within.
When you run grunt to build the app, the vendor.css file created in the dist folder 'mis-links' the glyphicons as /app/bower_componenets/.../glyphicons-... instead of ../fonts/glyphicons-...
In Gruntfile.js comment out the following line to fix this issue:
cssmin: {
options: {
//root: '<%= yeoman.app %>'
}
}
Source: https://github.com/yeoman/generator-angular/issues/645
I've been using a modified version of the gruntfile that comes with the Yeoman.io base angularjs generator, and the grunt-bower-install command is kind of handy for keeping my base index.html file up-to-date with bower dependencies.
However, when I do a bower install (package) --save and then grunt bower-install, my index.html updates, but my karma.conf.js does not update, meaning I need to manually add the new file to the list of files to load when karma runs the test suite (otherwise the injector fails trying to inject a nonexistent package).
Is there any easy-peasy way to add this to my grunt workflow? It's not the end of the world, but it is one of those easy-to-forget things.
I actually came up with a solution for just this problem. Check out https://github.com/stephenplusplus/grunt-bower-install/issues/35#issuecomment-32084805
'bower-install': {
app: {
src: '<%= yeoman.app %>/index.html',
ignorePath: '<%= yeoman.app %>/'
},
test: {
src: 'karma.conf.js',
fileTypes: {
js: {
block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
detect: {
js: /'.*\.js'/gi
},
replace: {
js: '\'{{filePath}}\','
}
}
}
}
}