Develop Reference

Most of Grunt tasks are not found

This is my first day with grunt and I'm trying to make it work using these tutorials
https://24ways.org/2013/grunt-is-not-weird-and-hard/
https://css-tricks.com/autoprefixer/
And my Gruntfile.js is this:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
scripts: {
files: ['scripts/app.js'],
tasks: ['uglify'],
options: {
spawn: false,
}//For some reason I had a come here. Don't know if it matters
},
css: {
files: ['content/app.scss'],
tasks: ['sass'],
options: {
spawn: false,
}
},
styles: {
files: ['content/app.css'],
tasks: ['autoprefixer']
}
},
uglify: {
build: {
src: "scripts/app.js",
dest: "scripts/app-final.js"
}
},
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'content/app.css': 'content/app.scss'
}
}
},
autoprefixer: {
dist: {
files: {
'content/app-prefixed.css': 'content/app.css'
}
}
},
imagemin: {
dynamic: {
files: [{
expand: true,
cwd: 'assets/img/',
src: ['**/*.{png,jpg,gif}'],
dest: 'assets/img/'
}]
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks(
'grunt-contrib-uglify',
'grunt-contrib-sass',
'grunt-autoprefixer',
'grunt-contrib-watch',
'grunt-contrib-imagemin'
);
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask(
'default', [
'watch',
'uglify',
'sass',
'autoprefixer',
'imagemin'
]);
};
But when I try grunt watch watch I get this:
# grunt watch
Warning: Task "watch" not found. Use --force to continue.
Aborted due to warnings.
To make things weirder grunt uglify is seen
# grunt uglify
Running "uglify:build" (uglify) task
>> Destination scripts/app-final.js not written because src files were empty.
>> No files created.
Done, without errors.
Running grunt --help gives me an interesting thing
Available tasks
uglify Minify files with UglifyJS. *
default Alias for "watch", "uglify", "sass", "autoprefixer", "imagemin" tasks.
I really cannot find a difference between uglify and the other functions. VS Code doesn't give me any errors. I installed all of the used tasks. I have node installed.
Restarting VS Code doesn't help. I don't think this matters but just in case, I'm using Linux.
Reinstalling the dependencies didn't help either

You did the following:
grunt.loadNpmTasks(
'grunt-contrib-uglify',
'grunt-contrib-sass',
'grunt-autoprefixer',
'grunt-contrib-watch',
'grunt-contrib-imagemin'
);
Replace it with this:
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-uglify');
Grunt does not take multiple Arguments in grunt.loadNpmTasks for some reason. You can see the proper usage of the loadNpmTasks - function in the documentation: https://gruntjs.com/sample-gruntfile

grunt watch tasks no response after running

I have a problem when I run "grunt" in my terminal, after I do some changes in my
".scss" file nothing happens, the terminal still waitting.....
here is my gruntfile.js file:
module.exports = function(grunt){
require('load-grunt-tasks')(grunt);
grunt.loadNpmTasks('grunt-contrib-jshint');
var config = grunt.file.readYAML('Gruntconfig.yml');
grunt.initConfig({
sass:{
dist:{
src: config.scssDir+'style.scss',
dest: config.cssDir+'style.css'
}
},
concat:{
dist:{
src: config.jsSrcDir+'*.js',
dest: config.jsConcatDir+'app.js'
}
},
jshint:{
options:{
"eqeqeq": true
},
all:[
'Gruntfile.js',
config.jsSrcDir+"*.js"
]
},
watch:{
sass:{
files: config.scssDir+'**/*.scss',
tasks:['sass']
}
}
});
grunt.registerTask('default',['jshint',
'sass','concat','watch']);
};
and my terminal is always this:

Use config variable to avoid this problem. Example:
var appConfigVars = {
sass: 'static/sass'
};
grunt.initConfig({
appConfig: appConfigVars,
watch:{
sass:{
files: '<%= appConfig.sass %>**/*.scss',
tasks:['sass']
}
}
});

Grunt task Sass on several files in several folders using parameters

I have a folder with differents design project, on each one I may have scss files to compile. So I did a Gruntfile to watch on all this folders for the scss files and I want to compile them in their directory. But it' actually not working because of this error :
Running "sassAll" task
Running "sass:animating-rocket" (sass) task
Verifying property sass.animating-rocket exists in config...ERROR
>> Unable to process task.
Warning: Required config property "sass.animating-rocket" missing. Use --force to continue.
Aborted due to warnings.
It seems that a variable is not define on the config scope...
My Gruntfile looks like this :
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'compressed'
},
files: [{
src: ['<%= grunt.task.current.args[0] %>/*.scss'],
dest: '<%= grunt.task.current.args[0] %>',
ext: '.css'
}]
}
},
watch: {
options: {
livereload: true
},
css: {
files: ['**/*.scss'],
tasks: ['sassAll'],
options: {
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('sassAll', function () {
gruntUtils.sassTasks.forEach(function (param) {
grunt.task.run('sass:' + param);
});
});
var gruntUtils = {
sassTasks: ['animating-rocket', 'hamburger-animation']
};
grunt.registerTask('default', ['sassAll', 'watch']);
};

Beginner at using Grunt need some advice for my Gruntfile.js

I'm new to setting up my own grunt, and this is what I have come up with. I was just wondering if someone could look it over and give me some hints/advice.
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
coffee: {
compile: {
expand: true,
flatten: true,
cwd: 'src/coffee',
src: ['*.coffee'],
dest: 'src/js/',
ext: '.js'
}
},
concat: {
css: {
src: [
'src/css/*'
],
dest: 'css/.css'
},
js: {
src: [
'src/js/*'
],
dest: 'js/package.js'
}
},
cssmin: {
css: {
src: 'css/package.css',
dest: 'css/package.min.css'
}
},
uglify: {
js: {
files: {
'js/package.min.js': ['js/package.js']
}
}
},
watch: {
aspx: {
files: ['*.aspx', '*.master']
},
css: {
files: ['src/css/*'],
tasks: ['concat:css', 'cssmin']
},
coffee: {
files: ['src/coffee/*'],
tasks: ['coffee:compile']
},
js: {
files: ['src/js/*'],
tasks: ['concat:js', 'uglify']
},
livereload: {
files: ['*.aspx', '*.master', 'css/*.css', 'js/*.js'],
options: { nospawn: true, livereload: true }
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-coffee');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.registerTask('default', ['coffee:compile','concat:css', 'cssmin:css', 'concat:js', 'uglify:js', 'watch']);
};
It does work, and reloads and compiles perfectly. I was just wondering if there may be a more effiecent way to handle this. Being my first gruntfile I know it is very far from perfect.

I would recommend load-grunt-tasks in order to cut down on the complexity of the main Gruntfile.js. It's incredibly simple to use. It allows you to split up the Gruntfile.js into a number of smaller JS files stored in a separate Grunt folder, for example:
/root
/Grunt
cssmin.js
coffee.js
watch.js
...
And then your main Gruntfile.js to load in your tasks is simply, again for example:
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
}
It's all held together with YAML file called aliases.yaml that sits in the Grunt folder that details the Grunt commands and their associated processes. So with this in the YAML file:
lint:
- clear
- jshint
- jscs
You could run grunt lint and it would run those tasks.
I've found it a) a complete lifesaver, and b) helped me understand Grunt at a whole different level.
I've made an example repo for you to help explain what I'm talking about. I hope it's of some help.

Grunt my code is duplicated in concat.js

Here is my grunt config file:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.initConfig({
uglify: {
build: {
src: 'app/concat.js',
dest: 'app/concat.min.js'
}
},
concat: {
options: {
separator: ';',
},
dist: {
src: ['app/js/**/*.js', '!app/concat.js',
dest: 'app/concat.js'
}
},
watch: {
karma: {
files: ['app/js/**/*.js', 'jasmine/spec/**/*.js'],
tasks: ['karma:unit:run']
},
concat: {
files: ['app/js/**/*.js', '!app/concat.js'],
tasks: ['concat']
},
live: {
files: ['app/js/**/*.js', '!app/concat.js', 'app/partials/**/*.html', 'WEB-INF/jsp/panther.html', 'css/new_style.css', 'css/style.css'],
options: {
livereload: true
}
}
},
karma: {
unit: {
configFile: 'jasmine/karma.conf.js',
background: true
}
},
sass: {
dist: {
files: {
'css/new_style.css': 'css/sass/new_style.scss'
}
}
}
});
grunt.registerTask('default', ['karma:unit:start', 'concat', 'watch']);
}
I do a watch and on code change i trigger the unit testing and concatenation,
My feeling is that this line:
src: ['app/js/**/*.js', '!app/concat.js',
is not working properly (at least for the second part)

It looks like you're building to the same directory/files as your source. I think that's a bad idea.
You should keep the files you're working on in one directory (for instance src) and let Grunt tasks output to another (for instance app). That would at least decrease the risk of duplication.
If you have one task that needs to work on the output of another task, let the first task output to a temporary directory and let the second task read from it.