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
Related
I want to host my app outside of node JS, but I want to use .vue files and possible npm as build system (if it's needed). Is it's possible to do?
I do not need any backward compatibility and if it work on latest Chrome dev it's ok for me.
Is there any examples how it can be done?
I tried to build some webpack template, but it's work only inside NodeJS. On other server I am getting 404 when I am accessing to URLs that placed in .vue files. It's seems that they can't be handled by the other server.
VueJS app is not NodeJS app.
VueJS app is interpreted by the browser.
You just have to build your app on computer and host files as any static website, so any server can serve html and files.
To build your app use e.g. Webpack (https://github.com/vuejs-templates/webpack )
NodeJs only use to build *.js files in front-end, your WebApp dosen't have to run on Nodejs.
1, You can create a index.html file that requires *.js file when webpack built it.
2, Use Chrome to open your index.html file so you can see it works.
You don't need to use vue-cli or other servers if you only want a static page.
But you have to know how to set your webpack.config.js, you can look that doc https://webpack.js.org/guides/getting-started/
Your starting point is wrong. Vue + node.js can build a complete site. Vue is the front-end framework, node's server language. The two can be used in combination. But not vue must rely on node to use. The two of them can be perfect to achieve the front and back separation of the development model.
In projects that use vue, individuals do not recommend configuring webpack and vue-loader separately. You can directly use vue official scaffolding, vue-cli. Do not have to consider these configurations, automatically configured.
Vue-cli
If you just started learning Vue, here's an entry-level demo. Although it is only a small application, but it covers a lot of knowledge points (vue2.0 + vue-cli + vue-router + vuex + axios + mysql + express + pm2 + webpack), including front-end, back-end, database and other sites Some of the necessary elements, for me, learning great significance, would like to encourage each other!
Vue Demo
Best way to develop Vue app is run dev server, and after all just build static assets. You don't need use vuex files, even better is use static template because you can easily integrate it with some back-end (WordPress or whatever).
Helpfully will be use some starter, for ex. Vue.js starter
It's true that vue will create static html pages when you run the build script. However, you will need to serve the files from a small server for the site to work. If you notice, when you run npm run build, the terminal will print a notice...
Tip:
Built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
You can create a simple http server in your /dist directory with express and then host your site somewhere like Heroku.
Take a look at this article https://medium.com/#sagarjauhari/quick-n-clean-way-to-deploy-vue-webpack-apps-on-heroku-b522d3904bc8#.4nbg2ssy0
TLDR;
write a super simple express server
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname));
var port = process.env.PORT || 5000;
app.listen(port);
console.log('server started '+ port);
add a postinstall script in a package.json within /dist
{
"name": "myApp",
"version": "1.0.0",
"description": "awesome stuff",
"author": "me oh my",
"private": true,
"scripts": {
"postinstall": "npm install express"
}
}
push only your /dist folder to heroku after you've compiled your site.
proof: I've followed these steps to host my vue.js project
using vue files without NodeJS (nor webpack) is possible with vue3-sfc-loader.
vue3-sfc-loader
Vue3/Vue2 Single File Component loader. Load .vue files dynamically at runtime from your html/js. No node.js
environment, no (webpack) build step needed.
vue3-sfc-loader will parse your .vue file at runtime and create a ready-to-use Vue component.
disclamer: author here
Could you try something as simple as an S3 bucket setup for web serving? How big is your project? How much traffic do you think you'll get? If it's very small, you may be able to host on S3 and use webpack, etc.
I've been using 'yo express' command and choose MVC , jade , grunt ....
Everything is working fine and now I'm managing to deploy my app.
Now I only know two commands to start my app
grunt
node app.js
If I run "grunt" command on my production server , it will enable livereload server , which is good for development but not production.
I think maybe grunt can help me to do optimization but I couldn't find it. I saw webpack is a good choice but it's too difficult for me to use it.
Is there any way to do optimization ( like compress js css ) or other tasks for deploying on my 'yo express' generated app?
Thanks.
Normally there is no need to minify your server side js file because this only reduced the loading time for the browser which here isn't the case. To run nodejs in productin you could look at a a process manager like pm2. To build your client side files for production you might have to extend your grunt setup by yourself or use a second yo generator for your frontend part of the application.
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.
I am just getting started with nodejs and I'm trying to understand how everything works...and I'm getting trouble. Please forgive me in advance for the number of questions and the confusion it could generate.
What I'd like to set up is a nodejs server using express, mongodb, passeport, jade, foundation5 with sass and compass, socketio and html boilerplate.It seems to me as a "regular" project but for some reason I couldn't find any skeleton or generator like the one's yeoman provide for it. Is there a key problem with this architecture ?
If I got it correctly, compass is a set of tools for sass but if you go to the foundation website. Either you can install compass with foundation or either grunt with foundation and sass but not foundation with compass and grunt.
Is there a logic behind that ?
Another solution is to compile the sass files on the nodejs server like this:
var express = require('express'),
compass = require('node-compass'),
path = require('path'),
app = express();
app.configure(function() {
app.use(compass());
app.use('/', express.static(path.join(__dirname, 'public')));
});
app.listen(3000);
On which cases is it better to compile it on the server using a middleware such as compass or node-sass rather than using a grunt command that generate the client plain css file to be deployed ?
Thanks in advance.
Update:
I misunderstood one thing:
libsass, the C version of the popular stylesheet preprocessor, Sass.
It allows you to natively compile .scss files to css at incredible speed
At the time of writing libsass (and therefore Node-sass and therefore grunt-sass) does not support Compass.
source
It explains why you can rather use libsass or compass.
grunt command is more effective method, if you have a lot of visitors, better for you is to compile all style into css by grunt command
Middleware is more flexibility, you can change your styles on the fly, but for each user request, all styles will compile again and again. so your server will work more slowly
I'm using grunt with compass. Don't forget to install the grunt-contrib-compass nodes module!
npm install grunt-contrib-compass --save-dev
Here's my gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
compass: {
dist: {
options: {
specify: 'library/scss/style.scss',
outputStyle: 'compressed',
sassDir: 'library/scss',
cssDir: 'library/css'
},
}
},
watch: {
// grunt: { files: ['Gruntfile.js'] },
css: {
// files: '**/*.scss',
files: 'library/scss/style.scss',
tasks: ['compass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
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