this is my gruntfile.
i run $ grunt default
actuall i want to up my index.html on some port and want it to open in chrom directly
module.exports = function(grunt) {
grunt.initConfig({
connect: {
server: {
options: {
port: 9001,
base: {
path: 'Dev',
options: {
index: 'index.html',
maxAge: 300000
}
}
}
}
},
open: {
delayed: {
path: 'http://localhost:9001'
app: 'Google Chrome'
options: {
openOn: 'serverListening'
}
}
}
});
grunt.registerTask('default', ['connect', 'open']);
};
You need to load the task:
grunt.loadNpmTasks('grunt-contrib-connect');
Related
I configured a Grunt project and I am trying to run livereload.
But I cant get it to work, I included the livereload script tag in my HTML document.
Script tag inside HTML doc (body)
<script src="http://0.0.0.0:35729/livereload.js"></script>
Grunt file
module.exports = function(grunt) {
//project configurations
grunt.initConfig({
clean: {
build: {
src: ['dist']
}
},
sass: {
dist: {
options: {
style: 'expanded'
},
files: {
'dist/css/compiled.css':'sources/scss/main.scss'
}
}
},
uglify : {
options : {
banner : "/*! app.min.js file */\n",
style: "compressed"
},
build : {
src : ["sources/js/app.js"],
dest : "dist/js/app.min.js"
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass'],
options: {
livereload: 35729
}
}
},
connect: {
server: {
options: {
port: 8000,
hostname: '*',
base: {
path: '.',
options: {
index: 'index.html'
}
},
onCreateServer: function(server, connect, options) {
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.registerTask("default", ["clean", "connect","sass", "uglify", "watch"]);
};
I am not sure whats going on, I see that the changes to the SCSS files are being picked-up and after a hard refresh it the changes are visible, but not due to livereload.
Edit: Now it works, I added the script tag inside the head, while I was reading that it needed to be before closing the body tag.
I am trying to get my index.html at the root of my app (app/index.html) running with grunt from I file I inherited.
My grunt file is as follows:
module.exports = function(grunt) {
// 1. All configuration goes here
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass_directory_import: {
your_target: {
files: {
src: ['css/sass/parts/_all.scss']
},
},
},
connect: {
server: {
options: {
port: 9000,
hostname: 'localhost',
base: ['./'],
keepalive: true,
open: {
target: 'http://localhost:9000'
}
}
}
},
sass: {
dist: {
options: {
loadPath: require('node-bourbon').includePaths,
sourceMap: true
},
files: {
'css/style.css' : 'css/sass/style.scss',
'css/style-ie.css' : 'css/sass/style-ie.scss'
}
},
},
watch: {
sass: {
files: 'css/sass/**/*.scss',
tasks: ['sass_directory_import','sass']
}
}
});
// 3. Where we tell Grunt we plan to use this plug-in.
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-sass-directory-import');
grunt.loadNpmTasks('grunt-contrib-connect');
// 4. Where we tell Grunt what to do when we type "grunt" into the terminal.
grunt.registerTask('default',['watch', 'connect:server']);
grunt.registerTask('build',['sass', 'uglify']);
};
I want index to appear under the port: http://localhost:9000 but when I run the default watch task, only get the sass files being watched for changes and nothing else. How do I get grunt to run the file under the given port? I have only used Gulp before and am not finding grunt very easy to work with. Is there a grunt server/connect task that does not have to be installed?
I can't get Grunt's browser sync to update my changes. I have not use Grunt much so I am a bit new to this. Maybe some of you know what could be wrong?
I am using XAMPP and runs a wordpress site at:
http://localhost:10080/wp_demo2/
(I use port 10080 to avoid conflict with Skype)
Here is my gruntfile.js (updated)
var root = './htdocs/wp_demo2/wp-content/themes/isak/';
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
options: {
style: 'expanded',
precision: 5
},
all: {
files: {
'css/output.css': 'scss/input.scss'
}
}
},
watch: {
files: 'scss/**/*.scss',
tasks: ['sass']
},
browserSync: {
dev: {
bsFiles:
{
src: [root+'css/output.css', root + '**/*.php']
},
options: {
watchTask: true,
proxy: "localhost:10080/wp_demo2"
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browser-sync');
grunt.registerTask('default', ['browserSync', 'watch']);
};
files inside Browsersync's options is a local path, not a URL. I would set port in the path and move the routes to the files outside options.
// ...
browserSync: {
dev: {
bsFiles: {
src: ['css/output.css', '**/*.php']
},
options: {
watchTask: true,
proxy: 'localhost:10080/wp_demo2'
}
}
}
// ...
grunt.registerTask('dev', ['sass', 'browserSync', 'watch']);
Browsersync should update when output.css is modified.
Your Gruntfile.js should be located in . path.
**/* means "search in all folders".
Does anyone know the best solution for automatically restarting node and running tests after the restart every time a file changes?
I am currently using grunt-contrib-watch with grunt-develop. I am getting an ECONNREFUSED error on the some restarts. I think it is because my tests are running before the server is fully online.
Any ideas on how best to achieve what I want?
What I want: Restart node and then run all integration tests after each file change.
I am taking a BDD approach to testing (as opposed to regular unit tests) with cucumber.js. I wanted to make sure that each test run against the API I was building started on a fresh boot-up of the application.
I figured it out. Here is what I used:
grunt-contrib-watch to monitor for file changes.
It in turn calls
grunt-develop to restart the application
grunt-cucumberjs to run the cucumber tests
I then modified my index.js (starts the app) so that it doesn't start the app if the NODE_ENV is set to test. That way the cucumber tests actually start the server and can wait till the start process has finished before running the tests.
Here is the GruntFile and Index file:
Gruntfile.js
/*jslint node: true */
"use strict";
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
env: {
dev: {
APP_DIR_FOR_CODE_COVERAGE: 'coverage/instrument/',
NODE_ENV: 'dev',
PORT: 8080
},
test: {
APP_DIR_FOR_CODE_COVERAGE: 'coverage/instrument/',
NODE_ENV: 'test',
PORT: 8081
},
coverage: {
APP_DIR_FOR_CODE_COVERAGE: 'coverage/instrument/',
NODE_ENV: 'test',
PORT: 8081
}
},
watch: {
js: {
files: [
'index.js',
'features/**/*.js',
'server/**/*.js'
],
tasks: ['develop', 'cucumberjs', 'jshint'],
options: {
nospawn: true
}
}
},
jshint: {
all: ['Gruntfile.js', 'index.js', 'server/**/*.js', 'features/**/*.js']
},
nodemon: {
dev: {
script: 'index.js'
}
},
cucumberjs: {
src: './features',
},
develop: {
server: {
file: 'index.js'
}
},
instrument: {
files: ['index.js', 'server/**/*.*'],
options: {
lazy: true,
basePath: 'coverage/instrument/'
}
},
storeCoverage: {
options: {
dir: 'coverage'
}
},
makeReport: {
src: 'coverage/coverage.json',
options: {
type: 'lcov',
dir: 'coverage/reports',
print: 'detail'
}
},
coverage: {
options: {
thresholds: {
'statements': 90,
'branches': 90,
'lines': 90,
'functions': 90
},
dir: 'coverage',
root: ''
}
}
});
grunt.loadNpmTasks('grunt-env');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-develop');
grunt.loadNpmTasks('grunt-cucumber');
grunt.loadNpmTasks('grunt-istanbul');
grunt.loadNpmTasks('grunt-istanbul-coverage');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('default', ['env:dev', 'nodemon']);
grunt.registerTask('test', ['env:test', 'watch']);
grunt.registerTask('testcoverage', ['env:test', 'jshint', 'instrument', 'cucumberjs', 'storeCoverage', 'makeReport', 'coverage']);
};
Index.js
/*jslint node: true */
"use strict";
var Hapi = require('hapi');
var Good = require('good');
var server = {};
exports.server = {
start: function(callback) {
/* istanbul ignore next */
var port = process.env.PORT || 8080;
server = new Hapi.Server(port);
var routes = require('./server/routes');
routes.register(server);
var exceptionHandling = require('./server/exceptionHandling');
exceptionHandling.register(server);
server.pack.register(Good, function(err) {
/* istanbul ignore if */
if (err) {
throw err; // something bad happened loading the plugin
}
/* istanbul ignore next */
server.log('info', 'Server starting at ' + server.info.uri);
server.start(callback);
});
},
stop: function(callback) {
server.log('info', 'Server stopping.');
server.stop(null, callback);
},
rootUrl: function() { return server.info.uri; }
};
/* istanbul ignore if */
if (process.env.NODE_ENV != 'test') {
exports.server.start(function() {});
}
I have Grunt file like this:
module.exports = function(grunt){
grunt.loadNpmTasks('grunt-open');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
dev: {
options: {
port: 8999,
livereload: 35729,
hostname: 'localhost'
},
livereload: {
options: {
open: {
target: 'http://localhost:8999'
},
base: [
'src/main'
]
}
}
}
},
open: {
dev: {
path: 'http://localhost:<%= connect.dev.options.port %>'
}
}
});
grunt.registerTask('default', ['connect:dev', 'open:dev']);
}
But my problem is, whenever the browseropens, the server stops prior to that.
Please help. Thanks in advance.
You can add a watch task that will watch for changed files and keep the server up:
watch: {
options: {
nospawn: true
},
livereload: {
options: {
livereload: LIVERELOAD_PORT
},
files: [
'src/main/*.js',
'src/main/*.html'
]
}
},
and then change the task to be:
grunt.registerTask('default', ['connect:dev', 'open:dev', 'watch']);