SyntaxError: Unexpected token ) in Gruntfile - gruntjs

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'
]
}

Related

Grunt: How do I run seperate processes for CSS and JS

As you can see I have tasks for CSS ['sass:main'] and for JS ['jshint:main', 'concat:main', 'uglify:main'], but I want to do separate tasks for separate files (JS and CSS) and listen for changes (watch). Can someone point me in the correct direction, I'm not really sure what I should be searching for. Is this something that watch can handle, or is there another plugin? I'm a little new to grunt so still trying to figure out how to use it. Thanks
GruntFile.js:
module.exports = function(grunt) {
var config = {
pkg: grunt.file.readJSON('package.json'),
jshint: {
options: {
globals: {
jQuery: true,
console: true,
module: true,
document: true
}
},
main: {
src: [
'assets/templates/main/js/crm/*.js',
]
}
},
concat: {
options: {
separator: '\n\n'
},
main: {
src: [
'assets/templates/main/js/crm/*.js',
],
dest: 'assets/templates/main/js/crm.min.js'
}
},
sass: {
options: {
style: 'compressed'
},
main: {
files: {
'assets/templates/main/css/main.min.css': 'assets/templates/main/sass/main.scss',
}
}
},
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
main: {
src: 'assets/templates/main/js/crm.min.js',
dest: 'assets/templates/main/js/crm.min.js'
}
},
watch: {
mainjs: {
files: ['assets/templates/main/js/crm/*.js'],
tasks: ['jshint:main', 'concat:main', 'uglify:main'],
},
mainsass: {
files: ['assets/templates/main/sass/*.scss''],
tasks: ['sass:main'],
}
},
concurrent: {
maincss: ['sass:main'],
mainjs: ['jshint:main', 'concat:main', 'uglify:main']
}
};
grunt.initConfig(config);
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-concurrent');
grunt.registerTask('main', ['jshint:main', 'concat:main', 'uglify:main', 'sass:main']);
grunt.registerTask('main-watch', ['jshint:main', 'concat:main', 'uglify:main', 'sass:main', 'concurrent:mainsass']);
};
When I try run tasks:
$ grunt main-watch
Loading "Gruntfile.js" tasks...ERROR
SyntaxError: Invalid or unexpected token
Warning: Task "main-watch" not found. Use --force to continue.
Aborted due to warnings.
It sounds like you want to perform two concurrent watch tasks. You can do that using a configuration like this:
...
concurrent: {
options: { logConcurrentOutput: true },
watch: ['watch:mainjs', 'watch:mainsass']
}
};
...
grunt.registerTask('main-watch', ['concurrent:watch']);
Note that logConcurrentOutput defaults to false, so if you want to see output logged to the console, you need to set it to true.

How to `uglyfy` all files from a folder to dest folder using grunt?

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
}
]
},
}

grunt uglify not distorting variable names

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.

Grunt concat not working during watch task

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']

Using Grunt to set environment based variables

I'm looking at grunt-string-replace to accomplish changing variables in my files to an environment specific variable. However, when I try to run the grunt script below I get this warning: "Task min:dev not found". But in this code I have that defined:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
min: {
dev: {
"string-replace": {
dist: {
files: {
"/newrelic.js": "/newrelic.js"
},
options: {
replacements: [
{
pattern: /$APPNAME/ig,
replacement: "services"
},
{
pattern: /$ENV/ig,
replacement: "nonprod"
}
]
}
}
}
},
prod: {
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'
}
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-string-replace');
// Default task(s).
grunt.registerTask('default', ['min:dev']);
grunt.registerTask('prod', ['min:prod']);
};
Am I missing something?
Have you read the manual? The getting started guide states that the tasks expect their configuration to be specified in a property of the same name. You have no 'min' task defined, thus it's erroring.
The top-level keys of the config object need to match the task names, and then you define 'targets' (eg, 'dev' or 'prod') within the task config.
So, here's your Gruntfile re-worked. I have not tested this so I can't promise it will work, but it will certainly lead you in the right direction:
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
"string-replace": {
dev: {
files: {
"/newrelic.js": "/newrelic.js"
},
options: {
replacements: [{
pattern: /$APPNAME/ig,
replacement: "services"
}, {
pattern: /$ENV/ig,
replacement: "nonprod"
}]
}
}
},
uglify: {
prod: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-string-replace');
// Default task(s).
grunt.registerTask('default', ['string-replace:dev']);
grunt.registerTask('prod', ['uglify:prod']);
};
think your trying to do this, this fragment will put the environment variable SOME_ENV, into the grunt config, the replace is simply giving you a easy way to do ${SOME_ENV} placeholders in files for replacement
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg : grunt.file.readJSON('package.json'),
SOME_ENV: process.env.SOME_ENV,
copy: {
files: [
{expand: true, cwd: "src/", src: ["*.*", "**/*.*"], dest: "./build",}
],
options: {
// Replace ${MEH} in files with grunt.config.get("MEH"),
// eg ${SOME_ENV}
// == grunt.config.get("SOME_ENV")
// == process.env.SOME_ENV == systems SOME_ENV environment var
process: function (content, srcpath) {
return content.replace(
/\$\{([a-zA-Z.]+)\}/g,
function replacer(match, p1, offset, string){
var value = grunt.config.get(p1);
grunt.log.write(" in file '" + srcpath + "'\n replacing '" + match + "'\n with '" + value + "'\n");
return value;
});
}
},
}
});
// Production Build Tools
grunt.loadNpmTasks('grunt-contrib-copy');
// Default Production Build task(s).
grunt.registerTask('default', ['copy']);
};

Resources