I'm a newbie in Angular and I've cloned a repo (angular-slider). My problem is that when I type in console grunt serve it says Warning: Task "serve" not found. Use --force to continue. I've been searching through Internet and I've tried everything. I don't know which is the origin of my problem. If I type node -v the console gives me this v0.10.33 and if I type npm -v I get this 2.11.2 I already have a Gruntfile.js and a package.json and bower.json at the same level folder that my root project directory. Any help would be appreciated.
Edited:
This is my Gruntfile.js
module.exports = function(grunt){
'use strict';
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
srcFiles: [
'src/rangeInputSupported.js',
'src/angular-slider.js'
],
concat: {
prod: {
src: ['<%= srcFiles %>'],
dest: 'build/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*\n <%= pkg.name %> v<%= pkg.version %> \n (c) 2013-2014 Venturocket, Inc. http://github.com/Venturocket \n License: MIT \n*/\n'
},
build: {
src: ['<%= srcFiles %>'],
dest: 'build/<%= pkg.name %>.min.js'
}
},
jshint: {
options: {
jshintrc: true,
reporter: require('jshint-stylish')
},
all: {
src: [
'Gruntfile.js',
'karma.conf.js',
'src/**/*.js',
'test/**/*.js'
],
options: {
force: true
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
// Default task(s).
grunt.registerTask('default', ['jshint:all', 'uglify', 'concat:prod']);
grunt.loadNpmTasks('grunt-contrib-concat');
};
And my bower.json looks like this:
{
"name": "angular-slider",
"version": "0.3.2",
"main": "./build/angular-slider.js",
"ignore": [
"**/.*",
"node_modules",
"components",
"lib",
"src",
"test",
".g*",
".editorconfig",
".jshintrc",
".travis.yml",
"Gruntfile.js",
"karma.conf.js",
"*.html"
],
"dependencies": {
"angular": "~1.2",
"angular-touch": "~1.2"
},
"devDependencies": {
"angular-mocks": "*",
"angular-scenario": "*"
},
"resolutions": {
"angular": "v1.2.16"
}
}
This usually appears if you don't have grunt installed. Also you should install bower if you don't have it.
Try to install grunt like so : npm install -g grunt-cli . Also you should run in you're project file npm install && bower install to download all the dependencies that you need in you're project. I hope it helped.
Make sure that you have 'serve' registeredTask in your gruntFile.js .
If it is there then probably grunt is not installed on your system. Install grunt-cli from npm and also the bower on your system. So that you have node_modules in your folder structure.
Use the following commands :
npm install -g grunt-cli
npm install --save
bower install --save
This should do the trick.
Just do
grunt
...on its own. This runs the 'default' task
We can see toward the bottom of your GruntFile.js that you have a definition of the 'default' task
grunt.registerTask('default', ['jshint:all', 'uglify', 'concat:prod']);
...which I think will be the one to start up the server
I had thought that "serve" was a standard task name (also with alias "server") but I'm seeing gruntfiles where these are not defined, and where the "default" (just the grunt command on its own) starts the server. Maybe this is a standard thing with Angular(?)
Related
I am using angular js (1.6),I have following task in grunt for minification angular modules
ngAnnotate: {
dist: {
files: [{
expand: true,
cwd: '.tmp/concat/scripts',
src: '*.js',
dest: '.tmp/concat/scripts'
}]
}
}
But above task not support ES2015 and ES2016 features
How to add babel-plugin-angularjs-annotate in grunt task in i.e.grunt file
Firstly, install the plugin:
npm install babel-plugin-angularjs-annotate --save-dev
then there are two ways:
follow the readme, add the plugin into .babelrc file:
{
"plugins": ["angularjs-annotate"]
}
in grunt.initConfig, set this plugin at babel part, like:
babel: {
options: {
sourceMap: true,
presets: [#babel/preset-env],
plugins: ['angularjs-annotate']
},
files: {
expand: true,
...
}
}
any of them work.
my environment:
grunt-cli v1.3.2
grunt v1.0.3
Below is my Gruntfile.js
grunt.initConfig({
useminPrepare: {
html: 'Menu.htm',
options: {
dest: 'build'
}
},
usemin: {
html: ['build/Menu.html']
},
copy: {
generated: {
src: 'Menu.htm',
dest: 'build/Menu.html'
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-usemin');
grunt.registerTask('build', [
'copy:generated',
'useminPrepare',
'concat',
'cssmin',
'uglify',
'usemin'
]);
if I run the above code I get error saying no "concat" tasks found. Either I have to remove it from registerTask or I have to add task in config. But as per tutorials I browsed if they add usemin then concat uglify cssmin will be automatically added when I run grunt. Why am I not getting it automatically? Why do I have to add all these task again separately?
According to readme, you need to install it first.
To install these plugins, run:
$ npm install grunt-contrib-concat grunt-contrib-uglify grunt-contrib-cssmin grunt-filerev --save-dev
I encourage you to check the repo and also issue number 313
I'm using wiredep to automatically include ckeditor and ng-file-upload to my index template and karma.conf.js.
My project is bootstrapped by jhipster.
For ckeditor package, I have to include two files, ckeditor.js and ckeditor-angularjs.js, but wiredep won't copy these files... (i don't have these files into my index.html and my karma.conf.js).
in my bower.json, i have this declaration (after doing bower install ckeditor-angularjs --save):
"dependencies": {
"ckeditor-angularjs": "*"
}
My Gruntfile.js :
wiredep: {
app: {
src: ['src/main/webapp/index.html'],
exclude: [
/angular-i18n/ // localizations are loaded dynamically
]
},
test: {
src: 'src/test/javascript/karma.conf.js',
exclude: [/angular-i18n/, /angular-scenario/],
ignorePath: /\.\.\/\.\.\//, // remove ../../ from paths of injected javascripts
devDependencies: true,
fileTypes: {
js: {
block: /(([\s\t]*)\/\/\s*bower:*(\S*))(\n|\r|.)*?(\/\/\s*endbower)/gi,
detect: {
js: /'(.*\.js)'/gi
},
replace: {
js: '\'{{filePath}}\','
}
}
}
}
}
i tested with overrides option in bower.json but it wont work... :
"overrides": {
"bootstrap": {
"main": [
"dist/js/bootstrap.js",
"dist/css/bootstrap.css",
"less/bootstrap.less"
]
},
"ckeditor-angularjs": {
"main": [
"./src/main/webapp/bower_components/ckeditor/ckeditor.js",
"build/ckeditor-angularjs.min.js"
]
},
"ng-file-upload": {
"main": "ng-file-upload-all.js"
}
}
when I do this : grunt wiredep, I have this error :
Warning: Maximum call stack size exceeded Use --force to continue. Aborted due to warnings.
with --force -v param :
Warning: Error: angular is not installed. Try running `bower install`. Used --force, continuing.
Done, but with warnings.
I don't think that angular package is the problem...
Do you know how can I solve this ?
Thanks.
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 a Angular project which is build with Yeoman and Grunt. Everytime if I run command:
sudo grunt serve
Is app normally launched but in index.html are deleted some linked libraries from bower_components directory.
FXP:
<script src="bower_components/spin.js/spin.js"></script>
So I must everytime revert changes in index.html file in git before I can continue in testing.
Is any possibility how can i solve this annoying problem?
Thanks for any help.
EDIT:
I tried following:
Installed:
npm install grunt-script-inject
GrunFile.js
// Automatically inject Bower components into the app
wiredep: {
app: {
src: ['<%= yeoman.app %>/index.html'],
ignorePath: new RegExp('^<%= yeoman.app %>/|../')
},
scriptinject: {
dev: {
srcs: ['<%= yeoman.client %>/bower_components/path/to/src/plugin.js',
'<%= yeoman.client %>/bower_components/path/to/src/plugin2.js'] ,//order is important if this sciprt will be concated and minified
html: '<%= yeoman.client %>/index.html', //file that as the block comment to look for a place to insert the script tags
without: '<%= yeoman.client %>/' //this script will be used to remove this block of string of script tag file location
}
}
},
And
grunt.registerTask('serve', 'Compile then start a connect web server', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'wiredep',
'scripinject',
'concurrent:server',
'autoprefixer',
'connect:livereload',
'watch'
]);
});
But now, after the grunt serve i see following error:
Running "serve" task
Warning: Task "scripinject" not found. Use --force to continue.
Aborted due to warnings.
What is wrong?
I resolved using the --s in bower install command
So:
bower install --save angular-translate
Works fine.
Here is documentation:
http://bower.io/docs/api/#install
I had a similar problem.
In index.html I added the following code:
<script src="bower_components/highcharts-release/highcharts.js"></script>
<script src="bower_components/highcharts-release/modules/heatmap.js"></script>
and every time I ran grunt serve or grunt build commands, grunt rewrote it to:
<script src="bower_components/highcharts-release/highcharts.js"></script>
<script src="bower_components/highcharts-release/highcharts-more.js"></script>
<script src="bower_components/highcharts-release/modules/exporting.js"></script>
So I looked into bower_components/highcharts-release/bower.json file and saw:
{
"name": "highcharts",
"version": "v4.1.4",
"main": [
"highcharts.js",
"highcharts-more.js",
"modules/exporting.js"
]
}
I changed it to:
{
"name": "highcharts",
"version": "v4.1.4",
"main": [
"highcharts.js",
"modules/heatmap.js"
]
}
and everything is fine now. Hope it will help someone, even this is a quite late answer.