I would like to be able to duplicate ng-boilerplate's script compilation process in my own app, but I am unable to get it working.
I am referring to having this line in index.html be compiled into a list of all the scripts in my app:
<!-- compiled JavaScript --><% scripts.forEach( function ( file ) { %>
<script type="text/javascript" src="<%= file %>"></script><% }); %>
I added the filterForJS function and registered the multi task in my gruntfile.js, but it is not working :(
Have you added the options for the index task?
```
/**
* The `index` task compiles the `index.html` file as a Grunt template. CSS
* and JS files co-exist here but they get split apart later.
*/
index: {
/**
* During development, we don't want to have wait for compilation,
* concatenation, minification, etc. So to avoid these steps, we simply
* add all script files directly to the `<head>` of `index.html`. The
* `src` property contains the list of included files.
*/
build: {
dir: '<%= build_dir %>',
src: [
'<%= vendor_files.js %>',
'<%= build_dir %>/src/**/*.js',
'<%= html2js.common.dest %>',
'<%= html2js.app.dest %>',
'<%= vendor_files.css %>',
'<%= recess.build.dest %>'
]
},
/**
* When it is time to have a completely compiled application, we can
* alter the above to include only a single JavaScript and a single CSS
* file. Now we're back!
*/
compile: {
dir: '<%= compile_dir %>',
src: [
'<%= concat.compile_js.dest %>',
'<%= vendor_files.css %>',
'<%= recess.compile.dest %>'
]
}
},
```
Related
I created a yeoman angular project that is not building properly. After I run run the production build (dist folder), I get this error:
Failed to load template: /bundles/craigslist/main.html
It seems to be copying the files, but since the html files get turned into a string that lives in dist/scripts.js, it throws an error when trying to find /bundles/craigslist/main.html
In my "/dist/scripts.js":
.config(["$routeProvider", function(a) {
a.when("/", {
templateUrl:"/bundles/craigslist/main.html",
controller:"CraigslistMainCtrl",
controllerAs:"craigslist_main_root"
})
Info if necessary:
instead of the pattern /scripts and /views, I use bundles that organize similar files together, regardless of extension. For example, I have a /bundles/craigslist folder, which has the craigslist templates, service and routes. I'm trying to adjust my Gruntfile.js to account for this.
This is my grunt file: https://gist.github.com/ivansifrim/f632832a4ba8f44bf828b5d88066a0ce
This is my folder structure:
I tried to apply what was discussed here Angular / grunt failed to load template without any luck.
Try :
usemin: {
html: ['<%= yeoman.dist %>/**/*.html'],
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
js: ['<%= yeoman.dist %>/scripts/{,*/}*.js', '<%= yeoman.dist %>/bundles/{,*/}*.js'],
options: {
assetsDirs: [
'<%= yeoman.dist %>',
'<%= yeoman.dist %>/images',
'<%= yeoman.dist %>/styles'
],
patterns: {
js: [[/(images\/[^''""]*\.(png|jpg|jpeg|gif|webp|svg))/g, 'Replacing references to images']]
}
}
}
I am building angular project with grunt and let's assume that i have follow structure:
-- app.js
-- modal
----createTemplate
------createTemplate.js
----modal.js
and createTemplate.js implements controller for module, declared in modal.js, for example:
modal.js
angular.module('modal', [])
.controller('ModalInstanceCtrl', function($scope) {
//some stuff
});
createTemplate.js
angular.module('modal')
.controller('CreateTemplateCtrl', function($scope) {
//some stuff
});
and i have Grunt task, that builds index.html:
index: {
build: {
dir: '<%= build_dir %>',
src: [
'<%= build_dir %>/src/**/*.js'
]
}
}
So, when i build index.html, i get follow order of files:
<script type="text/javascript" src="src/app/home/modal/createTemplate/createTemplate.js"></script>
<script type="text/javascript" src="src/app/home/modal/modal.js"></script>
What leads to error Module 'modal' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument., because declaration of module is happened after call to it.
So, how should i edit gruntfile to add files not in alphabetcal order, but in order of breadth-first-search?
It is always better to use separate files for module definition, and call it like 'modal-module.js'. After that you can easily inject module-files first, with this parameters:
index: {
build: {
dir: '<%= build_dir %>',
src: [
'<%= build_dir %>/app/app.js',
'<%= build_dir %>/app/**/*module.js',
'<%= build_dir %>/app/**/*constants.js',
'<%= build_dir %>/app/**/*provider.js',
'<%= build_dir %>/app/**/*enum.js',
'<%= build_dir %>/app/**/*model.js',
'<%= build_dir %>/app/**/*config.js',
'<%= build_dir %>/app/**/*filter.js',
'<%= build_dir %>/app/**/*directive.js',
'<%= build_dir %>/app/**/*decorator.js',
'<%= build_dir %>/app/**/*interceptor.js',
'<%= build_dir %>/app/**/*service.js',
'<%= build_dir %>/app/**/*workflow.js',
'<%= build_dir %>/app/**/*repository.js',
'<%= build_dir %>/app/**/*resolver.js',
'<%= build_dir %>/app/**/*controller.js'
]
}
}
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 read a lot about this issue but still did not find the solution.
I have an Angular application set up with Yeoman's generator whitout Sass. I tried to include fontawesome, so I used bower install components-font-awesome --save.
The problem is that when I grunt buildmy app, I have an error because fonts are not found in my dist folder :
GET http://myapp.com/bower_components/components-font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3 404 (Not Found)
So I tried to add this to Grunt copy task in order to copy the fonts to the right directory:
{
expand: true,
cwd: '<%= yeoman.app %>/bower_components/components-font-awesome/fonts/',
src: ['**'],
dest: '<%= yeoman.dist %>/bower_components/components-font-awesome/fonts/'
}
But I am still getting the same error...
EDIT
Fonts seem to be available at http://myapp.com/dist/bower_components/components-font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3
But not at the URI throwing the error (without /dist) ...
The only way I found to include icons in my Angular's application was to include glyphicons instead of fontawesome. The same problem is happening when grunt building my app with glyphicon, but the following copy task worked for me:
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
'views/{,*/}*.html',
'bower_components/**/*',
'images/{,*/}*.{webp}',
'fonts/*'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
I'm using a yeoman web app template that runs an AngularJS app.
usemin is great, but AngularJS files must be pre-processed with ngmin to be annotated before being uglified and minified by usemin.
I can produce a single, concatenated file of annotated AngularJS controllers, directives, services, etc. using ngmin.
ngmin: {
build: {
src: ['<%= yeoman.app %>/js/one.js','<%= yeoman.app %>/js/two.js'],
dest: '<%= yeoman.dist %>/ng/annotated.js'
}
}
Basically I run a build that successfully created annotated.js.
What I want is declare annotated.js file in index.html to inform usemin to use that file only for distribution, not the ones I mention for development.
<!-- build:js js/app.min.js --> //annotated.js only must be processed instead of those 2 files.
<script src="js/one.js" type="text/javascript"></script>
<script src="js/two.js" type="text/javascript"></script>
<!-- endbuild -->
For reference, my usemin config:
useminPrepare: {
options: {
dest: '<%= yeoman.dist %>'
},
html: '<%= yeoman.app %>/index.html'
},
usemin: {
options: {
dirs: ['<%= yeoman.dist %>']
},
html: ['<%= yeoman.dist %>/{,*/}*.html'],
css: ['<%= yeoman.dist %>/css/{,*/}*.css']
}
For reference, my build task:
grunt.registerTask('build', [
'clean:dist',
'useminPrepare',
'concat',
'cssmin',
'ngmin',
'uglify',
'copy:dist',
'rev',
'usemin'
]);
How can I achieve it?
So, you used yo webapp to generator an application that you then plugged Angular in to? For future Angular apps you create (or if it's not too late for this one), there's a generator for that! https://github.com/yeoman/generator-angular
Here is a link and some code that shows how the ngmin task is pre-configured with the Angular generator:
https://github.com/yeoman/generator-angular/blob/v0.4.0/templates/common/Gruntfile.js#L326-335
ngmin: {
dist: {
files: [{
expand: true,
cwd: '<%= yeoman.dist %>/scripts',
src: '*.js',
dest: '<%= yeoman.dist %>/scripts'
}]
}
}
Plug that in, tweak as necessary, and let me know if it works!