foundation 5 with compass and nodejs - node.js

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']);
}

Related

Using NPM module in Backbone with RequireJS

Hejsa,
I'm writing a webapp, which consists of a Node backend (Express server), which serves a Backbone app to the clients.
The Backbone app uses RequireJS to load the modules used.
I would like to use Ag-grid clientside, which can be included as an NPM module.
https://www.ag-grid.com/javascript-grid-getting-started/index.php
How can I reference this NPM module from Backbone?
Project structure
./node_modules
./src/package.json
./src/app (Node backend + Express server)
./src/public
./src/public/main.coffee (contains requireJs config)
./src/public/scripts (Backbone views, models, etc)
main.coffee
require.config
baseUrl: '../scripts/'
paths:
jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min'
jqueryui: '//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min'
underscore: '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min'
...
I would like to include the ag-grid NPM module here, but without having to reference the very top ./node_modules folder as ../../../node_modules/ag-grid/dist/ag-grid (didn't count the levels..).
Also, I'd like if possible to avoid a second package.js, and a secondary npm install
Any help related specifically to this project structure?
Secondarily, is there any better way to structure such a project? (Node backend serving a Backbone webapp)
Thanks
You guessed it and using a relative path all the way to the node_modules directory is the way to go.
requirejs.config({
paths: {
"ag-grid": "../../../node_modules/ag-grid/dist/ag-grid",
"backbone": "../../../node_modules/backbone/backbone"
}
});
define(["backbone", "ag-grid"], function(Backbone, agGrid) {
// whatever
});
You could also use npm for all the dependencies and bundle an optimized version of your app using the RequireJS optimizer (r.js).
Personally, I use npm for the development of the project and for server-side (node) dependencies. For my Backbone app, I use Bower as it's specialized in front-end dependencies management.
I have a .bowerrc file that tells bower where to install the dependencies:
{
"directory": "src/lib",
}
And a Gulp task which calls bower install:
var bower = require("bower"),
$ = require('gulp-load-plugins')({ lazy: true }),
gulp = require("gulp");
gulp.task('bower', function() {
return bower.commands.install()
.on('log', function(data) {
$.util.log('bower', $.util.colors.cyan(data.id), data.message);
});
});
this task is called automatically after npm install with a npm hook:
"scripts": {
// ...
"postinstall": "gulp install"
}
Take a look at simplified-js-project, a sample project which shows my development tools around a Backbone and RequireJs project.

Gulp: Trouble setting browserSync and Watch

I'm learning Gulp and NPM and decided to test myself by using Browser-Sync with a PHP project I'm working on (using XAMPP). I know Browser-Sync doesnt work with PHP files, but I wanted to use it with my .css files (and later on perhaps add Sass).
I installed npm, Gulp, Gulp-watch and Browser Sync to my project's root directory and all seemed fine.
I then created a gulp.js file with the following:
var gulp = require('gulp'),
watch = require('gulp-watch'),
browserSync = require('browser-sync').create();
gulp.task('watch', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
watch('css/*.css', function() {
browserSync.reload();
});
});
However, when I gulp watch a new browser window does open but just shows the Cannot GET / error.
Also, the URL shows http://localhost:3002/ rather than http://localhost:myproejct
I read this may have something to do with my baseDir so tried:
baseDir: ""
baseDir: "./"
baseDir: "../myproject"
Would anyone know what I've done wrong?
You are doing way more than is necessary to do what you want. You can just use browsersync as a proxy layer over the top of your hosted site.
See the following example from the docs
# Proxy a PHP app + serve static files & watch them
$ browser-sync start --proxy 'mylocal.dev' --serveStatic 'public' --files 'public'
I think this is what you will need, run it from the physical root of your site and replace mylocal.dev with your php server address
npm install browser-sync -g
browser-sync start --proxy 'mylocal.dev' --serveStatic 'css' --files 'css/*.css'
Your code works fine for me. Assuming your target HTML file works if opened in the browser manually: One common cause of the Cannot Get/ error is using an index file other than Browsersync's default expectation, index.html. Could that be the problem you're having? If you need a custom index file, you can set the index option:
browserSync.init({
server: {
baseDir: 'mybasedirectorypath',
index: 'notindex.html'
}
});
Fwiw, you can also do this more efficiently, and save yourself the weight of installing gulp-watch (this example adapted and simplified from this Browsersync docs example):
var gulp = require('gulp'),
browserSync = require('browser-sync').create();
gulp.task('watch', function() {
browserSync.init({
server: {
baseDir: './'
}
});
gulp.watch('css/*.css').on('change',browserSync.reload)
});
As for using a custom url, check out https://github.com/BrowserSync/browser-sync/issues/646 which has some solutions.

Sails.js + apidocjs + grunt - auto generate documentation

I'm new to Sails.js and Node.js and I have problems with creating documentation for my application.
Here's my steps:
installed apidoc by:
npm install apidoc -g
installed grunt module:
npm install grunt-apidoc --save-dev
added grunt.loadNpmTasks('grunt-apidoc'); to Gruntfile.js at the bottom
created grunt.initConfig file and put:
apidoc: {
myapp: {
src: "api/controllers/",
dest: "apidoc/"
}
}
Then I'm trying to run multiple things, and none of them produces my api documentation:
sails lift
grunt
grunt default
node app.js
If I run it manually by apidoc -i api/controllers/ -o apidoc/ it's working properly.
What am I doing wrong? How to do it?
Super late answer!
From my experience modifying the asset pipeline you'd be better off:
Install apidoc and the Grunt module as in the Question
Create a new file in `tasks/config/apidoc.js:
module.exports = function (grunt) {
grunt.config.set('apidoc', {
myapp: {
src: "api/controllers/",
dest: "apidoc/"
}
});
grunt.loadNpmTasks('grunt-apidoc');
};
Edit tasks/register/compileAssets.js (or wherever you want the task to be run):
module.exports = function (grunt) {
grunt.registerTask('compileAssets', [
'clean:dev',
'jst:dev',
'less:dev',
'copy:dev',
'coffee:dev',
'apidoc:myapp' // <-- This will now run every time your assets are compiled
]);
};
Hope this helps someone

Understanding the mean stack and integrating uglify.js and stylus

I'm just getting started with the MEAN stack (https://github.com/linnovate/mean), so I'm pretty sure my question is going to look very basic to an expert, so my apologies in advance!
While I think it would be a gread addition to what this stack already has to offer, I cannot manage to integrate Uglify.js and stylus
Also someone already asked this, but it would make sense to me to use Jade template for both server and public views, at least for a matter of standardization.
I have tried playing with the grunt file and server.js, renaming some files, but all I managed to achieve so far, is break the original project...
Thanks in advance!
EDIT: Just found a fork of this project which has just added support for jade templates for public views: https://github.com/tutley/mean
This post explains how to integrate Stylus pre-processing to the MEAN stack: http://to-s.tk/integrate-stylus-to-the-mean-stack/
Short version:
Move public/css to a new assets/stylesheets and rename all the .css files to .styl
Install grunt-contrib-stylus through npm's package.json, as both a dev and runtime dependency.
-Configure stylus compilation in your Gruntfile
// ...
grunt.initConfig({
// ...
watch: {
// ...
stylus: {
files: ['assets/stylesheets/**/*.styl'],
tasks: ['stylus']
},
// ...
},
// ...
stylus: {
compile: {
options: {
paths: ['assets/stylesheets/**']
},
files: [{
dest: 'public/css/',
cwd: 'assets/stylesheets/',
src: '*.styl',
ext: '.css',
expand: true
}]
}
},
// ...
});
//...
//Load NPM tasks
// ...
grunt.loadNpmTasks('grunt-contrib-stylus');
// ...
Import views stylus files (or any substylus) in common.styl using #require statements
Remove references to views or other substylesheets in head.jade.
Then all assets/stylesheets/*.styl files should be automatically compiled into public/css/*.css, as long as grunt is running. To trigger a compile without relying on watch, you can run grunt stylus.

Integrating Jade in Yeoman's server/watch/reload tasks

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

Resources