I'm also going through Steven Foote's book Learning to Program and am currently on chapter 4, which uses Grunt. This post has a similar problem, but the problem is different (this person capitalized the "f" in Gruntfile.js).
I've seemed to have installed NPM and Node properly
npm#5.10.0 /usr/local/lib/node_modules/npm
andrews-macbook-air:Kittenbook Andrew$ node -v
v8.11.3
Here is my Gruntfile.js:
module.exports = function(grunt){
grunt.initConfig({
concat: {
release: {
src: ['js/values.js', 'js/prompt.js'],
dest: 'release/main.js'
}
},
copy: {
release: {
src: 'manifest.json',
dest: 'release/main.js'
}
},
jshint: {
files: ['js/values.js', 'js/prompt.js']
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTasks('default', ['jshint', 'concat' 'copy']);
In checking to see if I did it correctly I run grunt jshint in the command line, but I get back an error
andrews-macbook-air:Kittenbook Andrew$ grunt jshint
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected string
Warning: Task "jshint" not found. Use --force to continue.
Aborted due to warnings.
Any ideas on what is going on?
Related
I have this gruntfile.js fragment
grunt.initConfig({
browserify: {
browser: {
src: [ require('./package.json').main ],
dest: './browser/shortid.js'
},
How would I perform exactly the same thing by calling browserify directly (without grunt) from bash command line? From what directory should I execute browserify?
The following command is equivalent and it would need to be executed in the same directory as your package.json:
browserify . > ./browser/shortid.js
I'm trying to use grunt in my ASP project, but for whatever reasons have get a stupid warning-message from Visual Studio.
How you can see down, the bower-task has been executed, but haven't uglify- and less-tasks. Gruntfile.js and folder "wwwroot" are in the same folder. What's wrong ?
This is console output in Visual Studio 2015:
> cmd.exe /c grunt -b "c:\T\BW\src\BW" --gruntfile "c:\T\BW\src\BW\gruntfile.js" bower
Running "bower:install" (bower) task
>> Installed bower packages
>> Copied packages to c:\T\BW\src\BW\wwwroot\lib
Done, without errors.
Process terminated with code 0.
> cmd.exe /c grunt -b "c:\T\BW\src\BW" --gruntfile "c:\T\BW\src\BW\gruntfile.js" uglify_default
Running "uglify:uglify_target" (uglify) task
Process terminated with code 0.
>> Destination wwwroot/lib/angular/angular.js not written because src files were empty.
>> No files created.
Done, without errors.
> cmd.exe /c grunt -b "c:\T\BW\src\BW" --gruntfile "c:\T\BW\src\BW\gruntfile.js" less
Running "less:dev" (less) task
>> Destination wwwroot/css/site.css not written because no source files were found.
Done, without errors.
Process terminated with code 0.
This is my gruntfile.js:
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: false
}
}
},
uglify: {
uglify_target: {
files: {
"wwwroot/lib/angular/angular.js":["src/angular.min.js"]
}
}
},
less: {
dev: {
files: {
"wwwroot/css/site.css": ["less/site.less"]
},
options: {
sourceMap: true,
}
}
},
});
grunt.registerTask("default", ["bower:install"]);
grunt.loadNpmTasks("grunt-bower-task");
grunt.loadNpmTasks("grunt-contrib-uglify");
grunt.loadNpmTasks("grunt-contrib-less");
Are you sure "wwwroot/lib/angular/angular.js":["src/angular.min.js"] is correct in your uglify step? Uglify is for minifying files, so it would seem as if you have the destination and source parameters reversed. You are also getting the message Destination wwwroot/lib/angular/angular.js not written because src files were empty. which would seem to indicate that as well.
The less step seems correct, but it can't find the less file you are trying to compile. Are you sure that site.less exists in a less folder?
Here is the less portion of the grunt file I just wrote, and it seems to work well, although getting the sourcemap to actually generate is still an issue. This is pretty much an exact equivalent of VS 2013 with Web Essentials installed. Compiling all less files in the content folder using autoprefix for the browsers we support, and puts the .css back into the content folder. It doesn't compile any less file that starts with _, as those are just includes/variables.
less: {
development: {
options: {
paths: ["content"],
compress: true,
plugins: [
new (require('less-plugin-autoprefix'))({ browsers: ["IE >= 9, firefox > 10, last 2 Chrome versions, last 2 safari versions, last 2 ios versions"], map: { inline: false } })
]
},
files: [{
expand: true,
cwd: 'content',
src: ['*.less', '!_*.less'],
dest: 'content',
ext: '.css'
}]
}
},
I use grunt-contrib-concat, but it doesn't appear to work.
All file are in the folder.
I used --verbose to see the details, but everything seems to be working correctly.
concat: {
options: {
// define a string to put between each file in the concatenated output
separator: ';'
},
dist: {
// the files to concatenate
src: [
//'assets/javascript/components/*.js',
'assets/javascript/components/jquery-ui-1.10.3.custom.js',
'assets/javascript/components/spectrum.js',
'assets/javascript/components/prefixfree.min.js',
'assets/javascript/src/jquery.menu_css3.js'
],
// the location of the resulting JS file
dest: 'assets/javascript/jquery.<%= pkg.name %>.min.js'
}
},
Running the tasks with --verbose:
Running "concat" task
Running "concat:dist" (concat) task
Verifying property concat.dist exists in config...OK
Files: assets/javascript/src/jquery.menu_css3.js -> assets/javascript/jquery.menu_css3.min.js
Options: separator=";", banner="", footer="", stripBanners=false, process=false
Reading assets/javascript/src/jquery.menu_css3.js...OK
Writing assets/javascript/jquery.menu_css3.min.js...OK
File "assets/javascript/jquery.menu_css3.min.js" created.
Running "uglify" task
Running "uglify:dist" (uglify) task
Verifying property uglify.dist exists in config...OK
Files: assets/javascript/jquery.menu_css3.min.js -> assets/javascript/jquery.menu_css3.min.js
Options: banner="", footer="", compress={"warnings":false}, mangle={}, beautify=false, report=false
Minifying with UglifyJS...Reading assets/javascript/jquery.menu_css3.min.js...OK
OK
Writing assets/javascript/jquery.menu_css3.min.js...OK
File "assets/javascript/jquery.menu_css3.min.js" created.
I'm currently getting the same error for all tasks that I run via grunt.
Initializing
Command-line options: --verbose
Reading "Gruntfile.js" Gruntfile...OK
Registering Gruntfile tasks.
Reading package.json...OK
Parsing package.json...OK
Initializing config...OK
Loading "Gruntfile.js" tasks...OK
+ build,default,nick,server,test
No tasks specified, running default tasks.
Running tasks: default
Running "default" task
Warning: Task "undefined" not found. Use --force to continue.
The last warning happens for any task I run.
Grunfile.js(important stuff):
...
grunt.initConfig({
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'Gruntfile.js',
'<%= yeoman.app %>/scripts/{,*/}*.js',
'!<%= yeoman.app %>/scripts/libs/{,*/}*.js'
]
},
...
});
...
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('nick', [ ]);
grunt.registerTask('default', [
'jshint'
]);
running jshint by itself works fine..
grunt jshint
>Running "jshint:all" (jshint) task
>> 52 files lint free.
>>
>>Done, without errors.
Done, without errors.
Any help? Let me know if there is any other info you need to help.
Nick.
Another potential cause of this problem is having double commas in a Gruntfile.js's registerTask section. For instance:
grunt.registerTask('dist', ['clean',, 'uglify:dist']);
Note that this will also produce the same error:
grunt.registerTask('dist', ['clean', /*unnecessarytask */, 'uglify:dist']);
I had the same issue and all I needed to do was update grunt with:
npm --global update grunt-cli
I'm trying to use livereload with watch. I keep getting the message "Fatal error: Port 35279 is already in use by another process" . I've changed the port for livereload but then nothing reloads.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dist: {
options: {
cssDir: 'stylesheets',
sassDir: 'stylesheets/sass/',
imagesDir: 'images',
javascriptsDir: 'scripts',
require: ['sass-globbing','modular-scale'],
force: true
}
}
},
cssmin: {
minify: {
expand: true,
cwd: 'stylesheets',
src: ['*.css', '!*.min.css'],
dest: 'stylesheets',
ext: '.min.css'
}
},
watch: {
options: {
livereload: true
},
sass: {
files: 'stylesheets/sass/*.scss',
tasks: ['compass']
},
css: {
files: 'stylesheets/*.css',
tasks: ['cssmin']
},
html: {
files: ['index.html','**/*.css']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default',['compass','watch']);
}
Add
<script src="//localhost:1337/livereload.js"></script>
to the page you want livereload on. 1337 being the port you set it to in the grunt file.
options: {
livereload: 1337
},
You can manually shutdown the livereload server in a bash/terminal window like so:
curl localhost:35279/kill
More info here: https://github.com/mklabs/tiny-lr
Are you using the Sublime Text and the LiveReload package? It's been known to cause this issue. If so, disable or uninstall the package in Sublime Text.
I use grunt on a vagrant VM so i need grunt to run on port 80, first i'll stop apache and start grunt serve and it works just fine.
Sometimes, however, grunt for some reason won't release the port after being stopped. For example: i usually stop grunt to edit the Gruntfile.js and start it again, but sometimes it won't start and will complain about someone using the por 80.
The only solution that has worked for me is to restart your shell session and try again.
I use ZSH and i noticed that after grunt breaks if i try to exit the shell ZSH complains about 'pending jobs', but if i exit anyways and restart the session and try grunt serve again it will work.
If you want to terminate the process using the port, you can do the following:
$ lsof -n -i4TCP:35729
COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME
node 15723 testuser 24u IPv6 0x71823b3990749ea5 0t0 TCP *:35729 (LISTEN)
Now you have the PID of the process that's listening on the port you're trying to access, so you can kill this with
$ kill -9 15723
and now running grunt should work just fine :)