Hey guys I am new to gruntfile and front end dev in general, I am trying to set up gruntfile so that it will run a server from my default task, this actually works but it does not open at index.htmt but on Grunt-Serve page instead then i have to navigate to src/index.html.
my gruntfile:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
serve: {
options: {
port: 9000,
hostname: 'localhost',
}
}
});
//Load Grunt serve task
grunt.loadNpmTasks('grunt-serve');
grunt.registerTask('default', ['serve']);
};
package.json:
"devDependencies": {
"grunt": "^1.0.1",
"grunt-serve": "^0.1.6"
}
also i have seen before that it is possible to use gruntfile or the serve task to auto open the project in a browser... package I would need for this....? and also once am developing i would like to see my changes live.
Any help appricated
You're probably looking for browser-sync. It normally opens the browser automatically. You can see some configuration examples here: https://www.browsersync.io/docs/grunt
But just to get you started, try this setup:
First run $ npm install grunt-browser-sync --save-dev
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
browserSync: {
bsFiles: {
src : [
'index.html',
'paths/to/files/for/autoreload'
]
},
options: {
server: {
baseDir: "./"
}
}
}
});
grunt.loadNpmTasks('grunt-browser-sync');
grunt.registerTask('default', ['browserSync']);
};
The baseDir will try to open any file named index.html in the directory you specify, but I'm pretty sure you can configure this too. You can also change the file structure as you like and adapt the config.
Add the paths in src that you would like to watch and auto reload. Please note you might need to have a look at the other examples if you combine this with sass or other preprocessors.
Related
Please i am not sure if i misunderstood what grunt is for. I was expecting to write .scss files and grunt take what i write in sass and update them in my .css file. I learnt to configure my grunfile.js here . However, after running grunt watch , grunt keeps watching and excute my .scss file when ever i change it. However, contrary to my expectation, it does not update my .css file. Below is my gruntfile.js
module.exports = function(grunt) {
grunt.initConfig ({
sass: {
dist: {
files: {
'public/stylesheets/style.css' : 'sass/style.scss'
},
options: {
loadPath: ['bower_components/foundation-apps/scss']
}
}
},
watch: {
source: {
files: ['**/*.sass','**/*.scss'],
tasks: ['sass'],
options: {
livereload: true, // needed to run LiveReload
}
}
}
});
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default', ['sass']);
};
In my page, i only reference the style.css and expect it to be updated with my .scss content. What am i missing please? Any help would be appreciated.
Try to add watch to the default task:
grunt.registerTask('default', ['watch', 'sass']);
I set up grunt to run node.js jasmine tests. For some reason, with this config, the results always show double the tests.
Here is my config:
I'm using jasmine-node which plugs into grunt.
/spec/some-spec.js:
var myModule = require('../src/myModule.js');
describe('test', function(){
it('works', function(done){
setTimeout(function(){
expect(1).toBe(1);
done();
}, 100);
});
});
Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
jasmine_node: {
options: {
forceExit: true
},
all: ['spec/']
}
});
grunt.loadNpmTasks('grunt-jasmine-node');
grunt.registerTask('default', ['jasmine_node']);
};
This results in two tests running rather than one.
> grunt
Running "jasmine_node:all" (jasmine_node) task
..
Finished in 0.216 seconds
2 tests, 2 assertions, 0 failures, 0 skipped
I was able to reproduce the behavior. This is what seems to be happening:
The task looks in the specified folder (spec in your case) for files with spec in the name.
Then it looks again in every folder in the whole project for files with spec in the name.
What it ends up with is 2 overlapping sets of test files to run.
My first attempt at trying to coerce it into more logical behavior was to set specNameMatcher: null (default is 'spec'), and leave the folder set to 'spec/'. This results in no tests being run, since apparently both conditions (name and folder) must be met for files in the specified folder. You get the same problem if specNameMatcher is left at the default value, but the files in the folder don't have 'spec' in the name.
What does work is to set the folder (or 'test set' or whatever you want to call it) to []:
jasmine_node: {
options: {
forceExit: true
},
all: []
}
The catch is that if you have any other files somewhere else in the project with 'spec' in the name, they'll be mistaken for tests by jasmine.
I would consider this behavior a bug, and it should probably be reported via the project's github issues page.
This grunt plugin ( https://github.com/jasmine-contrib/grunt-jasmine-node ) seems to be dead ( https://github.com/jasmine-contrib/grunt-jasmine-node/issues/60 ).
Maybe it is a better to switch to https://github.com/onury/grunt-jasmine-nodejs ?
The jasmine-node project is pretty old. The latest commit is from July of 2014. The grunt-jasmine-node plugin appears to be active, but running against something that is going stale seems a little pointless IMHO.
To test CommonJS modules using Jasmine I'd recommend using Karma along with the
karma-jasmine and karma-commonjs plugins. I got your example working with the following files:
package.json
{
"private": "true",
"devDependencies": {
"grunt": "^0.4.5",
"grunt-jasmine-node": "^0.3.1",
"grunt-karma": "^0.10.1",
"jasmine-core": "^2.3.4",
"karma": "^0.12.31",
"karma-commonjs": "0.0.13",
"karma-jasmine": "^0.3.5",
"karma-phantomjs-launcher": "^0.1.4"
}
}
karma.conf.js
module.exports = function(config) {
config.set({
basePath: '.',
frameworks: ['jasmine', 'commonjs'],
files: [{
pattern: 'src/**/*.js'
}, {
pattern: 'spec/**/*.js'
}],
preprocessors: {
'src/**/*.js': ['commonjs'],
'spec/**/*.js': ['commonjs']
},
reporters: ['progress'],
browsers: ['PhantomJS']
});
};
Gruntfile.js (optional if you still want to use grunt)
module.exports = function(grunt) {
grunt.initConfig({
karma: {
unit: {
configFile: 'karma.conf.js',
options: {
singleRun: true
}
}
}
});
grunt.loadNpmTasks('grunt-karma');
grunt.registerTask('default', ['karma:unit']);
};
You should also install the karma command line runner globally, just like you probably did with grunt. npm install -g karma-cli
From your command line you can start karma by typing karma start. It will run the tests and then watch your files and re-run them on every save. (VERY NICE)
Alternatively you can run karma start --single-run to have it just run your tests once and exit. If you also updated your Gruntfile you can also just run grunt to run the tests once.
The current up voted answer isn't the solution. You simply modify the expression that's going to match your tests. The answer is as follows:
module.exports = function(grunt) {
grunt.initConfig({
jasmine_node: {
options: {
forceExit: true
},
all: ['spec/*spec.js']
}
});
grunt.loadNpmTasks('grunt-jasmine-node');
grunt.registerTask('default', ['jasmine_node']);
};
Here you can see that 'all' is set to *'spec/spec.js'. This will search for all tests.
Secondly, just because a project hasn't had a recently commit, doesn't mean it's "old". jasmine-node is simply stable.
I have the same issue using grunt-jasmine-node, and as aeryaguzov points out, that project is no longer maintained. Switching to grunt-jasmine-node-new solves the issue for me.
grunt-jasmine-node-new is a fork of grunt-jasmine-node that is actively maintained, and can be found here: https://www.npmjs.com/package/grunt-jasmine-node-new
This is relevant to any Grunt task which has a source file and a destination (output file).
When I run grunt in my command line, I don't want Grunt to write anything to file, I just want to view (return) the output to my console, be it Bash, CMD or any CLI.
Lets take uglify for example.
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
options: {
mangle: true,
sourceMap: true,
},
build: {
src: 'js/foo.js',
dest: 'js/foo.min.js' <-- Don't need this.
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
Instead of Done, without errors, when successful, I want to view the uglifed code in the console.
For context, I need this for a command line application which won't need anything written to disk. I just need to use the output on the fly (I'm trying to avoid writing to file and re-reading from the CLI).
You could write directly to /dev/stdout ( not on windows tough ):
build: {
src: 'js/foo.js',
dest: '/dev/stdout'
}
I am using grunt/watch for the first time:
My Gruntfile.js is configured as follows:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
all: {
options: {
livereload: true
},
files: ['**/*.gsp,**/.css']
}
}
});
// Load the plugin that provides the "uglify" task.
grunt.loadNpmTasks('grunt-contrib-watch');
};
The problem i am facing is when i run the watch task to check only css or gsp file type like files: ['**/.css'] or files: ['**/.gsp'] it works fine and detects changes in the files but when i try to watch them both files: ['**/*.gsp,**/.css'], it doesn't detect any changes (keeps showing waiting on the command line). How to make it work so that it detects the changes in both the file types .?
At the end of the day i want to do this ( image) :
Any insight will be helpful..Thanks in advance!
The best syntax will be:
files: ['./{,*/}*.{gsp,css}']
As you can see grunt accepts arrays of extensions
Ok, bassed in your edit, this should be the best solution
files: ['./grails-app/{,*/}*.gsp',
'./web-app/{,*/}*.{css,gsp}']
It is probably easier and more readable to express the functionality you want in the following way:
files: ['**/*.gsp', '**/*.css']
And for the file hierarchy you just posted:
files: [ 'grails-app/**/*.gsp', 'web-app/**/*.css', 'web-app/**/*.js' ]
I've the following Grunfile.js File:
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
options: {
style: 'compressed'
},
files: {
'css/build/style.css': 'css/style.scss'
}
}
},
watch: {
stylesheets: {
files: ['css/*.scss'],
tasks: ['newer:sass']
}
}
});
// Load the plugin that compiles sass
grunt.loadNpmTasks('grunt-contrib-sass');
// watch for, and run grunt if files change
grunt.loadNpmTasks('grunt-contrib-watch');
// Plugin for Grunt tasks to run with newer files only.
grunt.loadNpmTasks('grunt-newer');
// Grunt Tasks:
grunt.registerTask('default', ['newer:sass']);
};
After running grunt watch and saving my scss File, the console output is the following:
Running "watch" task
Waiting...
>> File "css\style.scss" changed.
Running "newer:sass" (newer) task
Running "newer:sass:dist" (newer) task
Running "sass:dist" (sass) task
File css/build/style.css created.
Running "newer-postrun:sass:dist:1:D:\xampp\htdocs\grunt-test\node_modules\grunt-newer\.cache" (newer-postrun) task
Done, without errors.
The problem is, the .scss file is compiled every time. Even if there was no change.
I don't understand why grunt is running 3 tasks (newer:sass, newer:sass:dist, sass:dist), instead of only running the task defined under watch (newer:sass).
Hope someone has an idea to fix this. :)
I'm not positive this is the problem, but try specifying that you don't want to run all of sass, just sass:dist. So try: grunt.registerTask('default', ['newer:sass:dist']);