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.
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'
}
]
}
}
});
I am facing an issue with grunt-contrib-less plugin.
Problem Explanation
I have multiple less partials files which i am including in a main.less file. My grunt watch listen for changes in less files and run the less task. The problem is grunt contrib less is compiling the partials individually which throws error as some variable not define (which is actually defined in _var.less file).
I tried to negate the partials in my grunt file, but its not working.
here is my grunt config.
less: {
development: {
options: {
compress: false,
yuicompress: false/*,
optimization: 2*/
},
files: [
{
expand: true,
cwd: 'css/less',
//src: ['*.less'],
src: ['*.less', "!_*.less"],
// dest: 'dest/css/',
dest: 'css/',
ext: '.css'
}
]
}
},
watch: {
styles: {
files: ['css/less/*.less'], // which files to watch
tasks: ['less'],
options: {
nospawn: true
}
}
}
Please tell me what is wrong here.
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.
We're using grunt for dev and prod. For dev we don't perform uglify but for prod we do. Unfortunately I can't change references to script from something like this "script.js" to "script.min.js".
I've tried grunt task like this for prod environment but it is not work:
// uglify
uglify: {
options: {
drop_console: true
},
componet: {
src: [componet.path + 'script.js'],
dest: componet.path + 'script.js'
},
}
What is the best workflow to change content "script.js" with uglified version?
Try with this:
uglify: {
options: {
},
main: {
files: [{
expand: true,
src: ['yourpath/**/*.js'],
dest: ''
}]
}
}
There are different possibilities to define the grunt task, here some examples:
uglify: {
options: {
drop_console: true
},
componet: {
files: [
// map one to one
{ 'path/to/minimized01.min.js': 'path/to/source01.js' },
{ 'path/to/minimized02.min.js': 'path/to/source02.js' },
// concat several sources into a minimized destination
{ 'path/to/minimized03and04.min.js': [ 'path/to/source03.js', 'path/to/source04.js' ]},
// map all files in a folder, one to one into a destination
{ expand: true,
cwd: 'path/to/a/source/folder',
src: [ '**/*.js', '!excludeThisFile.js' ],
dest: 'path/to/a/destination/folder',
ext: 'min.js' // if you want to change each extension to min.js
}
]
}
}
And then you can run it as grunt uglify:component... I always set separate tasks for development and production, for development I'd suggest using uglify, without dropping console, and use beautify option... Even better if you use source mapping, its very useful for debugging in browsers.
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