I use grunt-contrib-jade, and wanted to specify the task for all jade files, except ones starts with an underscore.
current:
jade: {
dist: {
options: {
pretty: true
},
files: [
{
expand: true,
cwd: '/',
dest: '.tmp',
src: '{,basedir/**/}*.jade',
ext: '.html'
}
]
}
},
this compiles all *.jade files within basedir. I want to exclude all jade files within the hierarchy, where the file names start with _
It looks like it may not be specific to jade, but how grunt tasks specified with the filter syntax. So, how to specify below filter, to indicate to exclude files start with _ to be excluded.
'{,basedir/**/}*.jade'
Thanks
You can specify an array of strings for src, and can exclude files with ! at the beginning of the string (see the file object format documentation here):
src: ['{,basedir/**/}*.jade', '!{,basedir/**/}_*.jade']
Hopefully you can get it from there, I'm not terrible familiar with the globbing syntax.
Related
I used Compass and it compiles all Sass files into CSS with the same name. For example my-style.scss will become my-style.css.
All tutorials about grunt-sass that I found mapped the file name one by one, manually like:
sass: {
dist: {
options: { style: 'compressed' },
files: { 'css/my-style.css': 'sass/my-style.scss' }
}
}
Is there a way to make it more flexible? So I don't need to change the Gruntfile whenever I have new Sass file.
Thanks
Try this format for specifying your source and destination files:
sass: {
src: {
files: [{
expand: true,
cwd: 'source/styles/',
src: ['**/*.scss'],
dest: 'destination/styles/',
ext: '.css'
}]
}
}
This reads as "take all files matching *.scss in source/styles/ and its subfolders, process them and put them into destination/styles/, changing extension to .css. See also http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
You should use the universal notation:
sass: {
dist: {
options: { style: 'compressed' },
files: { 'css/*/**.css': 'sass/my-style.scss' }
}
}
In this case, the Grunt will go for all *.css files inside the css folder (including subfolders) regardless of the file name, and compile to my-style.scss
I'm using grunt-contrib-imagemin to optimize my images on a project. However, the optimization takes a long time due to the amount of images I'm optimizing.
Therefore, I only want to optimize images which are not existing in the destination OR where the source file is newer then the destination file.
Here is my configuration:
imagemin: {
dist: {
files: [{
expand: true,
cwd: 'src',
src: ['**/*.{jpg,jpeg,png,gif}'],
dest: 'dist/',
filter: 'isFile'
}]
}
}
Is there any way to extend the expansion of files to exclude already existing or newer destination files from the preprocessing?
Use grunt-newer https://github.com/tschaub/grunt-newer
watch: {
imagemin: {
files: ['**/*.{jpg,jpeg,png,gif}'],
tasks: ['newer:imagemin']
}
}
In GruntJS, is there any way to name a file generated by a task with the same name as the source file.
For example, if you wanted to compile all .less files to individual .css files, is there any way to do it like this:
files: {
"css/<%= target-filename %>.css": ["less/*.less"]
}
where <%= target-filename %> is the value of * of that current .less file?
If you use the files-array format. you can specify an output extension. see this documentation
something like this should do the trick
files: [
{
expand: true, // Enable dynamic expansion.
src: ['less/*.less'], // Actual pattern(s) to match.
dest: 'css/', // Destination path prefix.
ext: '.css', // Dest filepaths will have this extension.
}
]
Your answer lies in the documentation for building the files object dynamically.
You need to update your code to use expand: true as well as using src, dest and cwd.
Example in the files array format assuming the use of grunt-contrib-less plugin:
files: [{
expand: true, // The magic switch for processing files 1:1
cwd: '<%= target-less-dir %>/',
src: ['*.less'],
dest: '<%= target-css-dir %>'
}]
I've just started using Grunt, and I'm trying to get the concat task to concat my files in a specific order. Here's what I've got:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ';'
},
dist: {
src: ['www/js/*.js','www/js/main.js','!**/*.{min,pack}.js','!<%= concat.dist.dest %>','!<%= uglify.dist %>'],
dest: 'www/js/<%= pkg.name %>.js'
}
},
I was hoping that by putting www/js/main.js second, it would move the file down to the bottom of the list, but that doesn't appear to be the case.
How can I impose some order on the list of files it matches?
Your problem is that main.js is matched by the first pattern so the second pattern is made redundant. This might seem like a hacky way of doing it but basically you have to exclude it from the first pattern before you include it in the second; like so:
concat: {
options: {
separator: ';'
},
dist: {
src: ['www/js/*.js', '!www/js/main.js', 'www/js/main.js','!**/*.{min,pack}.js','!<%= concat.dist.dest %>','!<%= uglify.dist %>'],
dest: 'www/js/<%= pkg.name %>.js'
}
}
Note that when using minimatch pattern order is important.
I just found https://github.com/miensol/grunt-concat-in-order.
With that you could create a main js file, where you specify the order of your other javascript files with multiple #depend expressions.
I'm using Grunt for building my web project. I installed grunt-contrib-less package und added a task to my grunt.initConfig({..});
less : {
options: {
paths: ['js/base']
},
files: {
'js/base/*.css' : 'js/base/*.less'
}
}
when I run the target less via grunt less, it runs without errors but doesn't compile the less file to a css file.
Running "less:files" (less) task
Done, without errors.
I have installed the lessc package via node, too. Doing lessc <source> <dest> works fine.
Currently I have pointed with the files option directly to one dir which contains one less file for testing. Even if I write the whole file name into files option, it happens nothing...
Later on I want to scan the whole js directory and compile all new modified *.less files.
I have installed following versions:
grunt-cli v0.1.6
grunt v0.4.0
node v0.8.7
npm 1.1.49
BR,
mybecks
The glob pattern js/base/*.css does not match any files, therefore there is no destination. Usually, tasks like this expect multiple inputs to combine into a single output. Also, bear in mind that less is a multi-task, and putting files as a child of less is not doing what you expect. (it is treating it as a target, not a src/dest map)
If you want a 1-1 transform of .less into .css, you can use dynamic expansion. (or you can define each src/dest pair manually, but who wants to do that?)
In your case:
less: {
options: {
paths: ['js/base']
},
// target name
src: {
// no need for files, the config below should work
expand: true,
cwd: "js/base",
src: "*.less",
ext: ".css"
}
}
I used Anthonies solution but stil had an error
Warning: Object true has no method indexOf
If I changed the order putting expand true as second it gave me the error
Unable to read "less" file
where "less" was the value of the first item in my list.
I solved it by changing files into an array like this:
less: {
options: {
paths: ["js/base"]
},
files: [{
expand: true,
cwd: "js/base",
src: ["**/*.less"],
dest: "js/base",
ext: ".css"
}]
},
I used "grunt-contrib-less" : "^0.11.0"
This works for me, but modified to reflect this scenario:
less: {
options: {
paths: ["js/base"]
},
files: {
expand: true,
cwd: "js/base",
src: ["**/*.less"],
dest: "js/base",
ext: ".css"
}
},