Assemble handlebar template relative to its path - gruntjs

So I'm trying to look through a directory and compile all hbs files. But the thing is that the hbs file should compile in the folder it lies in.
pseudo code:
assemble: {
options: {
flatten: false,
assets: 'assets',
dev: true,
livereloadPort: '<%- livereloadPort %>',
partials: ['dev/assemble/partials/*.hbs'],
layout: 'dev/assemble/banner.hbs',
data: ['dev/assemble/data/*.{json,yml}']
},
// ----------------------------------------------------------------
// assembles
dev: {
options: {
data: ['dev/assemble/data/*.{json,yml}']
},
src: ['dev/banners/**/*.hbs'],
expand: true,
dest: '<% SAME AS SRC FILE %>',
ext: '.html'
}
},
So basically this folder structure;
/banners/
/bannerfolder_1/
handlebarfile.hbs
/bannerfolder_2/
another_handlebarfile.hbs
Would result in this;
/banners/
/bannerfolder_1/
handlebarfile.hbs
handlebarfile.html
/bannerfolder_2/
another_handlebarfile.hbs
another_handlebarfile.html
Can this be done?

Try the following globbing pattern / dynamic mapping
files: {
expand: true, // Enable dynamic expansion.
cwd: 'dev/', // Src matches are relative to this path.
src: ['banners/**/*.hbs'], // Actual pattern(s) to match.
dest: 'dev/', // Destination path prefix.
ext: '.html', // Dest filepaths will have this extension.
extDot: 'last' // Extensions in filenames begin after the last dot
}

Related

Grunt task with grunt-contrib-less - how to compile multiple stylesheets while maintaining their original .less file name

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.
}]
}

keep dot separated file grunt-babel

I am using grunt-babel to transform ES6 to ES5. One of my filename is app.collection.js, after running the task, its renaming file to app.js .
What is the babel option to fix this issue.
/****************************************************************************
* Grunt Babel Compile ES6 to ES5
****************************************************************************/
babel: {
options: {
blacklist: ['strict'],
comments: true,
loose: ["es6.classes", "es6.properties.computed"],
"ignore": [
]
},
dist: {
files: [{ // Dictionary of files
expand: true,
cwd: '<%= config.path.app.js %>',
src: ['**/**/*.js'],
dest: '<%= config.path.app.js %>',
ext: '.js'
}]
}
}
You can either remove the ext property altogether or add extDot property with value last to keep the app.collection.js name.
files: [{ // Dictionary of files
expand: true,
cwd: '<%= config.path.app.js %>',
src: ['**/**/*.js'],
dest: '<%= config.path.app.js %>',
ext: '.js',
extDot: 'last'
}]
See more at Building the files object dynamically # gruntjs.com
extDot Used to indicate where the period indicating the extension is located. Can take either 'first' (extension begins after the first period in the file name) or 'last' (extension begins after the last period), and is set by default to 'first' [Added in 0.4.3]

Tell Grunt to put source into same target dir

Code that I have:
coffee: {
compile: {
files: {
'server/api/**/*.js': ['server/api/**/*.coffee'] // compile and concat into single file
}
}
},
Meaning, the target Dir should be the same where the .coffee file was found. Above code in Grunt does however create the directory "**" and puts the file "*.js" into it.
This is what I want:
server/api/sample/sample.coffee -> server/api/sample/sample.js
server/api/sample2/sample2.coffee -> server/api/sample2/sample2.js
To compile your files dinamically you have to do it:
glob_to_multiple: {
expand: true,
flatten: true,
cwd: 'server/api',
src: ['**/*.coffee'],
dest: 'server/api',
ext: '.js',
extDot: 'last'
}

Assemble: How to control output extension

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?

How can I rename files with Grunt, based on the respective file's parent folder name?

I have a the following structure:
src/
modules/
module1/
js/
main.js
scss/
main.scss
index.html
module2/
js/
main.js
scss/
main.scss
index.html
I'd like to run a grunt task to copy these out to the following structure:
dev/
js/
module1.js
module2.js
css/
module1.css
module2.css
module1.html
module2.html
Is there a way to do this with an existing grunt plugin? If not, how could I achieve this?
This can be done using the grunt-contrib-copy plugin.
The main thing to note is that you can change the destination programmatically by using a rename function (which takes in the destination and source of each file).
Here is a (somewhat brittle) sample Gruntfile.js that should copy to your desired structure:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
copy: {
main: {
files: [
{
expand: true,
cwd: 'src/modules/',
src: ['**/*.js'],
dest: 'dev/js/',
rename: function(dest, src) {
// use the source directory to create the file
// example with your directory structure
// dest = 'dev/js/'
// src = 'module1/js/main.js'
return dest + src.substring(0, src.indexOf('/')) + '.js';
}
},
{
expand: true,
cwd: 'src/modules/',
src: ['**/*.scss'],
dest: 'dev/css/',
rename: function(dest, src) {
return dest + src.substring(0, src.indexOf('/')) + '.css';
}
},
{
expand: true,
cwd: 'src/modules/',
src: ['**/*.html'],
dest: 'dev/',
rename: function(dest, src) {
return dest + src.substring(0, src.indexOf('/')) + '.html';
}
}
]
}
}
});
grunt.loadNpmTasks('grunt-contrib-copy');
// Default task(s).
grunt.registerTask('default', ['copy']);
};
There's no need to use grunt-contrib-copy just for this any more, you can now take advantage of grunt.file.expandMapping which has options to just change the file extension, or to define a function that returns the output filename.
Here's an example of a files object in a jade task for compiling .jade templates into .html files:
files: [{
expand: true,
src: "**/*.jade",
dest: "<%= distDir %>",
cwd: "<%= assetsDir %>/jade",
rename: function(dest, matchedSrcPath, options) {
// return the destination path and filename:
return (dest + matchedSrcPath).replace('.jade', '.html');
}
}]
It would have been easier to use the ext: '.html' option instead of the rename option in this case, but I'm using rename here so you can see how it works.
More info about the ext and rename (and other) options in the grunt.file docs. Some more examples here and here.
You could simply use the options:
expand : true,
flatten: true
No need for custom rename callbacks.
if u want to rename .coffee files to .js or similar then just adapt it ;)
sudo npm install grunt-contrib-copy
copy: {
rename: {
files: [{
expand: true,
dot: true,
cwd: './app/scripts',
dest: './app/scripts/',
src: [
'**/*.coffee'
],
rename: function(dest, src) {
console.log(dest + src);
return dest + src.replace('.coffee','.js');
}
}]
}
},
Not exactly an answer to your question but i made it here looking for relative dest folders with grunt so... Here is how i solved it
...
base: {
files:
[
{
expand: true,
cwd: 'app/design/frontend/',
src: ['**/Magento_Sales/email-src/*.html'],
dest: '../../Magento_Sales/email/',
rename: function(dest, src, expand) {
src = path.parse(src)
return path.join(expand.cwd, src.dir, dest, src.base);
}
},
],
}
...
This little bit path.join(expand.cwd, src.dir, dest, src.base); just creating the path i need.
expand.cwd = app/design/frontend/
src.dir = <DYNAMIC_FOLDERS>/Magento_Sales/email-src/
dest = ../../Magento_Sales/email/
src.base = <FILE>.html
and all together it = app/design/frontend/<COMPANY>/<MAIN-THEME>/Magento_Sales/email/<FILE>.html
and in my situation it will now compile my html emails in relative destination folders
I wanted to save the file in a min folder created at the root where we found the file so it's more easy to moove the plugin folder into another project :
-- Plugins/
-- bootstrap/
-- bootstrap.js
-- bootstrap.css
-- min/
-- bootstrap.min.js
-- bootstrap.min.css
I post the solution I found thanks to this page maybe it can help others :
uglify: {
options: {
mangle: true
},
dynamic_mappings: {
// Grunt will search for "**/*.js" under "Plugins/" when the "uglify" task
// runs and build the appropriate src-dest file mappings then, so you
// don't need to update the Gruntfile when files are added or removed.
files: [
{
expand: true, // Enable dynamic expansion.
cwd: 'Plugins/', // Src matches are relative to this path.
src: ['**/*.js', '!**/*.min.js'], // Pattern to match (ignore .min files)
dest: '/min/', // Destination path prefix.
ext: '.min.js', // Dest filepaths will have this extension.
extDot: 'last', // Extensions in filenames begin after the first dot
rename: function( dest, matchedPath, options ) {
Pathname = matchedPath.substring( 0, matchedPath.indexOf('/') );
Filename = matchedPath.replace( Pathname, '' );
//Return "Plugins / plugin_folder / min / file_name.min.js"
return options.cwd + Pathname + dest + Filename;
}
},
],
},
}

Resources