I'm using grunt uglify and it doesn't seem to be mangling variable names. My "God" object is called "Porsche" and it keeps that and all it's functions readable as you can see here:
And this is my Gruntfile config:
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
mangle: {
except: ['jQuery', 'jquery']
}
},
build: {
src: [
'assets/js/**/*.js'
],
dest: 'assets/js/prod/all.min.js'
}
}
I want it to completely mangle everything, saving bytes on function names. Is there anything I'm doing wrong?
I have figured it out:
uglify: {
options: {
mangle: {
toplevel: true
}
}
}
You have to set mangle: false to prevent changes to your variable and function names:
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
mangle: false
},
build: {
src: [
'assets/js/**/*.js'
],
dest: 'assets/js/prod/all.min.js'
}
}
Check the documentation to see another example.
Related
I am getting an error when trying to run my Gruntfile to resize images. I followed the tutorial but am not sure how to add my additional task.
The error is
SyntaxError: Unexpected token ) in Gruntfile
The line is :
});
From what I can tell it looks as though that ) is needed.
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
},
resize_crop: {
image_group: {
options: {
format: "jpg",
gravity: "center",
height: 30,
width: 30
},
files: {
'/Users/john/changeimages/30x30': [
'/Users/john/changeimages/stopsign.jpeg'
],
},
}
}
});
grunt.loadNpmTasks('grunt-resize-crop');
Try getting rid of the two extra commas after the end of the array in the files object, and after the files object itself:
Change this:
files: {
'/Users/john/changeimages/30x30': [
'/Users/john/changeimages/stopsign.jpeg'
],
},
To this:
files: {
'/Users/john/changeimages/30x30': [
'/Users/john/changeimages/stopsign.jpeg'
]
}
When using uglify with only one task it works correctly and generates my compressed file. When I split it into a dev task and a dist task it runs successfully but says "No Files Created".
here's the uglify section of my Gruntfile:
uglify: {
dev : {
options: {
mangle: false,
compress: false,
wrap: false,
sourceMap: true,
banner: '/*\n <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: {
'dist/js/app.min.js': [
'src/js/zepto.min.js',
'src/js/app.js'
]
}
}
},
dist: {
options: {
mangle: true,
compress: true,
wrap: true,
sourceMap: false,
banner: '/*\n <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: {
'dist/js/app.min.js': [
'src/js/zepto.min.js',
'src/js/app.js',
]
}
}
}
},
figured it out, no need for "build" and more:
uglify: {
dev : {
options: {
mangle: false,
compress: false,
wrap: false,
sourceMap: true,
banner: '/*\n <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
files: {
'dist/js/app.min.js': [
'src/js/zepto.min.js',
'src/js/app.js'
]
}
},
dist: {
options: {
mangle: true,
compress: true,
wrap: true,
sourceMap: false,
banner: '/*\n <%= pkg.name %> <%= pkg.version %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
files: {
'dist/js/app.min.js': [
'src/js/zepto.min.js',
'src/js/app.js',
]
}
}
},
I don't know why but this code stopped working after a while. It is minifing the code but does not add any vendor prefixes. I would also like to add another files to css like normalize but it didn't work either.
Here is the code:
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
dist: {
options: {
banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
},
files: {
'js/scripts.min.js' : [
]
}
},
dev: {
options: {
banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
beautify: true,
compress: false,
mangle: false
},
files: {
'js/scripts.js' : [
]
}
}
},
sass: {
dist: {
options: {
compass: true,
style: 'expanded'
},
files: [{
expand: true,
cwd: 'sass',
src: [
'style.scss'
],
dest: 'css',
ext: '.css'
}]
}
},
watch: {
styles: {
files: ['**/*.scss'],
tasks: ['style']
}
},
postcss: {
options: {
map: {
inline: false, // save all sourcemaps as separate files...
annotation: 'css/maps/' // ...to the specified directory
},
processors: [
require('pixrem')(), // add fallbacks for rem units
require('autoprefixer')({browsers: ['last 3 versions']}), // add vendor prefixes
require('cssnano')() // minify the result
]
},
dist: {
src: 'css/style.css',
dest: 'css/styles.min.css'
}
}});
Edit, I've included whole grunt file in the snippet.
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
dist: {
options: {
banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.min.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
},
files: {
'js/scripts.min.js' : [
]
}
},
dev: {
options: {
banner: '/*! <%= pkg.name %> <%= pkg.version %> filename.js <%= grunt.template.today("yyyy-mm-dd h:MM:ss TT") %> */\n',
beautify: true,
compress: false,
mangle: false
},
files: {
'js/scripts.js' : [
]
}
}
},
sass: {
dist: {
options: {
compass: true,
style: 'expanded'
},
files: [{
expand: true,
cwd: 'sass',
src: [
'style.scss'
],
dest: 'css',
ext: '.css'
}]
}
},
watch: {
styles: {
files: ['**/*.scss'],
tasks: ['style']
}
},
postcss: {
options: {
map: {
inline: false, // save all sourcemaps as separate files...
annotation: 'css/maps/' // ...to the specified directory
},
processors: [
require('pixrem')(), // add fallbacks for rem units
require('autoprefixer')({browsers: ['last 3 versions']}), // add vendor prefixes
require('cssnano')() // minify the result
]
},
dist: {
src: 'css/style.css',
dest: 'css/styles.min.css'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-postcss');
// Default task(s).
grunt.registerTask('style', [
'sass',
'postcss'
]);
// Default task(s).
grunt.registerTask('default', [
'uglify:dist',
'sass',
'postcss',
'watch'
]);
};
I think the issue might be, that it doesn't support last 3 versions directive, that's why it doesn't add anything.
Here's the reference on the possible parameters autoperfixer processor might interpret: https://github.com/ai/browserslist
Try to use something alike:
last 2 versions
hopefully this help, as everything else seems to be correct.
I have a grunt file. at present i have set only one file for src and dest. it works well. how to i set this for all js file from a folder to dest folder?
here is my config file :
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: {
'dist/js/newMagic.min.js' : 'js/script/helloWorld.js'
//instead how to set dest/js : js/script/alljsfiles?
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify'); //this is only one runs.
grunt.loadNpmTasks('grunt-contrib-watch'); how to run both?
};
my command: grunt uglify
The most frequent use of uglify is to reduce many input files to one output file:
uglify: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: [
{
"dist/js/newMagic.min.js": ["js/script/**/*.js"]
}
]
},
}
If you want to uglify many inputs to many outputs, you can do that with a file spec like this:
uglify: {
options: {
banner: '/*\n <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> \n*/\n'
},
build: {
files: [
{
src: ["**/*.js"],
dest: "dist/js",
cwd: "js/script",
expand: true
}
]
},
}
If I run 'grunt concat' it compiles my JS files as per the Grunt file (line 82). However, it doesn't concatenate when I'm doing 'grunt watch' (line 107).
From what I can see, my file is ok but I'm fairly new to grunt so would love to see if you guys can see an issue.
Here is my full Grunt file...
// All scripts to be included in project go here
var _SCRIPTS = [
'js/prefixfree.js',
'js/jquery-1-10-2.js',
'js/ie-detect.js',
'js/application.js'
];
var _PORT = 7777;
module.exports = function(grunt) {
// load all grunt tasks
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: _PORT,
base: 'prototype'
}
}
},
htmlvalidation: {
options: {
},
files: {
src: ['prototype/*.php']
},
},
jshint: {
beforeconcat: _SCRIPTS,
afterconcat: ['js/main.js']
},
csslint: {
check: {
src: ['css/*.css']
},
strict: {
options: {
import: 2
},
src: ['css/*.css']
},
lax: {
options: {
import: false
},
src: ['css/*.css']
}
},
compass: {
dev: {
options: {
config: 'config.rb',
force: false
}
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: {
'js/main.js': ['js/main.js']
}
}
},
concat: {
options: {
stripBanners: true,
banner: '/*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */',
},
dist: {
src: _SCRIPTS,
dest: 'js/main.js',
nonull: true
},
},
cssmin: {
add_banner: {
options: {
banner: '/* <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> */',
},
files: {
'css/style.css': ['css/style.css']
}
}
},
watch: {
concat: {
files: ['js/**/*.js', '!js/main.js'],
tasks: 'concat',
options: {
spawn: false,
},
},
sass: {
files: ['sass/**/*.scss'],
tasks: ['compass:dev'],
options: {
spawn: false,
},
},
/* watch and see if our javascript files change, or new packages are installed */
/* watch our files for change, reload */
livereload: {
files: ['*.html', 'css/*.css', 'img/*', 'js/*.js'],
options: {
livereload: true
}
},
}
});
// Default task (Watch)
grunt.registerTask('default', ['watch']);
// grunt.registerTask('default', [ 'preprocess:dev', 'watch']);
// Watch with localhost (For Static Templates)
grunt.registerTask('watch_with_server', [ 'connect:server', 'watch']);
// TESTING
// Run all tests
grunt.registerTask('allTests', [ 'jshint:beforeconcat', 'concat', 'jshint:afterconcat', 'cssLint', 'htmlvalidation']);
// JS Testing
grunt.registerTask('jsHint', ['jshint:beforeconcat', 'concat', 'jshint:afterconcat']);
// CSS Testing csslint
grunt.registerTask('cssLint', ['csslint:check']);
grunt.registerTask('cssLintLax', ['csslint:lax']);
grunt.registerTask('cssLintStrict', ['csslint:strict']);
// HTML Vaidation
grunt.registerTask('htmlTest', [ 'htmlvalidation']);
grunt.registerTask('printenv', function () { console.log(process.env); });
// Concat and uglify js and minify css for release
grunt.registerTask('release', [ 'concat:dist', 'uglify', 'cssmin']);
};
Many thanks
I managed to get it working by moving 'livereload' above 'concat' in the watch task. No idea why this would make a difference but it's working!
If anyone has any insight on why this would affect it I'd love to know.
add this and see:
livereload: {
files: ['*.html', 'css/*.css', 'img/*', 'js/*.js'],
options: {
livereload: true
}
},
options: {
livereload: true
},
files: '<%= options.watch.files %>',//might have to change this line
tasks: ['default', 'notify:watch']