Develop Reference

Error when typing cmd grunt jshint.

I am currently going to the Learn how to Program with Steve Foote. I am using ubuntu as the operating system.I have installed Node.js, installed the grunt command-line, and installed the npm install to the correct folder.
I noticed a problem that when I ran node on the specified folder it wouldn't run the js files I have. I even went to the folder with the js files and it didn't work. I then tried node values.js but nothing came up.
This is my code for the package.json file:
{
"name": "kittenbook",
"version": "0.0.1",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-copy": "~0.5.0",
"grunt-contrib-jshint": "~0.6.3"
}
}
And this is the Gruntfile.js
module.exports = function(grunt) {
//Project Configuiration
grunt.initConfig({
/*
* We will configuire our tasks here
*/
concat: {
release: {
src:['js/values.js', 'js/prompt.js'],
dest: 'release/main.js'
}
},
copy: {
release{
src: 'manifest.json',
dest: 'release/manifest.json'
}
},
jshint: {
files: ['js/values.js', 'js/prompt.js']
}
});
//We will load our plugins here
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-jshint');
//We will register our tasks here
grunt.registerTask('default', ['jshint', 'concat', 'copy']);
};
Sorry if the formatting is bad here it genuinely is all lined up on the text file.
When I type grunt jshint a warning comes up saying:
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected token {
Warning: Task "jshint" not found. Use --force to continue.
Aborted due to warnings.

You are missing a colon (:) in your grunt.initConfig object.
copy: {
release{ /*<--Missing colon in between "release" and the opening bracket {*/
src: 'manifest.json',
dest: 'release/manifest.json'
}
},

How to fail Grunt build if JSHint fails during watch task?

This seems like a basic question but I can't figure out how to do it. This is how to do it in gulp.
I want when I save a file with a jshint error to fail the Grunt build. The output states that jshint failed but Grunt still completes successfully.
grunt.initConfig({
watch: {
js: {
files: ['/scripts/{,**}/*.js'],
tasks: ['newer:jshint:all']
}
}
})
I know there is grunt.fail but how would I use it here?

The following gist will report a jshint error via the CLI and fail to execute any subsequent build steps when saving the .js file.
You will need to adapt according to your requirements :
Directory structure:
project
│
├──package.json
│
├───scripts
│ │
│ └───test.js
│
├─── Gruntfile.js
│
└───node_modules
│
└─── ...
package.json
{
"name": "stack40031078",
"version": "0.0.1",
"description": "Answer to stack question 40031078",
"author": "RobC",
"license": "Apache-2.0",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-watch": "^1.0.0",
"grunt-newer": "^1.2.0"
}
}
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// VALIDATE JS
jshint: {
// Note we're using 'src:' instead of 'all:' below.
files: {
src: './scripts/{,**}/*.js'
},
options: {
// Use your jshint config here or define them in
// a separate .jshintrc file and set the flag to:
//
// jshintrc: true
curly: true,
eqeqeq: true,
immed: true,
latedef: true,
newcap: true,
noarg: true,
sub: true,
undef: true,
boss: true,
eqnull: true,
browser: true,
smarttabs: true,
globals: {}
}
},
// WATCH THE JS FILES
watch: {
js: {
files: ['./scripts/{,**}/*.js'],
// NOTE: we're not using 'newer:jshint:all' below, just 'newer:jshint'
tasks: ['newer:jshint' /* <-- Add subsequent build tasks here. E.g. ,'concat' - A registered task can also be added. E.g. 'default' */]
}
}
});
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-newer');
grunt.registerTask('default', [
]);
};
test.js
console.log('Hello World');
var test = function() {
return 'test';
};
Testing the demo gist
cd to the project directory
run $ npm install
run $ grunt watch
Open and make a simple edit to test.js, (e.g. add a new line to the end of the file), and save the change.
The CLI reports the error as follows:
Running "jshint:files" (jshint) task
./scripts/test.js
1 |console.log('Hello Universe');
^ 'console' is not defined.
>> 1 error in 1 file
Warning: Task "jshint:files" failed. Use --force to continue.
Aborted due to warnings.
Completed in 0.965s at Fri Oct 14 2016 10:22:59 GMT+0100 (BST) - Waiting...
NOTE:
Any subsequent build tasks specified in the tasks array of the watch.js object, (e.g. concat as per commented in the Gruntfile.js), will not be invoked using this gist as the jshint task fails (... and the concat task has not been defined of course!).
However, when the JavaScript file/s successfully pass the jshint task, any subsequent build tasks that are defined in the tasks array of the watch.js object will be invoked.
I hope this helps!

Grunt + Babel successfully runs but doesn't do anything

I'm rather new to grunt/npm but after reading up the docs. I have made myself a package.json and a Gruntfile.js. Here's my folder structure:
/
|- src
|- myfile.es6
|- anotherfile.es6
|- etc.
|- Gruntfile.js
|- package.json
What I have
Here's my Gruntfile:
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.initConfig({
babel: {
options: {
sourceMap: true,
plugins: ['es2015']
},
dist: {
files: [{
expand: true,
cwd: 'src/',
src: ['*.es6'],
dest: 'dist/',
ext: '.js'
}]
}
}
});
grunt.registerTask('default', ['babel'])
};
And then here's my package.json:
{
"name": "Cheddar",
"version": "0.2.0",
"devDependencies": {
"babel-preset-es2015": "^6.6.0",
"grunt": "^1.0.1",
"grunt-babel": "^6.0.0"
},
"scripts": {
"test": "grunt --verbose"
}
}
What does it do?
I have my src/ folder which contains my source files (*.es6). I want to transpile these to a dist/ directory with grunt.
What I've tried
Then I installed all the dependencies / babel-cli / grunt-cli/ etc. with npm install and npm-update --save
Seems good, so I went ahead and ran grunt:
$ grunt
Running "babel:dist" (babel) task
Done.
$ ls
Gruntfile.js node_modules/ package.json src/
The ls is outputting the exact same thing as before I ran grunt. So nothing is appearing to happen. Where's my output dist? This has been bugging me for the past few hours. I've tried installing babelify, and quite a few other fixes from blogs across the internet but alas, nothing works.

Try using the keyword "presets" instead of "plugins":
babel: {
options: {
sourceMap: true,
presets: ['es2015']
}
...
}
When I use your configuration, grunt seems to error out because it can't find the plugin called "es2015". Everything worked after I made that change.

Try a more literal example from the README like:
grunt.initConfig({
babel: {
options: {
sourceMap: true,
presets: ['es2015']
},
dist: {
files: {
'dist/myfile.js': 'src/myfile.es6'
}
}
} });
After you get that working try specifying *.es6 etc. under files. If you look at the source for the grunt-babel plugin it may be more limited than one would assume.
You can also just use npm scripts and specify the babel command line directly which I feel is simpler than using grunt.

new to grunt - warning: task "concat, uglify" not found

As the title says I'm new to Grunt. I am following a tutorial located at: http://24ways.org/2013/grunt-is-not-weird-and-hard/. It is an older tutorial but most seems to work the same. I have installed "grunt-contrib-concat" and "grunt-contrib-uglify" and can run both individually. But when I run grunt, I get the following error: Warning: Task "concat, uglify" not found. Use --force to continue. Aborted due to errors. I've been looking around and can't seem to figure it out. My files are as follows:
Gruntfile.js:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
dist: {
src: [
'js/libs/*.js', // All JS in the libs folder
'js/controls.js', // This specific file
],
dest: 'dist/built.js',
}
},
uglify: {
build: {
src: 'js/build/production.js',
dest: 'js/build/production.min.js',
}
},
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
// 4. Where we tell Grunt what to do when we type 'grunt' into the terminal.
grunt.registerTask('default', ['concat, uglify']);
};
package.json:
{
"name": "grunt_libsass_example-project",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-concat": "^0.5.1",
"grunt-contrib-uglify": "^0.9.1"
}
}

Your passing in only one string for the registerTask task list. It should be a array with a list of strings like:
grunt.registerTask('default', ['concat', 'uglify']);
You're getting that error because it's looking for a task named 'concat, uglify'.

I had to run:
npm install grunt-contrib-uglify --save-dev

grunt watch executes tasks multiple times

I've the following Grunfile.js File:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/build/style.css': 'css/style.scss'
}
}
},
watch: {
stylesheets: {
files: ['css/*.scss'],
tasks: ['newer:sass']
}
}
});
// Load the plugin that compiles sass
grunt.loadNpmTasks('grunt-contrib-sass');
// watch for, and run grunt if files change
grunt.loadNpmTasks('grunt-contrib-watch');
// Plugin for Grunt tasks to run with newer files only.
grunt.loadNpmTasks('grunt-newer');
// Grunt Tasks:
grunt.registerTask('default', ['newer:sass']);
};
After running grunt watch and saving my scss File, the console output is the following:
Running "watch" task
Waiting...
>> File "css\style.scss" changed.
Running "newer:sass" (newer) task
Running "newer:sass:dist" (newer) task
Running "sass:dist" (sass) task
File css/build/style.css created.
Running "newer-postrun:sass:dist:1:D:\xampp\htdocs\grunt-test\node_modules\grunt-newer\.cache" (newer-postrun) task
Done, without errors.
The problem is, the .scss file is compiled every time. Even if there was no change.
I don't understand why grunt is running 3 tasks (newer:sass, newer:sass:dist, sass:dist), instead of only running the task defined under watch (newer:sass).
Hope someone has an idea to fix this. :)

I'm not positive this is the problem, but try specifying that you don't want to run all of sass, just sass:dist. So try: grunt.registerTask('default', ['newer:sass:dist']);