Develop Reference

JavaScript SyntaxError: Unexpected identifier when setting Grunt tasks

I'm trying to set up a couple of tasks for Grunt but there seems to be an error that I can't find. JSlint points out to the watch section with the following error:
Unexpected token, expected ,
While in the terminal I get:
SyntaxError: Unexpected identifier Warning: Task "default" not found. Use --force to continue.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dev: {
options: {
style: 'expanded',
sourcemap: 'none'
},
files: {
'compiled/style.css':'sass/style.scss'
}
},
dist: {
options: {
style: 'compressed',
sourcemap: 'none'
},
files: {
'compiled/style-min.css': 'sass/style.scss'
}
}
}
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}

I believe you are missing a comma before Watch.
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dev: {
options: {
style: 'expanded',
sourcemap: 'none'
},
files: {
'compiled/style.css':'sass/style.scss'
}
},
dist: {
options: {
style: 'compressed',
sourcemap: 'none'
},
files: {
'compiled/style-min.css': 'sass/style.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
Hope this helps

Gruntfile task is not running properly

When I run grunt command on my terminal, the concat taks doesn't create the concat/form.js, and I need it to minify the javascript code.
I have the next directory structure:
src/entry/form.js
src/form/simple-form.js
This is my Gruntfile.js ,
Is anything wrong with that?
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
form: {
options: {
separator: ''
},
dist: {
src: ['./src/**/*.js'],
dest: './concat/form.js'
}
}
},
uglify:{
form:{
options: {
sourceMap: true,
souceMapIncludeSources: true
},
dist: {
files: {
'dist/test.min.js' : ['concat/form.js']
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat:form', 'uglify:form']);
};
Final Gruntfile.js
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
concat: {
options: {
separator: ''
},
form: {
src: ['./src/**/*.js'],
dest: './concat/form.js'
}
},
uglify:{
options: {
sourceMap: true,
souceMapIncludeSources: true
},
form: {
files: {
'dist/test.min.js' : ['concat/form.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['concat', 'uglify']);
};

You use form and dist in the same time when probably it is a mistake. You should reduce this
concat: {
form: {
options: {
separator: ''
},
dist: {
src: ['./src/**/*.js'],
dest: './concat/form.js'
}
}
},
to this
concat: {
options: {
separator: ''
},
form: {
src: ['./src/**/*.js'],
dest: './concat/form.js'
}
},
See the examples how it should be done here

sass with gruntjs doesn't work

The livereload worked but my sass isn't output anything to my css. No error shown in the terminal. Below is my gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
sass: {
files: ['components/sass/*.{scss,sass}'],
tasks: ['sass'],
options: {
livereload: true
}
},
livereload: {
files: ['**/*'],
options: {
livereload: true
}
}
},
sass: {
options: {
sourceMap: true,
outputStyle: 'compressed'
},
files: {
'css/styles.css': 'components/sass/styles.scss'
}
}
});
grunt.registerTask('default', ['sass', 'watch']);
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
}
Anything I did wrongly here?

How combine tasks with Grunt

I need to combine the default task with the build.
Where the build needs to be completed so the rest of task can continue.
// Default task(s).
grunt.registerTask('default', ['lint','sass:dev', 'concurrent:default']);
// Lint task(s).
grunt.registerTask('lint', ['jshint', 'csslint']);
// Build task(s).
grunt.registerTask('build', ['lint', 'loadConfig', 'ngAnnotate', 'uglify', 'cssmin']);
I'm noob with grunt and already tried few things, didn't work.
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
serverViews: {
files: watchFiles.serverViews,
options: {
livereload: true
}
},
serverJS: {
files: watchFiles.serverJS,
tasks: ['jshint'],
options: {
livereload: true
}
},
clientViews: {
files: watchFiles.clientViews,
options: {
livereload: true,
}
},
clientJS: {
files: watchFiles.clientJS,
tasks: ['jshint'],
options: {
livereload: true
}
},
clientCSS: {
files: watchFiles.clientCSS,
tasks: ['csslint'],
options: {
livereload: true
}
},
sass: {
files: watchFiles.sass,
tasks: ['sass:dev'],
options: {
livereload: true
}
}
},
jshint: {
all: {
src: watchFiles.clientJS.concat(watchFiles.serverJS),
options: {
jshintrc: true
}
}
},
csslint: {
options: {
csslintrc: '.csslintrc',
},
all: {
src: watchFiles.clientCSS
}
},
uglify: {
production: {
options: {
mangle: false
},
files: {
'public/dist/application.min.js': 'public/dist/application.js'
}
}
},
cssmin: {
combine: {
files: {
'public/dist/application.min.css': '<%= applicationCSSFiles %>'
}
}
},
nodemon: {
dev: {
script: 'server.js',
options: {
nodeArgs: ['--debug'],
ext: 'js,html',
watch: watchFiles.serverViews.concat(watchFiles.serverJS)
}
}
},
/**
* Sass
*/
sass: {
dev: {
options: {
style: 'expanded',
compass: true
},
files: {
'public/css/app.css': 'public/sass/{,*/}*.{scss,sass}'
// 'public/css/bootstrap.css': 'public/lib/bootstrap-sass-official/assets/stylesheets/_bootstrap.scss'
}
},
dist: {
//you could use this as part of the build job (instead of using cssmin)
options: {
style: 'compressed',
compass: true
},
files: {
'public/dist/style.min.css': 'style/{,*/}*.{scss,sass}'
}
}
},
'node-inspector': {
custom: {
options: {
'web-port': 1337,
'web-host': 'localhost',
'debug-port': 5858,
'save-live-edit': true,
'no-preload': true,
'stack-trace-limit': 50,
'hidden': []
}
}
},
ngAnnotate: {
production: {
files: {
'public/dist/application.js': '<%= applicationJavaScriptFiles %>'
}
}
},
concurrent: {
default: ['nodemon', 'watch'],
debug: ['nodemon', 'watch', 'node-inspector'],
options: {
logConcurrentOutput: true,
limit: 10
}
},
env: {
test: {
NODE_ENV: 'test'
},
secure: {
NODE_ENV: 'secure'
}
},
mochaTest: {
src: watchFiles.mochaTests,
options: {
reporter: 'spec',
require: 'server.js'
}
},
karma: {
unit: {
configFile: 'karma.conf.js'
}
}
});
// Load NPM tasks
require('load-grunt-tasks')(grunt);
// Making grunt default to force in order not to break the project.
grunt.option('force', true);
// A Task for loading the configuration object
grunt.task.registerTask('loadConfig', 'Task that loads the config into a grunt option.', function() {
var init = require('./config/init')();
var config = require('./config/config');
grunt.config.set('applicationJavaScriptFiles', config.assets.js);
grunt.config.set('applicationCSSFiles', config.assets.css);
});
// Default task(s).
grunt.registerTask('default', ['lint','sass:dev', 'concurrent:default']);
// Lint task(s).
grunt.registerTask('lint', ['jshint', 'csslint']);
// Build task(s).
grunt.registerTask('build', ['lint', 'loadConfig', 'ngAnnotate', 'uglify', 'cssmin']);

You need to register combine task as following:
grunt.registerTask('combine', ['default', 'build']);
See registerTask documentation.

Grunt Watch and Connect is not working together

I am trying to register a custom task that combines the connect and watch task on grunt, but it seems like it is just running the first element(task) of the array on the function grunt.registerTask. In this situation, it is just running the watch command, not the connect.
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
server: {
options: {
port: '8000',
protocol: 'http',
hostname: 'localhost',
base: 'app',
keepalive: true,
livereload: true,
open: true
}
}
},
wiredep: {
task: {
src: ['app/index.html'],
}
},
jshint: {
options: {
reporter: require('jshint-stylish'),
jshintrc: '.jshintrc'
},
all: [
'GruntFile.js',
'app/scripts/*',
'test/spec/*'
]
},
sass: {
dist: {
files: {
'app/stylesheets/main.css': 'app/sass/main.sass'
},
options: {
compass: true
}
}
},
watch: {
options: {
livereload: true
},
styles: {
files: ['app/sass/*.sass'],
tasks: ['sass'],
options: {
livereload: true
}
},
scripts: {
files: ['app/scripts/*.js', 'GruntFile.js'],
tasks: ['jshint'],
options: {
livereload: true
}
},
bower: {
files: ['bower.json'],
tasks: ['wiredep']
}
}
});
// ========================================================
// Loading npm tasks
// ========================================================
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-wiredep');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
// ========================================================
// Register npm tasks
// ========================================================
grunt.registerTask('default', ['connect', 'wiredep', 'jshint', 'sass', 'watch']);
grunt.registerTask('serve',['watch', 'connect:server']);
// ========================================================
};
How can I work this two tasks together with registerTask function?