I am trying to add bourbon as a dependency to a project where grunt-contrib-sass is used. node-bourbon has the following to say about grunt and Sass integration:
grunt.initConfig({
sass: {
dist: {
options: {
// THIS IS THE LINE I ADDED TO MY CONFIG
includePaths: require('bourbon').includePaths,
outputStyle: 'compressed'
},
files: {
'path/to/output.css': 'path/to/input.scss'
}
}
}
});
However, when running grunt I get the following error:
OptionParser::InvalidOption: invalid option: --include-paths
This error appears with any array of paths given to includePaths, not just bourbon.
What am I doing wrong?
node-bourbon is using grunt-sass rather than grunt-contrib-sass. That's why the option isn't available and you get this error.
So either swap those two grunt tasks or replace includePaths with loadPath. That's the equivalent option in grunt-contrib-sass.
Related
I'm trying to create a separate task called stylelint because for reasons I do not want it to be part of the postcss task.
In the gruntfile I'm writing:
stylelint: {
options: {},
src: './assets/css/precss/**'
}
When I run grunt stylelint it lints my code but when it finds an issue then I get Warning: Task "stylelint:src" failed. Use --force to continue.
Am I omitting something?
You should use grunt-stylelint rather than PostCSS as it supports the native stylelint format reporters. Your Gruntfile config should then look something like this:
stylelint: {
css: {
options: {
configFile: '.stylelintrc',
format: 'css'
},
src: [ 'assets/*.css' ]
},
},
I just realised that this is not possible. You have to run grunt with --force
Please i am not sure if i misunderstood what grunt is for. I was expecting to write .scss files and grunt take what i write in sass and update them in my .css file. I learnt to configure my grunfile.js here . However, after running grunt watch , grunt keeps watching and excute my .scss file when ever i change it. However, contrary to my expectation, it does not update my .css file. Below is my gruntfile.js
module.exports = function(grunt) {
grunt.initConfig ({
sass: {
dist: {
files: {
'public/stylesheets/style.css' : 'sass/style.scss'
},
options: {
loadPath: ['bower_components/foundation-apps/scss']
}
}
},
watch: {
source: {
files: ['**/*.sass','**/*.scss'],
tasks: ['sass'],
options: {
livereload: true, // needed to run LiveReload
}
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
In my page, i only reference the style.css and expect it to be updated with my .scss content. What am i missing please? Any help would be appreciated.
Try to add watch to the default task:
grunt.registerTask('default', ['watch', 'sass']);
I'm using grunt-contrib-htmlmin plugin. This is how my Gruntfile.js looks like:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
htmlmin: {
dist: {
options: {
removeComments: true,
collapseWhitespace: true
},
files: {
'/views/build/404.html': '/view/src/404.html'
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.registerTask('default', ['htmlmin']);
};
Nothing special, really. My 404.html is also pretty simple, but even on simpler HTML files, grunt doesn't work. For example, let's say take following HTML file:
<html>
<head>
</head>
<body>
</body>
</html>
It doesn't even work on that. What I get as a result in console is:
Running "htmlmin:dist" (htmlmin) task
Minified 0 files (1 failed)
Done, without errors.
Where can I see why it failed?
I tried really many things like removing options and I also tried changing file structure where I ended up with this:
files: {
expand: true,
cwd: 'views/src/',
src: '404.html',
build: 'views/build/404.html'
}
But that doesn't work either and error that I'm getting now is this:
Running "htmlmin:dist" (htmlmin) task
Warning: pattern.indexOf is not a function Use --force to continue.
Aborted due to warnings.
What am I doing wrong?
I don't know the actual reason for the error. But modifying the source by adding square brackes, as below, worked for me.
files: [{
expand: true,
cwd: 'views/src/',
src: '404.html',
build: 'views/build/404.html'
}]
To see the logs run command:
grunt task:target --verbose
In your case it will be: grunt htmlmin:dist --verbose
The error seems to be in your file path: '/views/build/404.html'. '/' means that plugin will start to search from the root folder in unix systems. Use relative path:
'views/build/404.html': 'view/src/404.html'
OR
'./views/build/404.html': './view/src/404.html'
P.S. For all others please note that in 'files' you should specify DESTINATION path first and only then SRC path.
htmlmin: {
dist: {
options: {
/* options here*/
},
files: {
'path/to/destination/folder/404.html': 'path/to/src/folder/404.html'
}
}
}
I have imagemin working through grunt.
As show below in the Gruntfile, I have things like optimisationLevel: 7 and so on.
The use: command tells it to use a different algo for compressing the images. It listens to all of my options except for the use one.
Anyone know why this is? Am I doing something wrong syntax wise?
Gruntfile:
module.exports = function(grunt) {
var mozjpeg = require('imagemin-mozjpeg');
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
imagemin: {
dynamic: { // Task // Target
options: {
optimizationLevel: 7,
progressive: false,
svgoPlugins: [{ removeViewBox: false }],
use: [mozjpeg({fastcrush: true})]
},
files: [{
expand: true, // Enable dynamic expansion
cwd: 'src/', // Src matches are relative to this path
src: ['**/*.{png,jpg,gif}'], // Actual patterns to match
dest: 'build/img' // Destination path prefix
}]
}
}
});
// Load the plugins
//grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
// Default tasks
grunt.registerTask('default', ['imagemin']);
};
CLI - You can see on line 40 it says use null.
It seems to be a logging issue of the grunt.verbose.writeFlags function which grunt use to log the task options in verbose mode.
If you will add the following code to you gruntfile.js, you will notice it incorrectly logs the value of 'use' as null:
grunt.verbose.writeflags({use: [mozjpeg()]}, 'Test');
The cause might be this reported issue, although it is not exactly the same case.
I want to copy a directory to a different location using a Grunt task. I don't want this to be run in my default task, where copy is run, so I am registering a new task for it called "myTask" using the following code:
grunt.registerTask('myTask', 'Make new dir and copy "src" there', function() {
grunt.file.copy('src/*','../dest/');
});
Whenever I run myTask, it tells me:
Warning: Unable to read "src/*" file (Error code: ENOENT). Use --force to continue.
Is there a certain syntax I'm missing for the source directory I'm copying from?
You mention that you already use the copy task, but don't want to include this specific copying in your default task... so I would recommend using multiple targets in your config and just specifying which to perform in your default task array:
grunt.initConfig({
copy: {
js: {
files: [{
expand: true,
src: ['path/to/js/*.js'],
dest: 'dest/js'
}]
},
otherstuff: {
files: [{
expand: true,
src: ['src/**'],
dest: 'dest/'
}]
}
},
// ...
});
// notice that in our default task we specify "copy:js"
grunt.registerTask('default', ['jshint', 'concat', /* etc, */ 'copy:js']);
Now you can run ~$ grunt copy:otherstuff separately from ~$ grunt copy:js and when you just run ~$ grunt it will run the default task which only runs copy:js.