I'm new to grunt and have been trying to make a development environment where on change to a Jade file to activate live reload.
I have been able to turn on live reload when using a vanilla HTML file using a grunt express server.
express: {
all: {
options: {
bases: ['C:\\location\\projectfolder'],
port: 8080,
hostname: "0.0.0.0",
livereload: true
}
}
},
I have also tried to compile the jade just afterwards then have the watch function afterwards.
jade: {
html: {
files: {
'C:\\Users\\pavni_000\\Documents\\Business\\learning\\jade\\projectfolder': ['C:\\Users\\pavni_000\\Documents\\Business\\learning\\jade\\projectfolder\\text.jade']
},
options: {
client: false
}
}
}
Could someone give me some guidance on how to make it so that any changes to the jade file (and any other project code in general) using grunt or any other tool?
Sounds like you need a file watcher. I use WebStorm IDE and it can be configured to use a Jade file watcher that continually compiles to html in real-time. So long as you have Jade installed on your machine, point the watcher to the Jade command (windows will be something like C:\Users\~USERNAME\AppData\Roaming\npm\jade.cmd, Linux/OSX would probably be /usr/local/bin/jade).
So then if you already have Grunt running a livereload server, it will pickup the html files your watcher updates. There MAY be a way to do this all within grunt if you aren't using an IDE with a watcher (have Grunt's live-reload trigger a Jade compilation), but this method works fine for me.
Related
I have a project built using the angular-fullstack generator for Yeoman. I would like to deploy this to a Windows Server running IIS. I have successfully generated the "dist" folder using Grunt and moved the "public" and "server" folders with files to my IIS box.
How do I configure my Windows Server to host my application? Do I need to have two IIS sites (one for "public" and one for "server")? Do I need to install grunt, bower, etc. on the Windows Server?
You don't have to manually install grunt nor bower. Install locally the node components declared in package.json using the following comman:
npm install
The angular-fullstack generator creates a Node.js application, so all you have to do is run the server side application. Run /server/app.js with Node.js
You can check how to run Node applications inside IIS here:
http://www.hanselman.com/blog/InstallingAndRunningNodejsApplicationsWithinIISOnWindowsAreYouMad.aspx
You have to deploy the application on iisnode
the do the right configuration for you web.config file I currently are able to run the application using the nodejs server but not in the iisnode applications because my web.config file still working correct I posted a question with more information here
This is just to give you a hint to the way to a solution. It´s not a detailed step by step answer.
If alredy using Grunt, you can use this grunt plugin.
It´s a wrapper of the msdeploy.exe command so you need to learn about that here.
Before all of this you need to install Web Deploy on your server. There are serveral strats and posts about this. I choosed using the Remote Agent way.
I manually create the website (don´t know how to do this remotely yet. Working on that. That´s why I found this question) before I deploy. Then I just sync directories in my computer (your /dist folder) and the path in the remote server.
This a piece of my Gruntfile.js with 2 examples defined in the grunt.initConfig()
'Backup' saves in a package (zip file) the current remote directory.
The second task called 'Oper' syncs your current build located on <%= yeoman.dist %>
msdeploy: {
backup: {
options: {
verb: "sync",
source: {
dirPath: '<%= deploy.Config.basePathOper %><%=deploy.Oper.Web %>,computerName=<%=deploy.Config.computerName %>,username=<%=deploy.Config.username %>,password=<%= deploy.Config.password %>'
},
dest: {
package: '<%= deploy.Config.basePathOper %>\\backups\\web_' + grunt.template.today("yyyy-mm-dd-HH-MM-ss") + '.zip,computerName=<%=deploy.Config.computerName %>,username=<%=deploy.Config.username %>,password=<%= deploy.Config.password %>'
}
}
},
Oper: {
options: {
verb: 'sync',
source: {
dirPath: process.cwd() + '\\<%= yeoman.dist %>'
},
dest: {
dirPath: '<%= deploy.Config.basePathOper %><%=deploy.Oper.Web %>,computerName=<%=deploy.Config.computerName %>,username=<%=deploy.Config.username %>,password=<%= deploy.Config.password %>'
}
}
}
The task I created looks something like this
grunt.registerTask('deploy', function (target) {
if (target === 'Oper') {
grunt.task.run([
'msdeploy:backup',
'msdeploy:Oper'
]);
}
});
Don´t forget to load the plugin:
grunt.loadNpmTasks('grunt-msdeploy');
We are using yeoman for our dev process and currently using the "grunt server" command to run the grunt connect web server for local development. Every time we save a file, grunt will run all its tasks and reload the browser.
The problem is with Server side includes we use to include the header and footer. We had it previously working with Apache, IIS and Tomcat but have no idea how to get connect to do the same. It just treats it as an html comment.
eg include:
<!--#include virtual="header.html" -->
So,
1. Is there a way to get grunt/connect to include these files?
2. If not can we use Apache with yeoman/grunt?
3. If all fails, is there another way to include files with connect?
You can have express handle SSI with the help of the ssi node module.
I put together a github repo with this simple example: https://github.com/sfarthin/express-ssi-example .
I deployed this app to heroku so you can see it in action: http://intense-basin-9464.herokuapp.com/
app.use(function(req,res,next) {
var filename = __dirname+(req.path == "/" ? "/index.shtml" : req.path);
if(fs.existsSync(filename)) {
res.send(parser.parse(filename, fs.readFileSync(filename, {encoding: "utf8"})).contents);
} else {
next();
}
});
you can easily use connect-ssi:
https://github.com/soenkekluth/connect-ssi
I also used the ssi module for that.
for now I includes are only allowed for .shtml files. 'will change that soon.
Thanks a lot for all your help #steve-farthing and #soenke I finally ended up using a much simpler solution which was to install Apache with SSI enabled and add the following JS tag to the footer.
<script type="text/javascript">
document.write('<script src="//localhost:35729/livereload.js?snipver=1" type="text/javascript"><\/script>')
</script>
Now when we run grunt serve we still need to manually navigate to http://localh0st/app/ but everything else seems to work fine after that.
I have a Sails.JS application with Angular.JS front-end.
The angular files are stored in /assets/linker and they are injected properly on start. My issue is that when I change css or js file from assets the change doesn't appear on the server, the loaded js file is the same as when the server started. I tried to clear my browser cache and tried in another browser, but still the same.
I also tried to run the application with forever -w and nodemon, but still nothing. The application is in dev mode, anyway starting with sails lift --dev does not solve the issue neither.
I have feeling that I miss something in configuration. Is there any way to force reloading of assets?
You need to check your Gruntfile configuration. It's where the magic happen in term of linker and livereload.
Specifically, you'll need to look at the watch task and the related tasks.
By default it looks like this :
watch: {
api: {
// API files to watch:
files: ['api/**/*']
},
assets: {
// Assets to watch:
files: ['assets/**/*'],
// When assets are changed:
tasks: ['compileAssets', 'linkAssets']
}
}
I found the problem. I made the Angular.js structure with angular generator
which adds not only the js structure, but also karma test environment containing shell and bat scripts, karma framework and more.
Building sails application with all these files in watched folder is breaking the refresh functionality. There's no errors in console and nothing in the running application, but the files from assets are not reloaded anymore.
Tip of the day: be careful with the files you have in assets and take a look what does generators generate!
I came here looking for livereload, after a little search
Live Reloading
Enabling Live Reload in Your HTML
in current version of Sails v0.10 there is a file for watch task: tasks/config/watch.js
It would be nice to have the browser automatically reload the page when I change a project file. I have this node-express site with the server being defined in 'server.js'
However, I've tried different grunt configurations, but none of them caused the browser to reload on a file change although the 'watch' task prints a message that the file changed!
Here is the relevant grunt configuration:
watch: {
all: {
files: 'views/index.ejs', // for now only watch this file!
options: {
livereload: true
}
}
},
express: {
options: {
background: true,
error: function(err, result, code) {},
fallback: function() {},
port: 3000
delay: 0,
output: ".+",
debug: false
},
dev: {
options: {
script: './server.js',
node_env: 'development',
livereload: true
}
}
}
....
grunt.registerTask('server', [
'express:dev',
'open',
'watch'
])
};
And to run the task I do
$> grunt server
Can someone explain what is wrong with this configuration ?
thnx
You need to install the livereload browser plugin from http://livereload.com/
I am trying to use grunt livereload to reload css changes on my node.js pages. I am getting closer to solve my problem which is similar to yours. So from what i know so far and please correct me if i'm wrong you dont need to install "livereload browser plugin" right? I used grunt alone without node.js and i could just use livereload without installing "livereload browser plugin" i just had to add a line in my .html (the problem i run into with node is how to reload .ejs and i found this page/question on the way solving it) : so i dont know if installing the livereload thing is another way to do the script part or if this is the case like i mentioned in my problem if i want to live reload .ejs i have to install the plugin.
I've been playing around with Yeoman & Jade. I've created a small test app via yeoman init angular (it's an angular app, but that's not the point here)...
When I enter yeoman server at the command line, it will:
compile coffeescript & compass files
start a server
start a browser
watch & reload coffeescript & compass changes in the browser
Which is a great feature of Yeoman!
Now I want the same feature with Jade. So I installed grunt-jade via npm install grunt-jade and added the following config in GruntFile.js to compile the jade templates:
jade: {
html: {
src: ['app/views/*.jade'],
dest: 'app/views',
options: {
client: false
}
}
},
I was able to integrate the jade task in Yeoman's watch & reload tasks by adding the following config in the watch task:
watch: {
...
jade: {
files: 'app/views/*.jade',
tasks: 'jade reload'
},
...
}
And all works wonderfully well... except that the initial compile does not occur unless I add the jade task to the command:
yeoman jade server
Our butler doesn't like this nice girl, because he won't let her integrate with his server task :) And that is annoying, since yeoman server will compile only coffeescript & compass files.
Is there any way how I could add the jade task to the default execution of yeoman server?
We created a guide on how to integrate Jade with Yeoman: Using Yeoman and Jade
make sure to add
grunt.loadNpmTasks('grunt-jade');
on top of your gruntfile, otherwise yeoman doesn't know how to handle the "jade" task
There's an excellent guide to using Yeoman 1.0 and Jade together at https://gist.github.com/passy/5229305