Here's my gruntfile.js, it's in the same directory as sass/style.scss and package.json. package.json has grunt, grunt-contrib-sass and grunt-cli installed.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// this is where you set up your Sass settings. Once you know what you're doing, you can change thse.
Sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'style.css': 'sass/style.scss'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ["Sass"]);
};
Any ideas why I'm receiving the task not found error?
Change Saas to saas as shown in the example config.
Note: The correct spelling of the Task name starts with a lowercase (s).
Gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: { // <-- Change to lowercase `s`
dist: {
options: {
style: 'compressed'
},
files: {
'style.css': 'sass/style.scss'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ["sass"]); // <-- Change to lowercase `s`
};
Related
gruntfile.js
module.exports = function (grunt) {
grunt.initConfig( {
pkg: grunt.file.readJSON('package.json'),
watch : {
files : ['**/*.ts'],
tasks : ['exec:run_tsc']
},
exec: {
run_tsc: { cmd : 'tsc'}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-exec');
grunt.registerTask('default', ['watch']);
};
Looks like this code only run tsc.exe but it does not compile any TypeScript.
I can't figure out why jQuery is being ignored when running my Grunt task. Here is what it looks like:
module.exports = function (grunt) {
// Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Concat
concat: {
js: {
src: [
'js/vendor/jquery.js',
'js/app/graph.js',
],
dest: 'app/build/js/app.js'
}
},
// Uglify
uglify: {
options: {
preserveComments: false
},
my_target: {
files: {
'app/build/js/app.min.js': [
'app/build/js/app.js'
]
}
}
});
};
When I check app.js, jQuery is part of it, but not in app.min.js. So I suspect something is wrong with the Uglify part.
github.com/gruntjs/grunt-contrib-clean This is not strictly necessary, jQuery should be included if that's all you've got. Do a test on the included site to be sure it's not just hiding somewhere in the uglified code.
I don't think your syntax is right, please try instead this:
uglify: {
development: {
options: {
preserveComments: false
},
files: {
'app/build/js/app.min.js': 'app/build/js/app.js'
}
}
And call it as: grunt.registerTask('default', ['concat', 'uglify:development']);
Not sure if this will help at all or if there even is any difference between the two, but you could try setting up your uglify config similarly to your concat config... e.g:
module.exports = function (grunt) {
// Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Concat
concat: {
js: {
src: [
'js/vendor/jquery.js',
'js/app/graph.js',
],
dest: 'app/build/js/app.js'
}
},
// Uglify
uglify: {
options: {
preserveComments: false
},
js: {
src: ['app/build/js/app.js'],
dest: ['app/build/js/app.min.js']
}
}
});
};
Also, I think you were missing an extra bracket
I try to added the Sass task to my grunt process using the grunt-contrib-sass plugin but when i run it he create the css files but this file is empty
This is my Gruntfile.js :
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style:'expanded',
trace: true
},
files: {
'main.css':'sass/app.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
When i start the command "grunt" i have this :
Running "watch" task Waiting..... File "sass\app.scss"
changed Running "sass:dist" task (and nothing)
I have :
Ruby 2.1.5 [x64-mingw32]
SASS : 3.4.10
Grunt : newest version
Thanks !
Could you try changing this:
watch: {
css:
files: '**/*.scss',
tasks: ['sass']
}
}
To this:
watch: {
css:
files: '/**/*.scss',
tasks: ['sass']
}
}
To make sure it watches from the root of the project
Curious about whether there’s a way to use both Autoprefixer and Compass in Grunt without having to specify a different output path for each task.
I currently have my .scss files in a folder named source. The compass task compiles these into a folder named build. I want to then run Autoprefixer without having to specify another different output path (i.e. still be in the build directory).
Is it not possible to run Autoprefixer on a compass compiled CSS file without specifying a different output path? Is it possible to run both at the same time perhaps?
Here’s the section of my gruntfile it relates to if it’s of any help. What I run in terminal is grunt watch:
compass: {
options: {
sassDir: 'style/source',
cssDir: 'style/build',
outputStyle: 'expanded',
}
},
watch: {
css: {
files: ['style/source/**/*.scss'],
tasks: ['compass'],
options: {
spawn: false,
}
}
},
Refs:
https://github.com/nDmitry/grunt-autoprefixer
https://github.com/gruntjs/grunt-contrib-compass
If you do not specify an output location for Autoprefixer, it will just use the input location and overwrite the files. Here’s the updated section of the gruntfile if it’s of help to anyone:
autoprefixer: {
css: {
src: 'style/build/**.css',
}
},
watch: {
options: {
livereload: true,
},
css: {
files: ['style/source/**/*.scss'],
tasks: ['compass', 'autoprefixer:css'],
options: {
spawn: false,
}
}
}
You may also want to add map: true to the autoprefixer call.
Here is a working copy for your goal :
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
autoprefixer: {
css: {
src: 'css/*.css',
options: {
map: true
}
}
},
compass: {
css: {
options: {
config: 'config.rb'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass:css', 'autoprefixer:css'],
options: {
interrupt: true
}
}
}
});
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch']);
};
I have defined a simple Gruntfile.js per the official instructions and yet I am getting a warning when I run the grunt watch ('$ grunt watch') or grunt default task ('$ grunt ').
The error is:
(node) warning: Recursive process.nextTick detected. This will break
in the next version of node. Please use setImmediate for recursive
deferral.
I have read the related StackOverflow question and answer here: grunt throw "Recursive process.nextTick detected", but that didn't resolve my issue.
My Gruntfile.js is:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['client/app/**/*.js'],
dest: 'client/dist/<%= pkg.name %>.js'
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'dist/<%= pkg.name %>.min.js': ['<%= concat.dist.dest %>']
}
}
},
jshint: {
files: ['client/app/**/*.js', 'server/**/*.js'],
options: {
// options here to override JSHint defaults
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
}
},
watch: {
files: ['<% jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.registerTask('default', ['watch']);
grunt.registerTask('test', ['jshint']);
grunt.registerTask('build-dev', ['jshint', 'concat']);
grunt.registerTask('build', ['jshint', 'concat', 'uglify']);
};
OK. I figured it out. And dagnabbit, the bug was in the same Gruntfile that I copied hither from thither.
Node did NOT like the watch instructions to reference the jshint.files property and then call the jshint task. So instead, I put the files in explicitly as follows. After changing the following lines (with context):
watch: {
files: ['client/app/**/*.js', 'server/**/*.js'],
tasks: ['jshint']
}
the grunt watch and default tasks (the default task was performing the watch task), it worked without any warnings!
So I know this question has been answered, but I'll share my insights into this error as it proved to be a colossal waste of time.
Here's my original Gruntfile:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
dev: {
files: ['**/*.js', 'public/stylesheets/**/*.scss'],
tasks: ['express:dev'],
options: {
spawn: false
}
}
},
express: {
dev: {
options: {
script: 'server.js',
node_env: 'development'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-express-server');
grunt.registerTask('default', ['express:dev', 'watch']);
};
In a similar vain to Chad, I resolved the issue by removing js files from my watch task, which restarts Express. The below configuration of the aforementioned task works fine for me:
watch: {
dev: {
files: ['public/stylesheets/**/*.scss'],
tasks: ['express:dev'],
options: {
spawn: false
}
}
},