My question is about Assemble 0.4
I have an input file with the name "main.js.md.hbs"
I need to get "main.js.html" as output name.
How to do this?
I have a Grunt task like this:
assemble: {
options: {
assets: '<%= config.dest %>/assets',
flatten: true,
layoutdir: 'templates/layouts',
layout: 'base.hbs',
data: 'data/metadata/*.{json,yml}',
partials: 'templates/partials/*.hbs'
},
docs: {
options: {
layout: 'markdown_doc.hbs'
},
files: [{
expand: true,
cwd: 'content',
src: ['**/*.hbs'],
dest: 'dist/',
ext: '.html'
}]
}
}
With the provided config Assemble generates "main.html" (cuts off ".js" part).
I believe the problem is in your files specification. In src, you are globbing all .hbs files, then you specify the extension as .html for all. One solution that covers the main.js.md.hbs example would be to use two different file specifications with different extensions to separate out the *.js.md.hbs -> *.js.html case:
assemble: {
options: {
assets: '<%= config.dest %>/assets',
flatten: true,
layoutdir: 'templates/layouts',
layout: 'base.hbs',
data: 'data/metadata/*.{json,yml}',
partials: 'templates/partials/*.hbs'
},
docs: {
options: {
layout: 'markdown_doc.hbs'
},
files: [
{
expand: true,
cwd: 'content',
src: ['**/*.js.md.hbs'],
dest: 'dist/',
ext: '.js.html'
},
{
expand: true,
cwd: 'content',
src: ['**/*.hbs', '!*.js.md.hbs'],
dest: 'dist/',
ext: '.html'
}
]
}
}
I'm sure this is not the elegant long-term solution, but I don't know exactly what glob patterns you need. I found the following related question helpful, which also pointed out the documentation for Grunt File Globbing Patterns.
Grunt expand files, what patterns are acceptable in src?
Related
I'm building a website with Bootstrap using less. I use grunt to automate the tasks.
In my gruntfile.js I have this part:
less: {
compileCore: {
options: {
strictMath: true,
sourceMap: true,
outputSourceFiles: true,
sourceMapURL: '<%= pkg.name %>.css.map',
sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
},
src: 'less/bootstrap.less',
dest: 'dist/css/<%= pkg.name %>.css'
},
compileBrandingStyles: {
options: {
strictMath: true,
sourceMap: false,
outputSourceFiles: false
},
src: 'less/branding/**/*.less',
dest: 'dist/css/<%= what do I put here? %>.css'
}
},
In "compileBrandingStyles" I would like to fetch all *.less files in a folder and compile them into seperate css files with their original file names. No concatenation.
In the folder: less/branding I have x number of .less files:
theme-1.less
theme-2.less
theme-3.less
theme-4.less
I would like to output them in the dist/css/ folder like this:
theme-1.css
theme-2.css
theme-3.css
theme-4.css
So how should I write this part to keep their file names?
dest: 'dist/css/<%= what do I put here? %>.css'
Reconfigure your compileBrandingStyles Target to this instead:
// ...
compileBrandingStyles: {
options: {
strictMath: true,
sourceMap: false,
outputSourceFiles: false
},
files: [{
expand: true,
cwd: 'less/branding/',
src: ['**/*.less'],
dest: 'dist/css/',
ext: '.css'
}]
}
See further info on this in the grunt docs.
EDIT
If you don't' want the sub folders included in the destination folder use flatten.
// ...
compileBrandingStyles: {
options: {
strictMath: true,
sourceMap: false,
outputSourceFiles: false
},
files: [{
expand: true,
cwd: 'less/branding/',
src: ['**/*.less'],
dest: 'dist/css/',
ext: '.css',
flatten: true // <-- Remove all path parts from generated dest paths.
}]
}
I am using assemble task in grunt to generate html page using handlebars like below:
assemble: {
options: {
flatten: true,
assets: '<%= config.tmp %>/assets',
layout: '<%= config.src %>/templates/layouts/default.hbs',
partials: '<%= config.src %>/templates/partials/*.hbs'
},
en: {
options: {
data: '<%= config.src %>/data/en/data.json'
},
files: [
{
expand: true,
cwd: '<%= config.src %>/templates/pages/',
src: '**/*.hbs',
dest: '<%= config.tmp %>/en_global/'
}
]
}
}
And I am referring the data by {{data.title}} in my partial files. However, in the generated html files, there is no text at all, it seems the data.json file in not loaded correctly. Does anyone know why?
You may want to try using {{data.data.title}} and see if that fixes it.
Im running a grunt task to build an Assemble site.
My task is configured as follows:
assemble: {
options: {
flatten: false,
assets: '<%= config.dist %>',
dist: '<%= config.dist %>',
layout: 'default.hbs',
layoutdir: 'templates/layouts/',
partials: 'templates/partials/*.hbs',
},
pages: {
files: { '<%= config.dist %>': ['pages/{,*/}*.hbs'] }
}
},
In my source files, I have a structure like this:
pages
cat1
cat2
This is outputting something like:
dist
pages
cat1
cat2
How can I setup the task so that it won't include the /pages folder but still generate the subfolders?
#jakerella is close but missing one piece, ext. It should be:
files: [
{
expand: true,
cwd: 'pages',
src: ['**/*.hbs'],
dest: '<%= config.dist %>/',
ext: '.html'
}
]
So you want it to be just dist->cat1 and dist->cat2? I think you'll need to tweak your pages target a bit, but I think you're looking for the expand and cwd options:
pages: {
files: {
expand: true,
cwd: 'pages/',
src: ['**/*.hbs'],
dest: '<%= config.dist %>',
ext: '.html'
}
}
(This was partially yanked from this answer.)
EDIT Added the ext option as well.
I would like to copy specific coffeescript file (which is not included in the <!-- build:js({.tmp, app}) --> section in my index.html) to for example dist/scripts directory.
I tried with (Gruntfile.js):
copy: {
dist: {
files: [
// ...
{
expand: true,
cwd: './tmp/scripts/polyfill',
dest: '<%= yeoman.dist %>/scripts/polyfill',
src: [
'*'
]
}]
}
},
If you just have one single file you want to copy over, you can use the simpler grunt syntax:
copy: {
dist: {
files: [{
'.tmp/scripts/polyfill/myfile.js': '<%= yeoman.dist %>/scripts/polyfill/myfile.js'
}]
}
}
Also the name of the temporary folder is .tmp, not just tmp.
This worked:
{
expand: true,
cwd: '.tmp/scripts/polyfill',
dest: '<%= yeoman.dist %>/scripts/polyfill',
src: [
'polyfill.js'
]
}
My approach was good, however it contained a typo: ./tmp - it should be .tmp.
Currently we are using grunt-contrib-less to handle our LESS file compiling as a Grunt task. The less files are stored in a structure similar to this:
assets/
styles/
base.less
client/
client.less
device/
tablet.less
phone.less
We have the following for our Grunt config:
less: {
options: {
paths: 'assets/',
yuicompress: false,
ieCompat: true,
require: [
'assets/styles/base.less'
]
},
src: {
expand: true,
cwd: 'assets/',
src: [
'styles/**/*.less'
],
ext: '.css',
dest: 'assets/'
}
},
Currently this is installing all of the generated css files into the same directory as the original less file it came from. What we'd like to do is have them spit out into an /assets/css/ directory, but with the same relative structure. eg:
assets/
css/
base.css
client/
client.css
device/
tablet.css
phone.css
Is there a grunt-contrib-less configuration that can accomplish this?
An easier way to do this seems to be:
less: {
options: {
paths: 'assets/',
ieCompat: true,
require: [
'assets/styles/base.less'
]
},
src: {
expand: true,
cwd: 'assets/styles/',
src: [
'**/*.less'
],
ext: '.css',
dest: 'assets/css'
}
},
I was able to achieve the desired effect wit the following Gruntfile.js
var path = require('path');
module.exports = function(grunt) {
grunt.initConfig({
less: {
options: {
paths: 'assets/',
yuicompress: false,
ieCompat: true,
require: [
'assets/styles/base.less'
]
},
src: {
expand: true,
cwd: 'assets/',
src: [
'styles/**/*.less'
],
ext: '.css',
dest: 'assets',
rename: function(dest, src) {
return path.join(dest, src.replace(/^styles/, 'css'));
}
}
},
});
grunt.loadNpmTasks('grunt-contrib-less');
}
Explanation
Although it is not in the grunt-contrib-less docs there are a bunch more features available for files objects. I didn't realize there were this many until I was working on answering this question. The link for the docs on them is under resources.
Resources
Configuring tasks - Building the files object dynamically