Develop Reference

How to run multiple Grunt scripts in the background together?

grunt.registerTask('dev', ['browserSync:dev', 'webpack', 'watch']);
this is my Grunt-Dev script that I need running while developing. It is run to do three things.
1) Watch SCSS files for changes then compile them to CSS (watch + sass)
2) Start a liveserver with BrowserSync which has reloading built in
3) Run a webpack script that watches for changes to js files, and recompiles them into a bundle.js whenever there are changes
All of these work, however, I do not want to have three command prompts open every time and have to type out each command. Instead, having them all run with one grunt script is the goal
its 75% working. I can have SASS/watch + BrowserSync going at the same time with
grunt.registerTask('dev', ['browserSync:dev', 'watch']);
This works because BrowserSync has a watchtask: true option which means that it will run "in the background". But adding in the third script (webpack) I would need either watch or webpack to have an option like that as well. Because right now, no matter where I place webpack script, either it or the watch scrip will act as a wall for other scripts to run
here is the full Grunt scripts for reference
webpack: {
myconfig: function() {
return {
entry: './app/src/js/App.jsx',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'app/src')
},
watch: true,
mode: 'production',
devtool: "source-map"
};
}
},
browserSync: {
dev : {
bsFiles: {
src : ['app/**/*', '!app/src/js/*.js', '!**/*.scss']
},
options: {
server: {
baseDir: "./app"
},
watchTask: true,
notify: false
}
}
},
sass: {
dist: {
options:{
},
files: [{
expand: true,
cwd: 'app/scss',
src: ['theme.scss'],
dest: 'app/',
ext: '.css'
}]
}
},
watch: {
scripts: {
files: '**/*.scss',
tasks: ['sass'],
options: {
spawn: false
},
},
},

Using Grunt Serve to show website on localhost?

I've built Gruntfiles in the past, but mostly to compile Less and Jade, so this steps a bit out of my comfort zone and I'm struggling to figure out what to do.
I'd like to use the Gruntfile to:
Compile Jade to html
Compile Less to css
Build and show website at localhost:9000
Refresh localhost:9000 upon save of file (this uses grunt watch I'm assuming?)
Basically, I'd like to keep it light and easy, so that once I learn I can use it to teach others that I know. :)
Here's what my Gruntfile looks like so far. I have grunt-serve in there, but nothing loads to the page when I run it, so I'm really confused. Thanks for the help!
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-jade');
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.initConfig({
jade: {
compile: {
options: {
client: false,
pretty: true
},
files: [ {
cwd: "assets/views",
src: "**/*.jade",
dest: "public",
expand: true,
ext: ".html"
} ]
}
},
less: {
development: {
options: {
compress: true,
yuicompress: true,
optimization: 2
},
files: {
// target.css file: source.less file
'public/css/main.css': 'assets/less/main.less',
}
}
},
watch: {
styles: {
files: [
'less/main.less',
],
tasks: ['less'],
options: {
nospawn: true
}
}
},
serve: {
options: {
port: 9000
}
}
});
grunt.registerTask('default', ['jade','less']);
grunt.loadNpmTasks('grunt-serve');
};

I think your build task is running jade and less, but not serve. Instead of
grunt.registerTask('default', ['jade','less']);
try
grunt.registerTask('default', ['jade','less','serve']);

Grunt Livereload not showing HTML changes

On my MEAN stack application, I'm trying make changes to the HTML view files and see those changes as I make them using Grunt's livereload.
Grunt's livereload is working fine in the sense that it detects changes in my HTML files and refreshes the page during development. However, the actual changes are not reflecting on the page. If I push the files up the server, and reload the publicly available site, the changes are there. But I still can't see the changes while I'm developing.
I'm 99% sure that the problem has to do with the server is using the "build" files or something rather than the files located in the /public folder. However, I'm new to using the back-end and the MEAN stack and can't figure out what file the browser is showing or where this file is. Could anyone give any guidance on how to figure out what file the browser is displaying and what I can do to show HTML changes I make as I make them?
Here is my gruntfile if this helps. The below files I'm making changes to are watchFiles.clientViews.
'use strict';
module.exports = function(grunt) {
// Unified Watch Object
var watchFiles = {
serverViews: ['app/views/**/*.*'],
serverJS: ['gruntfile.js', 'server.js', 'config/**/*.js', 'app/**/*.js'],
clientViews: ['public/modules/**/views/**/*.html'],
clientJS: ['public/js/*.js', 'public/modules/**/*.js'],
clientCSS: ['public/modules/**/*.css'],
mochaTests: ['app/tests/**/*.js']
};
// Project Configuration
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options: { livereload: true },
serverViews: {
files: [watchFiles.serverViews],
options: {
livereload: true
}
},
serverJS: {
files: watchFiles.serverJS,
tasks: ['jshint'],
options: {
livereload: true
}
},
clientViews: {
files: watchFiles.clientViews,
options: {
livereload: true,
}
},
clientJS: {
files: watchFiles.clientJS,
tasks: ['jshint'],
options: {
livereload: true
}
},
clientCSS: {
files: watchFiles.clientCSS,
tasks: ['csslint'],
options: {
livereload: true
}
}
},
jshint: {
all: {
src: watchFiles.clientJS.concat(watchFiles.serverJS),
options: {
jshintrc: true
}
}
},
csslint: {
options: {
csslintrc: '.csslintrc',
},
all: {
src: watchFiles.clientCSS
}
},
uglify: {
production: {
options: {
mangle: false
},
files: {
'public/dist/application.min.js': 'public/dist/application.js'
}
}
},
cssmin: {
combine: {
files: {
'public/dist/application.min.css': '<%= applicationCSSFiles %>'
}
}
},
nodemon: {
dev: {
script: 'server.js',
options: {
nodeArgs: ['--debug'],
ext: 'js,html',
watch: watchFiles.serverViews.concat(watchFiles.serverJS)
}
}
},
'node-inspector': {
custom: {
options: {
'web-port': 1337,
'web-host': 'localhost',
'debug-port': 5858,
'save-live-edit': true,
'no-preload': true,
'stack-trace-limit': 50,
'hidden': []
}
}
},
ngAnnotate: {
production: {
files: {
'public/dist/application.js': '<%= applicationJavaScriptFiles %>'
}
}
},
concurrent: {
default: ['nodemon', 'watch'],
debug: ['nodemon', 'watch', 'node-inspector'],
options: {
logConcurrentOutput: true,
limit: 10
}
},
env: {
test: {
NODE_ENV: 'test'
}
},
mochaTest: {
src: watchFiles.mochaTests,
options: {
reporter: 'spec',
require: 'server.js'
}
},
karma: {
unit: {
configFile: 'karma.conf.js'
}
}
});
// Load NPM tasks
require('load-grunt-tasks')(grunt);
// Making grunt default to force in order not to break the project.
grunt.option('force', true);
// A Task for loading the configuration object
grunt.task.registerTask('loadConfig', 'Task that loads the config into a grunt option.', function() {
var init = require('./config/init')();
var config = require('./config/config');
grunt.config.set('applicationJavaScriptFiles', config.assets.js);
grunt.config.set('applicationCSSFiles', config.assets.css);
});
// Default task(s).
grunt.registerTask('default', ['lint', 'concurrent:default']);
// Debug task.
grunt.registerTask('debug', ['lint', 'concurrent:debug']);
// Lint task(s).
grunt.registerTask('lint', ['jshint', 'csslint']);
// Build task(s).
grunt.registerTask('build', ['lint', 'loadConfig', 'ngAnnotate', 'uglify', 'cssmin']);
// Test task.
grunt.registerTask('test', ['env:test', 'mochaTest', 'karma:unit']);
};
In addition, here is the file structure to my MEAN stack. The highlighted below is where the HTML file that I'm making changes to is located.
Please let me know if there is any other code or info I could provide that would make solving this problem easier. Thank you.
Update: Content of Server.js
Here is my server.js content:
'use strict';
/**
* Module dependencies.
*/
var init = require('./config/init')(),
config = require('./config/config'),
mongoose = require('mongoose');
/**
* Main application entry file.
* Please note that the order of loading is important.
*/
// Bootstrap db connection
var db = mongoose.connect(config.db, function(err) {
if (err) {
console.error('\x1b[31m', 'Could not connect to MongoDB!');
console.log(err);
}
});
// Init the express application
var app = require('./config/express')(db);
// Bootstrap passport config
require('./config/passport')();
// Start the app by listening on <port>
app.listen(config.port);
// Expose app
exports = module.exports = app;
// Logging initialization
console.log('MEAN.JS application started on port ' + config.port);

It's hard to tell exactly what your "server.js" is serving without seeing the contents of it, but if my assumption is correct and you are serving the contents of the "public" directory, you don't have any sort of task being fired by watch that facilitates copying the contents of your changed files into your "public" directory. It looks like this happens initially when your server is started (by running the build task), but not run subsequently whenever something is changed.
I would suggest modifying your watch tasks to perform some of the build-related tasks on your files as they are changed. Since your build-related tasks are physically copying the changes to the "public" directory for you as part of their jobs, you should finally see the results of your changes. Here's an example of your watch task list that's modified to copy your JS and CSS files on change:
watch: {
options: { livereload: true },
serverViews: {
files: [watchFiles.serverViews],
options: {
livereload: true
}
},
serverJS: {
files: watchFiles.serverJS,
tasks: ['jshint', 'loadConfig', 'ngAnnotate', 'uglify'],
options: {
livereload: true
}
},
clientViews: {
files: watchFiles.clientViews,
options: {
livereload: true,
}
},
clientJS: {
files: watchFiles.clientJS,
tasks: ['jshint', 'loadConfig', 'ngAnnotate', 'uglify'],
options: {
livereload: true
}
},
clientCSS: {
files: watchFiles.clientCSS,
tasks: ['csslint', 'cssmin'],
options: {
livereload: true
}
}
},
One last thing: Assuming your views don't need to have any modifications done to them post-change, you can simply straight-up copy them to the public directory when they are changed. Take a look at grunt-contrib-copy for doing simple file copying between directories.

I was facing the same issue and solved it by disabling the cache in the network tab
Go to Inspect -> Network and make sure disable cache is checked.
Hope this helps someone in future :)

exporting TypeScript modules for browserify

I've recently converted a canvas library I wrote into typescript. I've broken the code down into classes and they all attach themselves to a cnvs module, but i'm have a hard time compiling these down to one file.
Ideally I would like to have my files run through browserify, but at the moment i just want to get it working.
One file may look like
module cnvs {
export class Shape {
// stuff here
}
}
and then another would be
/// <reference path="Shape.ts" />
module cnvs {
export class Rect extends Shape {
// rectangle stuff here
}
}
Originally I was using import Shape = require('./Shape') (with some variants, like including extension and not including leading './')
In my cnvs.ts file I would to export the cnvs module, so that when it compiles I have a single file with the entire code base in, attaching to the window OR multiple files that could then be compiled with browserify into a single file.
The full code is at http://github.com/allouis/cnvs
Thanks

Checkout out typeify:
https://github.com/bodil/typeify
Please note it run on node.js.

You can simply compile the whole project using using --out out.js typescript compiler argument. This will merge all your files for you and generate an out.js.
One thing to be aware of is that the order of code in the arguments. Check out https://github.com/basarat/grunt-ts#javascript-generation-and-ordering

I use browserify & ```typescriptifier``'...
So you would do:
/// <reference path="Shape.ts" />
...
require("Shape.ts");
This is some of my gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
clean: {
dev: ['dest/**/*.*']
},
browserify: {
dev: {
src: ['src/root.ts'],
dest: 'dest/App.js',
options: {
external: ['angular'],
transform: ['typescriptifier'],
debug: true,
bundleOptions: { debug: true },
browserifyOptions: { debug: true }
}
}
},
express: {
dev: {
options: {
bases: ['src'],
port: 5000,
hostname: '0.0.0.0',
livereload: false
}
}
},
watch: {
ts: {
files: ['src/**/*.ts', '!src/**/*.d.ts'],
tasks: ['dest'],
options: {
livereload: true,
debug: false,
debounceDelay: 100
}
},
html: {
files: ['src/**/*.css', 'src/**/*.html'],
options: {
livereload: true,
debug: false,
debounceDelay: 100,
spawn: false
}
}
}
});
grunt.loadNpmTasks('grunt-express');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.registerTask('dev', ['rebuild', 'express:dev', 'watch' ]);
grunt.registerTask('build', ['browserify:dev']);
grunt.registerTask('rebuild', ['clean:dev', 'build']);
};
See
https://www.npmjs.org/package/typescriptifier

LiveReload with Grunt?

I've consulted this answer as a starting point, in addition to the watch github page.
My watch task looks like this:
watch: {
less: {
files: ['less/**/*.less'],
tasks: ['less'],
options: {
livereload: true
}
},
handlebars: {
files: ['templates/**/*.hbs'],
tasks: ['handlebars'],
options: {
livereload: true
}
}
}
First I tried with the browser extension, and then later I added this script (and verified that it is loaded) in my index.html
<script src="//localhost:35729/livereload.js"></script>
I also tried adding this to my watch js:
livereload: {
files: ['dev/**/*'],
options: {
livereload: true
}
}
I also have a connect task, and I've tried running grunt with or without it to no avail.
connect: {
dev: {
options: {
port: 35729
}
}
}
And still no live-reload...

this is my Gruntfile.js and my connect version is 0.9.0, this config can use for different livereroad port
module.exports = function (grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);
grunt.initConfig({
watch: {
demo: {
files: ['web/*.*'],
options: {
livereload: 5000
}
},
dev:{
files: ['web1/*.*'],
options: {
livereload: 3030
}
}
},
connect: {
demo: {
options: {
base: "web",
port: 1111,
hostname: '*',
livereload: 5000,
open: {
target: 'http://127.0.0.1:1111'
}
}
},
dev:{
options: {
base: "web1",
port: 2222,
hostname: '*',
livereload: 3030,
open: {
target: 'http://127.0.0.1:2222'
}
}
}
}
})
grunt.registerTask('demo', ['connect:demo', 'watch:demo']);
grunt.registerTask('dev',['connect:dev','watch:dev']);
}

Does this work?
watch: {
options: { livereload: true },
less: {
files: ['less/**/*.less'],
tasks: ['less']
},
//...
}
Also try running in verbose mode (grunt do-something -v) to check that the livereload server starts and that the port is correct.

Watch has worked for me out of the box, without livereload. Have you tried removing the livereload options and the script include?
Then: grunt; grunt watch
(the default task does the build, then watch keeps an eye out for changes)