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.
Related
I would like to write a Grunt task that, during build, will copy all .html files that I have and make an .asp version of it in /dist as well.
I have been trying to use grunt-contrib-copy to accomplish this, and here's what I have:
copy: {
//some other tasks that work...
//copy an .asp version of all .html files
asp: {
files: [{
expand: true,
dot: true,
cwd: '<%= config.app %>',
src: ['{,*/}*.html'],
dest: '<%= config.dist %>',
option: {
process: function (content, srcpath) {
return srcpath.replace(".asp");
}
}
}]
} //end asp task
},
I know that the process function is not actually correct... I've tried a few different regex to make it work to no avail. When I run the asp task, the Grunt CLI says that my it has copied 2 files, but they're nowhere to be found. Any help is appreciated.
You can do that using rename function.
For example:
copy: {
//some other tasks that work...
//copy an .asp version of all .html files
asp: {
files: [{
expand: true,
dot: true,
cwd: '<%= config.app %>',
src: ['{,*/}*.html'],
dest: '<%= config.dist %>',
rename: function(dest, src) {
return dest + src.replace(/\.html$/, ".asp");
}
}]
} //end asp task
},
This should works.
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?
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.
My Code:
'use strict';
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
//Define paths
js_src_path: 'webapp/js',
js_build_path: 'webapp/js',
css_src_path: 'webapp/css',
css_build_path: 'webapp/css',
less_src_path: 'webapp/less',
less_build_path:'webapp/less',
//Convert Less to CSS and minify if compress = true
less: {
development: {
options: {
path: ['<%= less_src_path %>'],
},
files: {
//'<%= less_build_path %>/app.css':'<%= concat.less.dest %>',
//Dynamic expansion 1:1
expand: true,
cwd: '<%= less_src_path %>',
dest: '<%= less_build_path %>',
src: '*.less',
ext: '.less.css'
}
},
production: {
options: {
path: ['<%= less_src_path %>'],
//compress: true
yuicompress: true
},
files: {
//'<%= less_build_path %>/app.css':'<%= concat.less.dest %>',
//Dynamic expansion 1:1
expand: true,
cwd: '<%= less_src_path %>',
dest: '<%= less_build_path %>',
src: '*.less',
ext: '.less.min.css'
}
}
}
});
// Load the plugin that provides the tasks.
grunt.loadNpmTasks('grunt-lib-contrib');
grunt.loadNpmTasks('grunt-contrib-less');
// Task(s).
grunt.registerTask('les', ['less']);
grunt.registerTask('proless', ['less:production']);
grunt.registerTask('devless', ['less:devevelopment']);
};
Running each of the following:
grunt les
grunt proless
grunt devless
Results in:
Warning: Object true has no method 'indexOf' Use --force to continue
If I remove the task development:{ ... } and production: { .... } and leave the interior and just change my les call to hit less it works fine.
I ran into a similar problem with contrib-concat. I think it's a syntax error on both our parts.
Try adding an array literal around your development target's "files" property, like so:
files: [{
//'<%= less_build_path %>/app.css':'<%= concat.less.dest %>',
//Dynamic expansion 1:1
expand: true,
cwd: '<%= less_src_path %>',
dest: '<%= less_build_path %>',
src: '*.less',
ext: '.less.css'
}]
Here's the doc: http://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
Hope that helps!
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.