i'm trying to learn Grunt and i create a file, cd to there, and use the grunt command, but doesn't execute my file, but executes other that belongs to a personal project made with yeoman, and no matter the place in the terminal, always run that project. I use:
$ grunt --base "/Users/user/Documents/Ejercicios angular/Ui-routes-tutorial/"
and it shows me:
Warning: Task "newer:jshint" not found. Use --force to continue.
Aborted due to warnings.
Execution Time (2014-04-18 13:41:21 UTC)
loading tasks 3ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 60%
default 2ms ▇▇▇▇▇▇▇▇▇▇▇▇▇▇ 40%
Total 5ms
Here is my file:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
// Default task(s).
grunt.registerTask('default', ['uglify']);
};
The error shows Task "newer:jshint" not found, but in my file i don't use that! Can you help me please?
Have you tried CD to the directory of the project, then do a npm install to ensure all the modules defined in the package file are installed, and then run your grunt command?
Related
I'm currently learning how to use PostCSS with Grunt in one of my classes. Asked my professor if they could help me, they said the Gruntfile.js looked fine, but maybe the issue was my file name being lowercase. I changed it to Gruntfile.js and am receiving the same error. It is automatically supposed to create the custom.min.css, but due to the error (located below), it does not. I contacted my professor, but it seems that we've hit a dead-end.
Every time I create the JS file for Grunt, save it in the correct folder, and I run grunt in my Command Prompt, I receive the following error:
C:\Users\name\Desktop\grunt-boilerplate>
Loading "Gruntfile.js" tasks...ERROR
SyntaxError: Invalid or unexpected token
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
My JS coding looks like this:
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
postcss: {
options: {
processors: [
require('pixrem')(), // add fallbacks for rem units
require('autoprefixer')({
browsers: 'last 2 versions'
}), // add vendor prefixes
require('cssnano')() // minify the result
]
},
dist: {
src: 'css/custom.css',
dest: 'css/custom.min.css',
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-postcss');
// Default task(s).
grunt.registerTask('default', ['postcss']);
};
What am I doing wrong?
Error loading "Gruntfile.js" tasks
As for the error in the terminal, it seems like you're missing this line at the start of the file:
module.exports = function (grunt) {
See: https://gruntjs.com/getting-started#an-example-gruntfile
Now about the first problem.
Packages
First of all, check the correct installation of all your node modules.
Open your terminal
cd to your project root, where the package.json is located
Do npm install
Do npm install autoprefixer grunt grunt-postcss pixrem cssnano --save-dev
Autoprefixer usage
You are probably using the autoprefixer plugin in a wrong way: you need to move the browsers option into your package.json file:
Gruntfile.js
...
processors: [
require('pixrem')(),
// No autoprefixer 'browsers' option
require('autoprefixer')(),
require('cssnano')()
]
...
package.json
{
...
// 'browserslist' option at the end of the file just above the last curly brace
'browserslist': [
'last 4 versions',
'> 0.5%'
]
}
See: https://github.com/browserslist/browserslist#browserslist-
Changing dist property
You could try changing your dist syntax using files property:
...
dist: {
// src: 'css/custom.css',
// dest: 'css/custom.min.css',
files: {
'css/custom.min.css': 'css/custom.css'
}
}
...
Summary
The whole Gruntfile.js should look something like that:
module.exports = function (grunt) {
grunt.initConfig({
// This is probably a leftover from the example Gruntfile.js
// pkg: grunt.file.readJSON('package.json'),
postcss: {
options: {
processors: [
require('pixrem')(),
// No autoprefixer 'browsers' option
require('autoprefixer')(),
require('cssnano')()
]
},
dist: {
// src: 'css/custom.css',
// dest: 'css/custom.min.css',
files: {
'css/custom.min.css': 'css/custom.css'
}
}
}
});
grunt.loadNpmTasks('grunt-postcss');
grunt.registerTask('default', ['postcss']);
};
This is my first time trying to set up Grunt. I'm seeing that only one out of two defined tasks is running at a time. If I switch the default task from 'watch' to 'sass', only the sass task will run (and vice versa). So that makes me think the code for both tasks is correct, but maybe some other configuration setting or registerTask type function is needed.
Is there anything wrong with my Gruntfile.js that would cause this issue?
Gruntfile.JS
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// --- SASS
sass:{
dist:{
options:{
style:'expanded',
sourcemap:'none',
},
files:{
'style.css':'SCSS/style.scss'
}
}
},
// --- WATCH
watch:{
css:{
files: '**/*.scss',
}
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// grunt.registerTask('default',['sass']);
grunt.registerTask('default',['watch']);
}
watch: {
css: {
files: '**/*.scss',
tasks: ['sass'],
},
},
That's it, just add the sass task to watch and whenever the files change, the task will be run.
Alternatively, don't register watch as a task at all! You can set sass as the default grunt task, and simply type grunt watch to kick off the watch task.
Now if you're using something like the Nuget package in VS I understand registering watch, but if that's the case I suggest trying out Powershell, at least for the ease of installing new packages, node modules, getting a debug message for JS errors, etc.
I'm completely new at Grunt, Bower etc. and have spent the evening playing around with a basic Gruntfile.js that contains the following:
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
jshint: {
all: ['Gruntfile.js']
},
bower_concat: {
all: {
dest: 'assets/libs/<% pkg.name %>-bower.js',
mainFiles: {
'flux': ['dist/Flux.js']
}
}
}
});
require('load-grunt-tasks')(grunt);
grunt.registerTask('default', ['jshint', 'bower_concat']);
};
However, when I run grunt bower_concat I get
Running "bower_concat:all" (bower_concat) task
Done, without errors.
but no JavaScript file is outputted in the destination folder (and I've tried running jshint, which does not complain).
I've tried lots of things, from e.g. removing mainFiles to including bowerOptions: { relative: false }.
The structure of my project is
Web
assets
libs
bower_components
flux
node_modules
grunt
grunt-bower_concat
grunt-contrib-jshint
load-grunt-tasks
In the Web folder, I have bower.json, Gruntfile.js and package.json and it's from this folder that I run the command grunt bower_concat.
Does anyone have any idea what I'm doing wrong?
I have a less compile grunt task where relative path to less files from grunt installed folder is raw/less/source_map/
here is the grunt file.
Gruntfile: (EDIT: changed to #Yogesh Khatri's code still same issue)
module.exports = function(grunt) {
grunt.initConfig({
less: {
files: { "raw/less/source_map/style.css" : "raw/less/source_map/style.less" }
},
watch: {
js: {
files: ['raw/less/source_map/style.less'],
tasks: ['default'],
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less']);
};
on running it the command line displays
^CMacPro:grunt sagiavinashvarma$ grunt watch
Running "watch" task
Waiting...
>> File "raw/less/source_map/style.less" changed.
Running "less:files" (less) task
Done, without errors.
Completed in 1.862s at Tue Dec 09 2014 15:03:37 GMT+0530 (IST) - Waiting...
but there is no style.css output. I have written the simplest grunt task without any options.
can anyone point out whats wrong with this.
Edit:
I got the problem. It isn't working because less task need a specific target to work.
Try to change the code like this
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
files: { "raw/less/source_map/style.css" : "raw/less/source_map/style.less" }
}
},
watch: {
js: {
files: ['raw/less/source_map/style.less'],
tasks: ['default'],
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['less']);
};
I got the error by running grunt --verbose which shows lot more information about the tasks. It gave me the output like
Verifying property less.files exists in config...OK
File: [no files]
Options: report="min", banner=""
>> Destination not written because no source files were provided.
of which searching led me to this :- grunt-contrib-less cannot find source files even though path is correct
I want to use watch mode in my development environment. It works fine with single less file. But I have so many less files which are imported to app.less. My app.less looks
#import "variables";
#import "mixins";
It seems I can not use watch mode in this setting. Is there any other ways?
Upd. This syntax is for old grunt versions so it should not be used.
You need to use LiveReload app for this. Or maybe another software that can reload page with LiveReload browser extension (maybe Sublime Text editor with a plugin).
Possible setup is Node.js with Grunt which has grunt-contrib-less and grunt-reload modules installed.
Your grunt.js config should look like this:
module.exports = function(grunt) {
grunt.initConfig({
// Start LiveReload server
reload: {
port: 35729,
liveReload: {}
},
// Simple css compilation
less: {
src: 'less/app.less',
dest: 'css/app.css'
},
// Reload files on change
watch: {
less: {
files: ['less/*.less'],
tasks: 'less'
},
reload: {
files: ['*.html',
'css/app.css',
'js/*.js'],
tasks: 'reload'
}
}
});
// Third party modules
grunt.loadNpmTasks('grunt-reload');
grunt.loadNpmTasks('grunt-contrib-less');
// Register default task
grunt.registerTask('default', 'less');
};
Then you need to run
$ grunt watch:less
and
$ grunt watch:reload
in two separate terminal windows.
I'm totally agree with this comment
Refresh less css which has other imported less files without page load .
Thanks, thevasya.
But there's no need to start several terminals.
watch: {
less: {
files: ['less/*.less'],
tasks: 'less'
},
reload: {
files: ['*.html',
'css/app.css',
'js/*.js'],
tasks: 'reload'
}
}
after that you can start watching by
$ grunt watch
and that's it. If you change any less file, it will start only less task.
P.S.: This answer was updated for proper work with grunt 0.4.