The following config works as expected, but when the //build: { stuff is uncommented it either silently fails, or it does something unexpected to me.
babel: {
//build: {
options: {
sourceMap: true,
presets: ['es2015']
},
dist: {
files: [{
expand: true,
cwd: 'build/src/app',
src: ['**/*.js'],
dest: 'build/src/es5-app'
}]
}
//}
},
So, with //build: { commented out, the es5-app directory is created at build/src, but with //build: { uncommented, the directory is not created. In both instances grunt is run as grunt babel, and it returns Done, without errors.
Since grunt-babel is registered as a multi task, dist is actually the name of the target, with files being at the first level of the config. So when you run babel without build, it's actually running babel:dist (which you should see in the log).
For it to work the way you want, you would need something like the following:
babel: {
options: {
sourceMap: true,
presets: ['es2015']
},
dist: {
files: [{
expand: true,
cwd: 'build/src/app',
src: ['**/*.js'],
dest: 'build/src/es5-app'
}]
}
build: {
files: [{
expand: true,
cwd: 'build/src/app/test',
src: ['test/**/*.js'],
dest: 'build/test/es5-app'
}]
}
},
This would allow you to run either babel:dist or babel:build.
See http://gruntjs.com/creating-tasks for more information on multi tasks.
Related
I'm using Terser for Gruntjs to minify js files.
I want to be able to create a sourcemap but I don't know how to translate the samples I see in the options section (https://www.npmjs.com/package/terser#source-map-options) into my gruntfile.js.
Here is the section where I am minifying and I added where I think the sourceMap options go:
grunt.initConfig({
terser: {
pages: {
options: {
mangle: {
properties: false
},
sourceMap: {
// source map options goes here I think but not certain what
}
},
files: [
{ expand: true,
src: '**/*.js',
dest: 'wwwroot/js',
cwd: 'wwwroot/js',
ext: '.min.js'
}
]
}
}
});
I cannot find a gruntjs example for this anywhere so any input or help would be great
I found the answer and have tested it. Note the sourceMap entry in the options below:
grunt.initConfig({
terser: {
pages: {
options: {
mangle: {
properties: false
},
sourceMap: true
},
files: [
{ expand: true,
src: '**/*.js',
dest: 'wwwroot/js',
cwd: 'wwwroot/js',
ext: '.min.js'
}
]
}
}
});
This is my very first attempt at configuring a Gruntfile.js and i can't seem to figure out what's causing this "Warning: Task "default" not found. Use --force to continue. Aborted due to warnings." error. Can someone please help me figure out what's wrong with my code. Find source code below:
'use strict';
module.exports = function (grunt) {
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Automatically load required Grunt tasks
require('jit-grunt')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: {
src: [
'Gruntfile.js',
'app/scripts/{,*/}*.js'
]
}
}
}),
copy: {
dist: {
cwd: 'app',
src: [ '**','!styles/**/*.css','!scripts/**/*.js' ],
dest: 'dist',
expand: true
},
fonts: {
files: [
{
//for bootstrap fonts
expand: true,
dot: true,
cwd: 'bower_components/bootstrap/dist',
src: ['fonts/*.*'],
dest: 'dist'
}, {
//for font-awesome
expand: true,
dot: true,
cwd: 'bower_components/font-awesome',
src: ['fonts/*.*'],
dest: 'dist'
}
]
}
},
clean: {
build: {
src: [ 'dist/']
}
});
grunt.registerTask('build', [
'clean',
'jshint',
'copy'
]);
grunt.registerTask('build', [
'jshint'
]);
grunt.registerTask('default',['build']);
};
You have not defined a task named default. A sample, really small gruntfile.js can be found below:
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.initConfig({
copy: {
main: {
files: [
{ expand: true, src: ['**'], cwd: 'lib/font-awesome/fonts/', dest: 'fonts/', filter: 'isFile' },
]
}
}
});
grunt.registerTask('default', ['copy:main']);
};
So, in this file, I'm loading the NPM package called grunt-contrib-copy. Then in the config, I specify the config for the copy sub-task by giving it a name of main and including the rules below that. Each grunt sub-task has it's own format of options and configuration that you can follow. Finally, I'm saying that the Grunt task runner should have a task named default followed by an order of operations. The first (and only) in my case is the copy sub-task and the main ruleset. In your case, this may be copy:dist for the copy operation.
Hope that helps get you started.
I've found the syntax error. These characters ')};' closed the config in the wrong place (line 30) which disrupted the flow of the program. so i just had to remove them and put them in their rightful place way down on line 67.
Sorry it turned out to be just a silly mistake on my part and probably nothing relevant to anyone else.
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've got grunt to successfully compile SASS to CSS. The problem I'm having is it's creating a file within the CSS directory called something like master.css.map.
I tried writing sourceMap: false, which I found as being the solution for a LESS setup within the options section, whereas it doesn't make a difference.
sass: {
build: {
options: {
compress: false,
sourceMap: false
},
files: [{
expand: true,
cwd: 'sass/',
src: ['*.scss'],
dest: 'css/',
ext: '.css'
}]
}
}
Do I need to declare something else or is there a dependency that can stop the .map file from being made?
You need to write like this:
options: {
compress: false,
sourcemap: 'none'
}
Here's a link for further clarification.
Hope this helps.
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