Skip to content

Instantly share code, notes, and snippets.

@szimmers
Last active December 26, 2015 06:09
Show Gist options
  • Save szimmers/7105505 to your computer and use it in GitHub Desktop.
Save szimmers/7105505 to your computer and use it in GitHub Desktop.
an example grunt file for an app framework in angular, with pre-processor targets to work with cordova/phonegap. see README for details.

an example grunt file for an app framework in angular, with pre-processor targets to work with cordova/phonegap.

the framework project itself can be scaffolded out with yeoman, providing the expected directory structure for the scripts and tests. for such a framework, the views folder is empty, and the app.js can be written to provide only the module definitions. the index.html file is unused, as all JS files under scripts are written to framework.js

this particular framework uses pre-processor targets of WEBAPP and NATIVE. the pre-processor can be used to include/exclude entire services, depending on deployed environment.

the default target, in addition to running jshint and the unit tests, will deploy 3 framework files to the top-level 'dist' folder:

  • framework.js, does not run the pre-processor. use this file in your app when the app's grunt file will do the pre-processing step.
  • framework_webapp.js, excludes the native code. use this file in your app when targeting a browser, and the app's grunt file has no pre-processing step.
  • framework_native.js, reverse of the webapp. again, the app's grunt file has no pre-processing step.

also note the npm tasks loaded by the file. ensure those are saved to the package.json file (not included in this gist).

in Gruntfile_fooapp.js, selected bits are included to illustrate how to access the framework.js file(s). The base grunt file is heavily based on the default grunt file scaffolded by yeoman.

Assume a directory structure like this:

  • suite
  • suite/apps
  • suite/apps/fooapp
  • suite/apps/fooapp/dist
  • suite/apps/framework
  • suite/apps/framework/dist
  • suite/native
  • suite/native/fooapp
  • suite/native/fooapp/www (a cordova or phonegap 3.x deploy area)
var mountFolder = function (connect, dir) {
return connect.static(require('path').resolve(dir));
};
module.exports = function(grunt) {
var globalConfig = {
src: 'app',
dist: 'dist'
};
grunt.initConfig({
globalConfig: globalConfig,
jshint: {
options: {
jshintrc: '.jshintrc'
},
all: [
'<%= globalConfig.src %>/scripts/{,*/}*.js'
]
},
clean: {
distwebapp: {
files: [{
dot: true,
src: [
'<%= globalConfig.dist %>/framework_webapp.js'
]
}]
},
distnative: {
files: [{
dot: true,
src: [
'<%= globalConfig.dist %>/framework_native.js'
]
}]
},
distmulti: {
files: [{
dot: true,
src: [
'<%= globalConfig.dist %>/framework.js'
]
}]
},
all: {
files: [{
dot: true,
src: [
'<%= globalConfig.dist %>/*'
]
}]
},
server: '.tmp'
},
concat: {
distwebapp: {
src: ['app/scripts/**/*.js'],
dest: '<%= globalConfig.dist %>/framework_webapp.js',
options: {
separator: ';'
}
},
distnative: {
src: ['app/scripts/**/*.js'],
dest: '<%= globalConfig.dist %>/framework_native.js',
options: {
separator: ';'
}
},
distmulti: {
src: ['app/scripts/**/*.js'],
dest: '<%= globalConfig.dist %>/framework.js',
options: {
separator: ';'
}
}
},
connect: {
options: {
port: 9000,
// Change this to '0.0.0.0' to access the server from outside.
hostname: 'localhost'
},
test: {
options: {
middleware: function (connect) {
return [
mountFolder(connect, '.tmp'),
mountFolder(connect, 'test')
];
}
}
}
},
karma: {
unit: {
configFile: 'karma.conf.js',
singleRun: true
}
},
/**
* Preprocessor
*/
preprocess: {
distwebapp: {
src: [
'<%= globalConfig.dist %>/framework_webapp.js'
],
options: {
inline: true,
context: {
WEBAPP: true
}
}
},
distnative: {
src: [
'<%= globalConfig.dist %>/framework_native.js'
],
options: {
inline: true,
context: {
NATIVE: true
}
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-preprocess');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-karma');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.registerTask('test', [
'clean:server',
'connect:test',
'karma'
]);
/**
* builds the framework pre-processed for webapp. use this for webapp-only apps
* that don't bother with their own preprocessor step.
*/
grunt.registerTask('buildwebapp', [
'clean:distwebapp',
'concat:distwebapp',
'preprocess:distwebapp'
]);
/**
* builds the framework pre-processed for native. use this for native-only apps
* that don't bother with their own preprocessor step.
*/
grunt.registerTask('buildnative', [
'clean:distnative',
'concat:distnative',
'preprocess:distnative'
]);
/**
* builds the framework without pre-processing; the result will require pre-processing before use.
* use this for apps that have webapp and native targets, and include pre-processing in their build.
*/
grunt.registerTask('buildmulti', [
'clean:distmulti',
'concat:distmulti'
]);
grunt.registerTask('build', [
'clean:all',
'buildwebapp',
'buildnative',
'buildmulti'
]);
grunt.registerTask('default', ['jshint', 'build', 'test']);
};
// configurable paths
var yeomanConfig = {
app: 'app',
dist: 'dist',
frameworksrc: '../framework/dist',
nativeappdir: '../../native/fooapp',
lib: 'lib'
};
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= yeoman.dist %>/*',
'!<%= yeoman.dist %>/.git*'
]
}]
},
server: '.tmp',
lib: {
files: [{
dot: true,
src: [
'<%= yeoman.lib %>/*'
]
}]
},
deploy: {
options: {
force: true
},
files: [{
src: [
'<%= yeoman.nativeappdir %>/www/*',
'!<%= yeoman.nativeappdir %>/www/config.xml'
]
}]
}
},
copy: {
...
},
framework: {
expand: true,
flatten: true,
cwd: '<%= yeoman.frameworksrc %>',
src: '**',
dest: '<%= yeoman.app %>/<%= yeoman.lib %>/framework',
filter: 'isFile'
},
deploy: {
expand: 'true',
cwd: 'dist',
src: '**',
dest: '<%= yeoman.nativeappdir %>/www'
}
grunt.registerTask('deploy', [
'clean:deploy',
'copy:deploy'
]);
... following are first 3 tasks under registerTask for server, test, build targets:
'clean:lib',
'clean:server',
'copy:framework',
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment