I have a Gruntfile configured to, among other things, transpile an Express app to ES5 using Babel.
This is the configuration I have:
babel: {
es6: {
files: [
{
expand: true,
src: ['server/**/*.{js,json}'],
dest: 'output/',
ext: '.js'
}
]
}
},
This works pretty well. Most of my files are transpiled. The one issue that I run into is that the way my app is structured, the files aren't necessarily ending with just the .js extension. For example, I have in my transaction folder:
index.js
transaction.model.js
transaction.controller.js
transaction.model.spec.js
Therefore, in a hail mary I added the following to my configuration, to no avail.
babel: {
es6: {
files: [
{
expand: true,
src: ['server/**/*.{controller,model,transaction,js,json}'],
dest: 'output/',
ext: '.js'
}
]
}
},
How can I transpile these files with these 'custom' extensions?
Try doing this :
babel: {
es6: {
files: [
{
expand: true,
src: ['server/**/*.js'],
dest: 'output/',
ext: '.js'
}
]
}
}
or if for some reason it does not work try this
babel: {
es6: {
files: [
{
expand: true,
src: ['server/**/*.controller.js'], // just add the ext plus the .js
dest: 'output/',
ext: '.js'
}
]
}
}
Related
I'm setting a grunt file for a task. My goal is to create a css file from a sass file (scss) and add an autoprefix to all the proprieties which require so. Initially I used the propriety multifiles but it didn't work, so now I'm using the target propriety that works fine, but my problem is, even if I target the very same file, it will create another file in my folder where I put all my sass files.
So far my file is the following:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dev: {
options: {
style: 'expanded',
sourcemap: 'none',
},
files: {
'../style.css': 'scss/style.scss'
}
},
dist: {
options: {
style: 'compressed',
sourcemap: 'none',
},
files: {
'../style-min.css': 'scss/style.scss'
}
}
},
autoprefixer: {
options: {
browsers: ['last 6 versions']
},
target: {
expand: true,
flatten: true,
src: '../style.css',
dest: ''
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass', 'autoprefixer']
}
},
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('default', ['watch']);
}
My goal is to set up a global task for all my css files, like so:
target: {
expand: true,
flatten: true,
src: '*.css',
dest: ''
}
but it is not working even if I try something like:
target: {
expand: true,
flatten: true,
src: '../*.css',
dest: ''
}
Does anyone know why?
Use cwd (stands for current working directory) which is the path where grunt looks for the files matching the pattern in src. Also define the dest so that it would create the destination file in the same folder.
target: {
expand: true,
flatten: true,
cwd: '../',
src: [ '**/*.css' ],
dest: '../'
}
I have a Laravel directory structure and I have my Jade templates in the /resources/assets/jade/ folder.
Inside this folder will have multiple sub-directories which I will need to copy their exact structure to the /public/app/ directory where my app will be served from..
I have also got Typescript files being compiled into the same directory structure so its very important that the directory layout is copied as I have set it up.. I cant seem to do this successfully using the Grunt Pug plugin.. any help greatly appreciated, heres what I have so far:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
pug: {
compile: {
options: {
client: false,
pretty: true,
data: {
debug: false
}
},
files: [{
'public/app/index.html': ['resources/assets/jade/index.jade']
},
{
src: "resources/assets/jade/*.jade",
dest: "public/app",
expand: true,
ext: ".html"
} ]
}
},
});
grunt.loadNpmTasks('grunt-contrib-pug');
grunt.registerTask('default', ['pug'] );
};
Looks like the old grunt-contrib-jade syntax works with PUG although I didnt see it documented anywhere so for dexterity heres what works perfectly:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
pug: {
compile: {
options: {
client: false,
pretty: true
},
files: [ {
cwd: "resources/assets/jade",
src: "**/*.jade",
dest: "public/app",
expand: true,
ext: ".html"
} ]
}
},
});
grunt.loadNpmTasks('grunt-contrib-pug');
grunt.registerTask('default', ['pug'] );
};
The grunt-autoprefixer said "This project has been deprecated in favour of grunt-postcss." So, I want to change it to grunt-postcss.
My current setting in Gruntfile.js for grunt-autoprefixer
autoprefixer: {
options: {
browsers: ['last 1 version']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
If upgrade to grunt-postcss. How can I write my settings in Gruntfile.js?
I saw the README in grunt-postcss, but I didn't get it. Seems some values cannnot mapping to the new settings for grunt-postcss.
It is done like any other postcss processors. See this for example:
var autoprefixer = require('autoprefixer-core');
grunt.initConfig({
postcss: {
options: {
processors: [
autoprefixer({
browsers: ['> 0.5%', 'last 2 versions']
}).postcss
]
},
dist: {
files: {
'dist/': 'css/*.css'
}
}
}
});
Warning from 2020:
The usage of browsers option in autoprefixer processor has changed.
Now you need to move the browsers option into your package.json file:
Gruntfile.js
...
processors: [
...
// No autoprefixer 'browsers' option
require('autoprefixer')(),
...
]
...
package.json
{
...
// 'browserslist' option at the end of the file just above the last curly brace
'browserslist': [
'last 2 versions',
'> 0.5%'
]
}
See: https://github.com/browserslist/browserslist#browserslist-
(This answer I took from the part of my similar answer here: https://stackoverflow.com/a/64079551/12320578)
An example of working postcss-autoprefixer usage:
Gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
postcss: {
options: {
processors: [
require('autoprefixer')({grid: 'autoplace'}),
],
map: {
inline: false, // save all sourcemaps as separate files...
annotation: 'assets/css/' // ...to the specified directory
}
},
dist: {
files: {
// Generated file target location and source location
'assets/css/style.min.css': 'assets/css/style.css',
'assets/css/info.min.css': 'assets/css/info.css'
}
// or:
/*files: [
{
expand: true,
src: ['assets/css/*.css', '!**/*.min.css'],
ext: '.min.css',
extDot: 'first'
}
]*/
}
},
watch: {
styles: {
files: ['assets/css/style.css', 'assets/css/info.css'],
// or:
/*files: ['assets/css/*.css', '!assets/css/*.min.css'],*/
tasks: ['postcss']
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-postcss');
};
package.json
{
... // Other already existing options
"browserslist": [
"last 4 versions",
"> 0.5%"
]
}
See https://gruntjs.com/configuring-tasks#building-the-files-object-dynamically
I am trying do the following:
FOLDERS.GRUNT = "js/grunt"
grunt.initConfig({
//copies from .tmp to final locations
copy: {
dist: {
files: [{
expand: true,
dot: true,
dest: FOLDERS.GRUNT,
src: [
FOLDERS.GRUNT + '/.tmp/*.js'
]
}
]
}
},
I would expect the files to end up in js/grunt but for some reason ends up in js/grunt/js/grunt/.tmp/myfile.js
Also tried using cwd:FOLDERS.GRUNT but has the same issue.
This approach will work without flattening the directory.
grunt.initConfig({
copy: {
dist: {
files: [{
cwd: FOLDERS.GRUNT + '/.tmp',
expand: true,
dest: FOLDERS.GRUNT,
src: ['*.js']
}]
}
}
});
Well answer is quite simple really:
use:
copy: {
dist: {
files: [{
expand: true,
dot: true,
dest: FOLDERS.GRUNT,
flatten: true,
src: [
FOLDERS.GRUNT + '/.tmp/*.js'
]
}
]
}
},
For a single page app that I'm working on, I have the following structure:
dist
css
js
lib
partials
index.html
src
css
js
lib
views
partials
index.jade
Directory dist will be used by the express server to serve the project. I have trivial grunt tasks (using grunt-contrib-clean, grunt-contrib-copy) for cleaning dist and copying src/css, src/js, src/lib to dist.
The problem lies with src/views. This directory contains jade files which need to be compiled to html files. After compilation I want them in dist (index.html in the dist root, partials as subdir).
At the moment I am using the grunt-contrib-jade task to compile and copy the jade files. I want to copy them to dist, since I don't want to add the compiled html files to source control. But now this is not really workable, since you have to specify every jade file (now there are only a few, but that will grow):
jade: {
compile: {
options: {
pretty: true
},
files: {
// TODO make one line
'dist/index.html': ['src/views/index.jade'],
'dist/partials/banner.html': ['src/views/partials/banner.jade'],
'dist/partials/dashboard.html': ['src/views/partials/dashboard.jade'],
'dist/partials/navbar.html': ['src/views/partials/navbar.jade'],
'dist/partials/transfer.html': ['src/views/partials/transfer.jade']
}
}
},
Is there any way to use the grunt-contrib-jade task (or another one) with a directory filter? Like this:
jade: {
compile: {
options: {
pretty: true
},
dir: {
'dist': ['src/views']
}
}
}
Little clarification from Grunt wiki - expand mapping:
grunt.file.expandMapping(patterns, dest [, options])
Note that while this method may be used to programmatically generate a files array for a multi task, the declarative syntax for doing this described in the "Building the files object dynamically" section of the Configuring tasks guide is preferred.
Assuming the above, configuration will look like this:
files: [ {
expand: true,
src: "**/*.jade",
dest: "dist/",
cwd: "src/views",
ext: '.html'
} ];
Same result with declarative configuration.
I ended up upgrading to grunt 0.4 (which causes some other problems, but that I'll be able to handle).
With grunt version 0.4 it is possible to use grunt.file.expandMapping:
jade: {
compile: {
options: {
pretty: true
},
files: grunt.file.expandMapping(['**/*.jade'], 'dist/', {
cwd: 'src/views',
rename: function(destBase, destPath) {
return destBase + destPath.replace(/\.jade$/, '.html');
}
})
}
},
If you want to change only the extension of the files from .jade to .html, another option would be using the flatten and ext parameters like so:
jade: {
compile: {
options: {
data: { debug: false, title: 'My awesome application' }
},
files: grunt.file.expandMapping(['**/*.jade'], '<%= yeoman.dist %>/views', {
cwd: '<%= yeoman.app %>/views',
flatten: true,
ext: '.html'
})
}
}
Or even better (as explained here):
jade: {
compile: {
options: {
data: { debug: false, title: 'My awesome application' },
pretty: true
},
files: [
{
expand: true,
cwd: '<%= yeoman.app %>/views',
src: ['**/*.jade'],
dest: '<%= yeoman.dist %>/views',
ext: '.html'
}
]}
}
Thanks.