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.
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 have generated a angular app with yeoman and now trying to minify my html files with grunt + htmlmin. The htmlmin bit looks like this:
htmlmin: {
dist: {
options: {
collapseWhitespace: true,
conservativeCollapse: true,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: ['*.html'],
dest: '<%= yeoman.dist %>'
}]
}
},
When I run this task then it responds that it has minified 2 files but I cant see them in the dist folder? There is no view folder created at all?
I don't use yeoman, but I do use Gruntjs.
Assuming it's not a yeoman config issue, you can do something similar to what I do. Here is the gist...
First I have a development process I've created that does not uglify, minify, or anything else... this helps speed up my dev process.
Then when I'm ready to publish I run it through a publish process that includes uglify, concats, minify, imagemin, etc...
You really only need to minify the html from the build (output) directory... and since you're publishing you might as well just overwrite the HTML files in the build directory with the htmlmin versions (there is really no sense in having both versions for publishing).
Here is my task to do that... for this case let's assume your output directory is named "_build". It's actually a very easy and clean task. Hope this helps...
htmlmin: {
site: {
options: {
removeComments: true,
collapseWhitespace: true,
removeEmptyAttributes: false,
removeCommentsFromCDATA: false,
removeRedundantAttributes: false,
collapseBooleanAttributes: false
},
expand: true,
src: './_build/**/*.html',
}
}
You can't htmlmin something that doesn't exist yet. You have to build the output directory first and then run htmlmin on those files... I think your src will be more like the following as well...
files: [{
expand: true,
src: '<%= yeoman.dist %>/**/*.html'
}]
If this works for you, then please vote-up my answer and mark it as the correct answer.
With Yeoman, change your grunt file in both the 'htmlmin" and "copy" sections. This will allow for minification, more than one sub directory down.
Change this line:
src: ['*.html', 'views/{,*/}*.html'],
to this:
src: ['*.html', 'views/**/*.html'],
*Just be sure to change it in the 'htmlmin" and correspondingly in the "copy" section of your same grunt file.
I have an angular app that I have scaffolded using yeoman.
When I am trying to build with grunt, no views directory is generated in dist/
This is how my GruntFile looks
htmlmin: {
dist: {
options: {
collapseWhitespace: false,
conservativeCollapse: false,
collapseBooleanAttributes: true,
removeCommentsFromCDATA: true
},
files: [{
expand: true,
cwd: '<%= yeoman.dist %>',
src: ['*.html'],
dest: '<%= yeoman.dist %>'
}]
}
},
ngtemplates: {
dist: {
options: {
module: 'tweetSearchApp',
htmlmin: '<%= htmlmin.dist.options %>',
usemin: 'scripts/scripts.js'
},
cwd: '<%= yeoman.app %>',
src: 'views/{,*/}*.html',
dest: '.tmp/templateCache.js'
}
},
And this is how my grunt logs look like
Running "ngtemplates:dist" (ngtemplates) task
File .tmp/templateCache.js created.
>> Usemin has not created uglify.generated yet!
And
Running "usemin:html" (usemin) task
Replaced 2 references to assets
Running "usemin:css" (usemin) task
Replaced 2 references to assets
Running "usemin:js" (usemin) task
Replaced 2 references to assets
Running "htmlmin:dist" (htmlmin) task
Minified 2 files
But I still cannot see any views folder generated in my dist/ folder
Please help me with the configuration
Please have a look to this link
https://www.npmjs.com/package/grunt-angular-templates
Grunt is caching your HTML templates with $templateCache. That means all your Html files were included in the script*.js file which was generated in dist/scripts/script*.js.
That is why the views directory is not being generated in dist/
Make change in your gruntfile.js
htmlmin. files.src: ['.html', '{,/}*.html']and
copy.dist.files.src:[
'.{ico,png,txt}',
'.htaccess',
'.html',
'{,/}.html',
'images/{,/}.{webp}',
'styles/fonts/{,/}.*'
]
In this way it is working for me.
I have a directory:
- app/
- monday/
a.js
b.js
- tuesday/
a.js
b.js
And I configured as below in Grunt：
files: [{
expand: true,
cwd: '<%= yeoman.app %>/',
src: ['**/*.js'],
dest: '<%= yeoman.dist %>/',
ext: '.js'
}]
Then Grunt will create a directory:
- build/
- monday/
a.js
b.js
- tuesday/
a.js
b.js
But how can I get the created directory structure like this:
- build/
- monday/
- wrap/
a.js
b.js
- tuesday/
- wrap/
a.js
b.js
I've tried
files: [{
expand: true,
cwd: '<%= yeoman.app %>/',
src: ['**/*.js'],
dest: '<%= yeoman.dist %>/**/wrap',
ext: '.js'
}]
and ... But none of them worked.
I don't think this is possible with the current configuration as you want to interpose folders in a structured hierachy retrieved by "**".
But:
One always forgets that Grunt file is not only declarative as it may appear when you look at it but it is plain Javascript so you can write a function to grab the src (like src: [getMySourceFiles()]) and you can write another function to return the dest value: dest: placeThemHere().
Moreover, you can write a function that will return the entire config object for copy or even more sections.
This way you have the power to play with it in a way that is as complex as you can handle.
Hope this helps anyone remember that grunt is actually javascript, not json.
On my project I added to my bower.json some projects that use fonts:
fontawesome
bootstrap
roboto-fontface
Grunt file was mainly generated by "yo angular" with some custom edits. Fonts work just fine in "grunt serve" development mode but don't work when I do my dist build with "grunt".
The problem is that fonts aren't copied to my dist folder. To fix that I manually changed my Gruntfile to copy:dist all my fonts. Like this:
{
expand: true,
cwd: "<%= yeoman.app %>/bower_components/bootstrap/dist/fonts",
dest: "<%= yeoman.dist %>/fonts",
src: ["*.*"]
}
My problem now is that all my libraries CSS expect the fonts to be on a specific folder ( roboto-fontface and bootstrap for example expect the font to be in different folders).
So I'll have to change my gruntfile to replace the fonts reference on the *.css files to target the right paths. I don't know yet how to do this but my main itch is that this seems very "hacky"
Bower works very well with my css files: they are automatically added to index.html and their href is correctly replaced when doing my dist build. For example I can upgrade my ng-grid project without problems, remove and add new projects. I believe that works because of the bower.json file on the ng-grid project that contains
"main": ["./ng-grid.css", "./build/ng-grid.js"]
Grunt is correctly configured to understand that and add it to my index.html.
But for fonts it seems the only solution is to to modify my gruntfile to add copy:dist and then some kind of regex replacement on my *css files. But, for example, the roboto-fontface project bower.json file also seems to have a good "main" where all the fonts are listed besides the css file.
For me it seems logical that I should be able to configure my Gruntfile so that it understands that the "main" parameter has fonts and automatically copies them to my dist/ and replaces my css files with the correct path.
When I add a new font to my project I'll have to edit my Gruntfile, also when I remove/update fonts.
So, the question is simple: how can I best manage my project fonts? What are the best practices? How are the 'cool kids' doing it?
I ran into this issue a few weeks ago, I also used yeoman-angular-generator and had to tweak the copy:dist as well.
In my project I was using 3 separate fonts, font-awesome, lato and open-sans. I added font-awesome via bower but the other 2 I manually downloaded them and placed them under app/fonts
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'*.html',
'views/{,*/}*.html',
'images/{,*/}*.{png, jpg, jpeg, gif,webp}',
//any new font you drop under app/fonts will be copied to dist
'fonts/**'
]
}, {
expand: true,
cwd: '.tmp/images',
dest: '<%= yeoman.dist %>/images',
src: ['generated/*']
}, {
expand: true,
cwd: '.',
src: 'bower_components/bootstrap-sass-official/assets/fonts/bootstrap/*',
dest: '<%= yeoman.dist %>'
}, {
expand: true,
dot: true,
cwd: 'bower_components/font-awesome',
src: ['fonts/*.*'],
dest: '<%= yeoman.dist %>'
}]
},
styles: {
expand: true,
cwd: '<%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
//rest of Gruntfile...
Hope this helps!