I'm new in using Grunt tool, I was doing the steps like the video said, but i faced some errors and started from the whole beginning again, but now i'm facing this issue, when i type the command "grunt" in the CMD in the directory of the project folder i get everything good, but there is no JavaScript file created in the distribution folder directory "dist/scripts", and even the Uglify is not generated.
In the video after the instructor typed the command grunt a JS file created in dist/scripts directory with name "main.6c5adb2140e008f7bb85.js", and css file created in dist/styles directory with name "main.d1901e133950f2e3aeae.css", and also in his terminal it was written replaced 1 reference to assets and Uglify generated like in the picture:
Instead i get replaced 0 references to assets and the uglify is not generated:
I did all the installation command that in the video by order, and i created all the files (package.json, Gruntfile.js, app.js, .jshintrc)
after that i added the usemin to the require jit-grunt
and added it to the registerTask. Here's the Gruntfile.js source code:
'use strict';
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Automatically load required Grunt tasks
require('jit-grunt')(grunt, {
useminPrepare: 'grunt-usemin'
});
// Define the configuration for all the tasks
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: {
src: [
'Gruntfile.js',
'app/scripts/{,*/}*.js'
]
}
},
useminPrepare: {
html: 'app/menu.html',
options: {
dest: 'dist'
}
},
// Concat
concat: {
options: {
separator: ';'
},
// dist configuration is provided by useminPrepare
dist: {}
},
// Uglify
uglify: {
// dist configuration is provided by useminPrepare
dist: {}
},
cssmin: {
dist: {}
},
// Filerev
filerev:{
options: {
encoding: 'utf8',
algorithm: 'md5',
length: 20
},
release: {
// filerev: release hashes(md5) all assets (images, js and css)
// in dist directory
files: [{
src: [
'dist/scripts/*.js',
'dist/styles/*.css',
]
}]
}
},
// Usemin
// Replace all assets with their revved version in html and css files.
// options.assetDirs contains the directories for finding the assets
// according to their relative paths
usemin: {
html: ['dist/*.html'],
css: ['dist/styles/*.css'],
options: {
assetsDirs: ['dist', 'dist/styles']
}
},
copy: {
dist: {
cwd: 'app',
src: [ '**','!styles/**/*.css','!scripts/**/*.js' ],
dest: 'dist',
expand: true
},
fonts: {
files: [
{
//for bootstrap fonts
expand: true,
dot: true,
cwd: 'bower_components/bootstrap/dist',
src: ['fonts/*.*'],
dest: 'dist'
}, {
//for font-awesome
expand: true,
dot: true,
cwd: 'bower_components/font-awesome',
src: ['fonts/*.*'],
dest: 'dist'
}
]
}
},
clean: {
build: {
src: [ 'dist/']
}
}
});
grunt.registerTask('build', [
'clean',
'jshint',
'useminPrepare',
'concat',
'cssmin',
'uglify',
'copy',
'filerev',
'usemin'
]);
grunt.registerTask('default',['build']);
};
Need help please !!
it's look like there is no mistake in the commands that 've wrote but the mistake here is the name of the html in my project folder is not the same name which is "menu.html" and i wrote it in Gruntfile "meun.html" that's why it doesn't create the js & css file !!
I want to run ng-annotate via grunt on all my project's angular files.
Could not find this option.
I only have the option annotate by specify file name.
ngAnnotate: {
dist: {
files: {
'output_file_name.js': ['input_file_name'],
},
}
}
I need something more generic that would run recursively on a specific directory.
You can use the other configuration to go through folders and annotate each file which will be outputted in a *.annotated.js file.
ngAnnotate: {
dist: {
files: [{
expand: true,
src: ['**/*.js', '!**/*.annotated.js'],
ext: '.annotated.js',
extDot: 'last'
}],
}
}
I am using grunt,bower and yeoman for my angularjs web applicaiton. My UI code is ready for deployment. I want to create a .WAR file for deployment.
I installed "grunt-war" dependency using bower and I configured following code in my registerGruntTask.js file
grunt.loadNpmTasks('grunt-war');
grunt.initConfig({
/*
* Build a WAR (web archive) without Maven or the JVM installed.
*/
war: {
target: {
options: {
war_dist_folder: '<%= target %>',
war_name: 'sm-ui',
webxml_welcome: 'index.html',
webxml_display_name: 'sm-ui',
webxml_mime_mapping: [
{
extension: 'woff',
mime_type: 'application/font-woff'
} ]
},
files: [
{
expand: true,
cwd: '<%= target %>',
src: ['**'],
dest: ''
}
]
}
}
});
Then, I entered "grunt build" and "grunt war" in my command line. But, Nothing is creating. Please help me out.
I have been stuck with anjularjs ui-grid, it's showing some Chinese symbols in place of icons. After digging about it I get to know I have to use some font-files provided by ui-grid team, I downloaded the files and included them into my project but still m not getting the correct icon images and fonts, how to include these files into the project?
These are the file names which I downloaded and included in my project:
1 ui-grid.eot
2 ui-grid.svg
3 ui-grid.ttf
4 ui-grid.woff
I had the same issue, now it is rectified as follows
I updated the Ui-grid with either latest stable version(v3.0.0-rc.3) or the unstable version(v3.0.0-rc.16).
then
place the font files all in the same directory as your ui-grid.css lives, like this
app
- lib
- ui-grid.js
- ui-grid.css
- ui-grid.eot
- ui-grid.svg
- ui-grid.ttf
- ui-grid.woff
or
you can open the CSS and change the file path to the relative location in #font-face url's
check here
http://ui-grid.info/docs/#/tutorial/116_fonts_and_installation
I'm using Grunt I had to add
copy: {
dist: {
files: [
...
//font di ui grid
{
expand: true,
flatten: true,
dest: 'dist/styles/',
src: ['bower_components/angular-ui-grid/ui-grid.ttf',
'bower_components/angular-ui-grid/ui-grid.woff',
'bower_components/angular-ui-grid/ui-grid.eot',
'bower_components/angular-ui-grid/ui-grid.svg'
]
}
]},
to the Gruntfile.js In order to copy the ui-grid fonts in the style directory.
With Gulp you can add this task into build.js file
gulp.task('copyfonts', function() {
gulp.src('./bower_components/angular-ui-grid/**/*.{ttf,woff}')
.pipe(gulp.dest(path.join(conf.paths.dist, '/styles/')));
});
I'm using Gulp and I added a fonts:dev task to be added as a dep to my serve task:
gulp.task('fonts:dev', function () {
return gulp.src($.mainBowerFiles())
.pipe($.filter('**/*.{eot,svg,ttf,woff,woff2}'))
.pipe($.flatten())
.pipe(gulp.dest(options.tmp + '/serve/fonts/'));
});
This solved it for me. More context here.
I know it's a little bit late but I just want to share my answer. I use bower to install ui-grid and gruntjs to load files. Its almost the same with Panciz answer but change it to *.{ttf,woff,eot,svg} for getting all font files needed without specifying them.
add this in copy:
copy: {
dist: {
files: [
//other files here
, {
expand: true,
flatten: true,
cwd: '<%= yeoman.client %>',
dest: '<%= yeoman.dist %>/public/app', //change destination base to your file structure
src: [
'*.{ttf,woff,eot,svg}',
'bower_components/angular-ui-grid/*',
]
}
]
}
}
If you install ui grid using 'bower install' than the files should be installed in their proper location. The problem we had is that we're using ui-router, which requires all requests to be rewritten to index.html. We had to add the font extensions to our rewrite rules so that Angular could load them. We're using a middleware plugin for running locally. On Apache/Nginx server the concept is the same.
middleware: function (connect) {
return [
modRewrite(['!\\.html|\\.js|\\.svg|\\.woff|\\.ttf|\\.eot|\\.css|\\.png$ /index.html [L]']),
connect.static('.tmp'),
connect().use(
'/bower_components',
connect.static('./bower_components')
),
connect().use(
'/app/styles',
connect.static('./app/styles')
),
connect.static(appConfig.app)
];
}
In my project i usually use grunt to put fonts files in build/assets directory and vendors files in build/vendor/lib-name directory.
But ui-grid.css have relative path to get font file and doesn't have any mode to configure a different location without modify your css file. But i think that it's not a good idea because then you need to change this file for each vendor update.
So you can setup your grunt to put this particular font with your vendor files too.
This is your build.config.js:
module.exports = {
...
vendor_files: {
...
js: [
'vendor/angular/bundle.min.js',
'vendor/angular-ui-grid/ui-grid.min.js',
],
css: [
'vendor/angular-ui-grid/ui-grid.min.css',
],
uigrid_fonts: [
'vendor/angular-ui-grid/ui-grid.woff',
'vendor/angular-ui-grid/ui-grid.ttf',
'vendor/angular-ui-grid/ui-grid.eot',
'vendor/angular-ui-grid/ui-grid.svg',
],
...
}
...
}
Then on your Gruntfile.js you can manage this file:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-copy');
//.. other require
var userConfig = require('./build.config.js');
var taskConfig = {
copy: {
//.. other copy task
build_vendor_fonts: {
files: [
{
src: [ '<%= vendor_files.fonts %>' ],
dest: '<%= build_dir %>/assets/fonts/',
cwd: '.',
expand: true,
flatten: true
}
]
},
build_uigrid_font: {
files: [
{
src: [ '<%= vendor_files.uigrid_fonts %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true,
}
]
},
build_vendor_css: {
files: [
{
src: [ '<%= vendor_files.css %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true
}
]
},
build_appjs: {
files: [
{
src: [ '<%= app_files.js %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true
}
]
},
build_vendorjs: {
files: [
{
src: [ '<%= vendor_files.js %>' ],
dest: '<%= build_dir %>/',
cwd: '.',
expand: true
}
]
}
},
};
grunt.registerTask('build', [
'clean',
'concat:build_css',
'copy:build_vendor_fonts',
'copy:build_uigrid_font',
'copy:build_vendor_css',
'copy:build_appjs',
'copy:build_vendorjs',
'index:build'
]);
//..
}
Pretty much the same answer as Panciz and Vicruz, but I specified the relevant directories slightly differently:
copy: {
dist: {
files: [{
// other files here...
}, {
expand : true,
cwd : 'bower_components/angular-ui-grid',
dest : '<%= yeoman.dist %>/styles',
src : ['*.eot','*.svg','*.ttf','*.woff']
}]
},
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.