keep dot separated file grunt-babel - gruntjs

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]

Related

Grunt: change file extension at build

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.

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?

Yeoman, grunt build - keeping original file names?

I'm using the default gruntfile that is included when I scaffold out a new project.
copy: {
dist: {
files: [{
expand: true,
dot: false,
cwd: '<%= yeoman.app %>',
dest: '<%= yeoman.dist %>',
src: ['myfolder/css/**/*',
]
},
}
}
I'm wanting to keep the original file names when I run the build as I keep getting b914da89.somefile.css.
What file do I need to modify to do this?
Look in Gruntfile.js to see where you are calling the rev task: grunt-rev. Removing that call should stop the modification of your file names/

How to omit a folder from the output file structure of a Grunt task

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.

Grunt - Copy specific file without usemin

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.

Resources