I am trying to use grunt for minifying javascript files in a project using UglifyJS2.
Does UglifyJS2 have any options like WHITESPACE_ONLY ( which exists in Closure Compiler)?
What are the values do I have to pass in options node in GruntFile.js for that effect?
uglify: {
options: {
mangle: { toplevel: false },
squeeze: { dead_code: false }
},
'dist': {
src: '**/*.js',
dest: '**/*.js'
}
}
Related
Trying to use a predefined array inside of a grunt file, thought using this.js_paths would work, but doesn't seem to work as I'm getting the error, "Cannot read property IndexOf of undefined" when it comes to trying to uglify the scripts. How can I link the js_paths variable to the files src property properly instead of copying the array into the files. Would like to define it separately at the top. Is this possible?
module.exports = function(grunt) {
// loadNpmTasks from package.json file for all devDependencies that start with grunt-
require("matchdep").filterDev("grunt-*", './package.json').forEach(grunt.loadNpmTasks);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
js_paths: [
'inc/header1/js/*.js',
'!inc/header1/js/*.min.js',
'inc/header2/js/*.js',
'inc/header2/js/*.js',
'!inc/header2/js/*.min.js',
'js/*.js',
'!js/*.min.js'
],
uglify: {
options: {
mangle: true
},
build: {
files: [{
expand: true,
src: this.js_paths,
rename: function(dst, src) {
return src.replace('.js', '.min.js');
}
}]
}
},
watch: {
scripts: {
files: ['inc/header1/js/*.js', 'inc/header2/js/*.js', 'js/*.js'],
tasks: ['uglify'],
options: {
spawn: false,
}
}
}
});
grunt.registerTask('default', ['uglify', 'watch']);
};
Preferrably would like to use the same array js_paths in the watch files (since it's required there), if that makes sense? Still kinda new to using gruntfile.js
Utilize the Templates syntax. It's described in the docs as following:
Templates
Templates specified using <% %> delimiters will be automatically expanded when tasks read them from the config. Templates are expanded recursively until no more remain.
Essentially, change this.js_paths to '<%= js_paths %>' in your uglify task.
For instance:
// ...
uglify: {
options: {
mangle: true
},
build: {
files: [{
expand: true,
src: '<%= js_paths %>', // <-----
rename: function(dst, src) {
return src.replace('.js', '.min.js');
}
}]
}
},
// ...
Likewise for your watch task too.
For instance:
watch: {
scripts: {
files: '<%= js_paths %>', // <-----
tasks: ['uglify'],
options: {
spawn: false,
}
}
}
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 quite new to grunt, literally only a few hours. I am setting up grunt to cache-bust my website using grunt-cache-breaker. Now I have got it to work when I manually type in every file source example:
grunt.initConfig({
cachebreaker: {
dev: {
options: {
match: ['.js', '.css', 'min.css'],
src: {
path: 'TEST/Apps/**/*'
}
},
files: {
src: ['TEST/Apps/AppTemplate/v1.0.0/index.html',
'TEST/Apps/Case_Attributes/v1.0.0/index.html',
'TEST/Apps/Case_CorrespondenceReferences/v1.0.0/index.html',
',
]
}
},
},
});
however what I really want to do is to be able to problematically build the list of files.src from a pre-generated text file like this:
grunt.initConfig({
cachebreaker: {
dev: {
options: {
match: ['.js', '.css', 'min.css'],
src: {
path: 'TEST/Apps/**/*'
}
},
files: {
src: function (){
return grunt.file.read('config.txt')
}
}
},
},
});
or something to this affect. Is this possible? Or am I completely off the mark?
After a few more hours of playing I came up with this solution:
module.exports = function(grunt) {
grunt.initConfig({
config: grunt.file.readJSON('config.json'),
cachebreaker: {
dev: {
options: {
match: ['.js', '.css', 'min.css'],
src: {
path: 'TEST/Apps/**/*'
}
},
files: {
src: ['<%= config %>'],
}
},
},
});
grunt.loadNpmTasks('grunt-cache-breaker');
grunt.registerTask('default', ['cachebreaker']);
};
A different and very versatile way to do that is to generate the task parameters in runtime.
Say you load the list of filenames into array list. After having called grunt.initConfig() you can do this:
grunt.config.merge({
cachebreaker: {
dev: {
files: { src: list }
}
}
}),
That is, update the config object with these other properties you want.
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.
I have different options to concat JS files and CSS files.
How can I configure grunt to run such a configuration ?
This doesn't work :
concat: {
js: { // Custom options for JS
options: {
separator: '\n',
sourceMap: true,
banner: '...',
},
core: {
src: ['src/core/*.js', 'src/core/**/*.js'],
dest: 'assets/xxxx.js'
}
},
css: { // Default options for CSS
core: {
src: ['src/core/*.css', 'src/core/**/*.css'],
dest: 'assets/xxxx.css'
}
}
}
This is ugly, but it works :
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.renameTask('concat', 'concatCss');
grunt.loadNpmTasks('grunt-contrib-concat');
// The task is then loaded two times, under 'concat' and 'concatCss' names.
...
concat: {
options: {
separator: '\n',
sourceMap: true,
banner: '...',
},
core: {
src: ['src/core/*.js', 'src/core/**/*.js'],
dest: 'assets/xxxx.js'
},
concatCss: { // Default options for CSS
core: {
src: ['src/core/*.css', 'src/core/**/*.css'],
dest: 'assets/xxxx.css'
}
}