I am using a foundation/jekyll boilerplate.
Whenever I run grunt, it only returns the following in my style.css
[object Object]
It should have processed the scss from the foundation files.
Here is the gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
includePaths: ['bower_components/foundation/scss']
},
dist: {
options: {
outputStyle: 'compressed'
},
files: {
'css/style.css': 'scss/style.scss'
}
}
},
watch: {
grunt: { files: ['Gruntfile.js'] },
sass: {
files: 'scss/**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('build', ['sass']);
grunt.registerTask('default', ['build','watch']);
}
The only thing I had to do was npm install node-sass.
I ran grunt and the only code in my style.css was [object, Object]
edit: ran npm install grunt-sass,
css now compiles nicely.
It seems that there's an error with recent version of node-sass where in error situations node-sass pipes [object Object] instead of failing and showing a proper stacktrace.
Your Gruntfile worked fine for me in a reduced test case, so validate your scss files before running the task.
Also, update to the newest node-sass/grunt-sass with npm install node-sass -save-dev, as it doesn't seem to behave that way (but throws the proper error instead).
Related
so I am trying to get grunt working ( ive installed the relevant elements ) I'm not sure what settings i have wrong as, this is what comes up in the terminal after 'grunt watch'
$ grunt watch
Running "watch" task
Waiting...
it won't do anything until i hit save. then it will say a change has taken place.
i dont think this is how it's supposed to work.
my gruntfile is:
// Use "grunt --help" to list the available tasks
module.exports = function(grunt) {
grunt.initConfig({
sass: {
// this is the "dev" Sass config used with "grunt watch" command
dev: {
options: {
style: 'expanded',
},
files: {
// the first path is the output and the second is the input
'style.css': 'sass/style.scss',
'style_products.css': 'sass/style_products.scss',
'style-mega-menu.css': 'sass/style-mega-menu.scss'
}
},
// this is the "production" Sass config used with the "grunt default" command
dist: {
options: {
style: 'compressed',
},
files: {
'style.css': 'sass/style.scss',
'style_products.css': 'sass/style_products.scss',
'style-mega-menu.css': 'sass/style-mega-menu.scss'
}
}
},
// configure the "grunt watch" task
watch: {
sass: {
files: ['sass/*.scss', 'sass/**/*.scss',],
tasks: ['sass:dev']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// "grunt" is the same as running "grunt sass:dist".
grunt.registerTask('default', ['sass:dist']);
grunt.registerTask('dev', ['sass:dev']);
grunt.registerTask('default', ['watch',]);
};
can anyone pls help?
I'm trying to convert .css files to .sass files using 'grunt-sass-convert' npm module.
'Gruntfile.js' for the same is as follows:
'use strict';
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-sass-convert');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
Sass: {
options: {
// command line options here
style: 'expanded',
from: 'css',
to: 'sass'
},
files: {
// Target-specific file lists and/or options go here.
cwd: 'style',
src: '*.css',
filePrefix: '_',
dest: 'sass/'
}
}
});
grunt.registerTask('default',['Sass']);
};
I referred grunt-sass-convert npm module documentation for writing the GruntFile.js file.
While running the grunt command in cmd, I'm getting the following error:
Warning: Task "Sass" not found. Use --force to continue.
Aborted due to warnings.
I went through so many stackoverflow links regarding the same but I'm unable to fix it and All I understood that there's some error in .js file that's why it's throwing the error.
Directory structure I'm using is as here
Thanks..!!
I guess this would help you -
'use strict';
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
Sass: {
options: {
// command line options here
style: 'expanded',
from: 'css',
to: 'sass'
},
files: {
// Target-specific file lists and/or options go here.
cwd: 'style',
src: '*.css',
file_prefix: '_',
dest: 'sass/'
}
}
});
grunt.loadNpmTasks('grunt-sass-convert');
grunt.registerTask('default',['Sass']);
};
i had installed npm and grunt and then installed grunt-contrib-compass.
but when i run grunt. i have this error
Running “compass:dist” (compass) task
Warning: not found: compass Use –force to continue.
Aborted due to warnings
and this my gruntfile.js
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dist: {
options: {
sassDir: 'sass',
cssDir: 'css'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['compass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
You need to install the Compass Ruby gem, as detailed here. Basically you need to have installed Ruby, and then using that you can install the Compass gem and grunt-contrib-compass should work
I have both files: app.js which starts the http server, and main.js which is compiled by browserify and used in html as
So I have a Grunt configured with forever, browserify and watch.
I want that on app.js chance, the http must be restarted (via forever:restart), and when main.js changes, the build must be browserified (via browserify)
so, when i run grunt, says forever:start does not exist, any help ?
$ grunt
Warning: Task "forever:server1:start" not found. Use --force to continue.
this is my gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
browserify: {
dist: {
files: {
'examples/public/js/module.js': ['examples/main.js']
}
}
},
forever: {
server1: {
options: {
index: 'examples/app.js',
logDir: 'examples/logs'
}
}
},
watch: {
app: {
files: ['examples/*.js', 'examples/templates/*' ],
tasks: ['forever:server1:start']
},
web: {
files: ['examples/*.js', 'examples/templates/*' ],
tasks: ['browserify']
},
}
});
//grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-watch');
// Default task(s).
grunt.registerTask('default', ['browserify', 'forever:server1:start']);
grunt.registerTask('restart', ['browserify', 'forever:server1:restart']);
};
The task isn't found because you're missing grunt.loadNpmTasks('grunt-forever'). You might also find more success using something like nodemon instead of grunt.
Just Getting started with grunt, and when I run grunt I get this error
Loading "Gruntfile.js" tasks...ERROR
>> ReferenceError: grunt is not defined
This is my Gruntfile.js
module.exports = function(grunt){
'use strict';
};
I had it suddenly happen to me,
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'style.css': 'style.scss'
},
options: {
includePaths: ['css/'],
outputStyle: 'nested'
}
}
},
});
grunt.loadNpmTasks('grunt-sass');
grunt.registerTask('sass', ['sass']);
};
Make sure the loadNpmTasks and registerTask commands are inside the module.export, if they're outside of the scope of that closure grunt won't be defined, so it fails
Not entirely sure why, but this resolved that issue:
'use strict';
module.exports = function(grunt){
};
I too saw many "grunt not defined" error messages on my terminal.
I grabbed another gruntfile.js from the same directory where I had Node and NPM installed, and replaced the boilerplate gruntfile.js with the other gruntfile.js.
Now, I call Grunt and it works.
I had trailing commas in my gruntfile code which was throwing that error. Thank you ReSharper. Hope this helps someone.
pkg: grunt.file.readJSON('package.json'),
ngAnnotate: {
options: {
singleQuotes: true
},
FFApp: {
files: {
'Scripts/Angular-Annotated/Annotated.js': ['Scripts/Angular/**/*js']
}
, (< deleted this)
}
,(< and this one)
},