I am using this Grunt file and have set up the Jasmine specs.
The grunt file is obviously using the module.export syntax but the jasmine task runs in phantom.js headless browser. So the browser doesn't recognise the module.export syntax.
I just don't know how to get around this??
module.exports = function (grunt) {
grunt.initConfig({
jasmine: {
src: '*.js',
options: {
specs: '*Spec.js',
outfile: '_SpecRunner.html'
}
},
jshint: {
files: ['Gruntfile.js', '*.js'],
},
watch: {
files: ['<%= jshint.files %>'],
tasks: ['jshint']
}
});
grunt.loadNpmTasks('grunt-contrib-jasmine');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['jshint']);
grunt.registerTask('watch', ['watch']);
grunt.registerTask('test', ['jasmine']);
};
This is my error:
>> ReferenceError: Can't find variable: module at
>> Gruntfile.js:1
Related
For some reason running grunt from the terminal doesn't work. When I run grunt dev and open http://localhost:8000/ it works, but when I just use grunt it says This site can’t be reached. localhost refused to connect.
Any ideas what I am missing?
'use strict';
var path = require('path');
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var folderMount = function folderMount(connect, point) {
return connect.static(path.resolve(point));
};
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
clean: {
build: {
src: [".sass-cache"]
}
}, // end clean
sass: {
dist: {
options: {
style: 'expanded',
noCache: true
},
files: {
'app/production/css/style.css': 'app/scss/style.scss'
}
}
}, // end sass
cssmin: {
target: {
files: [{
expand: true,
cwd: 'app/production/css',
src: ['*.css', '!*.min.css'],
dest: 'app/production/css',
ext: '.min.css'
}]
}
}, //end cssmin
connect: {
server: {
options: {
port: 8000
}
}
}, // end connect
uglify: {
options: {
mangle: false
},
my_target: {
files: {
'app/production/js/app.min.js': ['app/js/module.js', 'app/js/config.js', 'app/js/factory.js', 'app/js/filter.js', 'app/js/PotatoAppController.js']
}
}
}, // end js minify
watch: { // this is a watcher, to run this in terminal write: grunt watch
options: {
dateFormat: function(time) {
grunt.log.writeln('The watch finished in ' + time + 'ms at' + (new Date()).toString());
grunt.log.writeln('Waiting for new changes ...');
},
livereload: true
},
css: {
files: 'app/scss/style.scss',
tasks: ['sass', 'cssmin']
},
jsmin: {
files: 'app/js/*.js',
tasks: ['uglify']
},
html: {
files: ['app/views/**/*.html'],
options: {
livereload: true
}
}
} // end watch
});
grunt.loadNpmTasks('grunt-contrib-watch'); // Load the plugin that provides the "watch" task.
grunt.loadNpmTasks('grunt-contrib-cssmin'); // Load the plugin that provides the "cssmin" task.
grunt.loadNpmTasks('grunt-contrib-sass'); // Load the plugin that provides the "sass" task.
grunt.loadNpmTasks('grunt-contrib-uglify'); // Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-livereload'); // Load the plugin that provides the "livereload" task.
grunt.loadNpmTasks('grunt-contrib-connect'); // Load the plugin that provides the "connect" task.
grunt.loadNpmTasks('grunt-contrib-clean'); // Load the plugin that provides the "clean" task.
grunt.registerTask('default', ['watch']); // this is the default command, use in terminal 'grunt'
grunt.registerTask('dev', ['connect', 'sass', 'cssmin', 'uglify', 'clean', 'watch']); // use 'grunt dev' for development
};
Once you execute 'grunt', 'default' command will be executed.
In your case, only 'watch' task is executed.
grunt.registerTask('default', ['watch']);
If you want to reach 'localhost', you need to run 'connect' module.
'watch' task is just watching file changes. not launch web-server.
'connect' is for launching web-server.
Thanks.
can you please take a look at the following Gruntfile to see if you can determine why it isn't running cssnano and autoprefixer?
Grunt is currently watching my project and with each save grunt-sass compiles fine but neither grunt-cssnano or autoprefixer are doing their thing and no errors are reported.
Done, without errors.
Completed in 1.906s at Wed Nov 25 2015 13:12:18 GMT+0000 (GMT Standard Time) - Waiting...
File "sass\styles.scss" changed.
Running "sass:dist" (sass) task
I figure I've done something wrong with grunt-contrib-watch setup (specifically the css part) but that's just a guess.
My project folder looks like so
dist
css
styles.css
node_modules (includes all relevant packages)
sass
styles.css
Gruntfile.js
package.json
And my Gruntfile is as follows
module.exports = function (grunt) {
grunt.initConfig({
sass: {
options: {
sourceMap: false
},
dist: {
files: {
'dist/css/styles.css': 'sass/styles.scss'
}
}
},
postcss: {
options: {
map: {
inline: false,
annotation: 'dist/css/maps/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
}),
require('cssnano')()
]
},
dist: {
src: 'dist/css/styles.css'
}
},
watch: {
sass: {
files: 'sass/*.scss',
tasks: ['sass']
},
css: {
files: 'dist/css/styles.css',
tasks: ['cssnano', 'autoprefixer']
}
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-cssnano');
grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano', 'autoprefixer']);
};
registering a task like you do :
grunt.registerTask('default', ['watch', 'sass', 'postcss:dist', 'cssnano']);
will execute the tasks one by one. So in your case, only the watch task will be executed because it "never ends" till you finish it. So the sass, postcss:dist, cssnano wont be reached.
So in your case it will execute the watch task only, which will watch the *.scss files to execute the sass task and watch the style.css to execute the cssnano and autoprefixer task.
But these 2 last tasks aren't defined in your config, so it won't do anything.
To solve your problem, remove the tasks from your default registered task because they aren't used :
grunt.registerTask('default', ['watch']);
And add a config for each missing task. for example:
cssnano: {
options: {
sourcemap: true
},
dist: {
files: {
'dist/css/styles.min.css': 'dist/css/styles.css'
}
}
},
//and same for autoprefixer
With a lot more trial and error it looks like I have a solution. The below file now runs Sass, cssnano, autoprefix and watch. Sass, cssnano and autoprefix packets (and I assume any others that are added in future) will do their thing in grunt.initConfig while and at the bottom of the file registerTask takes care of watch.
More work is need to figure out how to create other registerTasks but that's for another day.
Thanks to Mian who set me on the right track.
module.exports = function (grunt) {
grunt.initConfig({
sass: {
options: {
sourceMap: false
},
dist: {
files: {
'dist/css/styles.css': 'sass/styles.scss'
}
}
},
postcss: {
options: {
map: {
inline: false,
annotation: 'dist/css/maps/'
},
processors: [
require('autoprefixer')({
browsers: 'last 2 versions'
}),
require('cssnano')()
]
},
dist: {
src: 'dist/css/styles.css'
}
},
watch: {
sass: {
files: 'sass/*.scss',
tasks: ['sass', 'postcss']
},
},
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-postcss');
grunt.loadNpmTasks('grunt-cssnano');
grunt.registerTask('default', ['watch']);
};
I have been trying this for sometime now. Each time I run grunt in my Terminal I get the following error:
User$: grunt
Loading "Gruntfile.js" tasks...ERROR
>> SyntaxError: Unexpected identifier
Warning: Task "default" not found. Use --force to continue.
Aborted due to warnings.
This is my GruntFile.js
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'css/css.css' : 'css/css.scss'
}
}
},
concat: {
js: {
src:['js/*.js'],
dest: 'js/js.js'
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
js: {
files: ['js/*.js'],
tasks: ['concat:js']
},
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['watch', 'concat']);
};
My basic directory:
/js/jquery.js
/js/angular.js
/js/js.js
/css/settings.scss
/css/slider.scss
/css/css.css
You're missing a comma after your watch:css target (line 23).
Also, please note that the watch task never exits, so you want your default task to run it last:
grunt.registerTask('default', ['concat', 'watch']);
And finally, you should exclude your concatenated js from the list of watched files, to avoid looping.
module.exports = function (grunt) {
grunt.initConfig({
sass: {
dist: {
files: {
'css/css.css' : 'css/css.scss'
}
}
},
concat: {
js: {
src:['js/*.js', '!js/js.js'],
dest: 'js/js.js'
}
},
watch: {
css: {
files: 'css/*.scss',
tasks: ['sass']
},
js: {
files: ['js/*.js', '!js/js.js'],
tasks: ['concat:js']
},
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['concat', 'watch']);
};
I'd like to create a task to watch all my scss files. And I used "grunt-contrib-watch" and "grunt-contrib-sass" but it doesn't work.
My files and my directories : http://glui.me/?i=pz7vmwu9cfgbzt3/2013-11-28_at_12.46_2x.png/
My error :
MacBook-Pro-of-username:src username:src$ grunt
Running "cssmin:minify" (cssmin) task
File lib/stylesheets/bottom.min.css created.
Running "watch" task
Waiting...Bus error: 10
My grunt code :
module.exports = function(grunt){
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'lib/stylesheets/bottom.css' : 'lib/sass/bottom.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
},
cssmin: {
minify: {
files: [{
'lib/stylesheets/bottom.min.css': ['lib/stylesheets/bottom.css']
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.registerTask('default', ['watch']);
}
There was an issue with node <= 0.10.20 and OSX mavericks. Upgrade node.js to the latest and it should fix the issue. See https://github.com/gruntjs/grunt-contrib-watch/issues/204
This happens with whatever task I'm trying to run.
When running with --verbose flag I'm getting:
Initializing Command-line options: --verbose
Reading "Gruntfile.js" Gruntfile...OK
Registering Gruntfile tasks. Loading "Gruntfile.js" tasks...OK
No tasks were registered or unregistered.
This is the Gruntfile:
module.export = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
karma_coveralls: {
options: {
coverage_dir: 'coverage'
}
},
jshint: {
files: ['app/js/**/*.js', 'Gruntfile.js'],
options: grunt.file.readJSON('.jshintrc')
},
concat: {
options: {
seperator: ';'
},
dist: {
src: ['app/js/**/*.js'],
dest: 'dist/app/js/<%pkg.name%>.js'
}
},
exec: {
instrument: {
cmd: function () {
return 'istanbul instrument app/js -o app/instrumentjs';
}
}
}
});
grunt.loadNpmTasks('grunt-karma-coveralls');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('coverage', ['coveralls']);
grunt.registerTask('default', ['jshint']);
grunt.registerTask('instrument', ['exec: instrument']);
grunt.registerTask('concat', ['concat']);
};
Any Idea what am I doing wrong?
grunt versions:
grunt-cli v0.1.9
grunt v0.4.1
In your Gruntfile, module.export should be module.exports.
Check the path of /node modules while calling grunt.loadNpmTasks in Gruntfile.js