Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Example of how I used Grunt with Durandal
module.exports = function (grunt) {
grunt.initConfig({
clean: ['css/style.min.css', 'app/main-built.js'],
concat: {
css: {
src: ['css/style.css'],
dest: 'css/temp.css'
}
},
cssmin: {
css: {
src: 'css/style.css',
dest: 'css/style.min.css'
}
},
watch: {
karma: {
files: ['app/js/**/*.js', 'test/browser/**/*.js'],
tasks: ['karma:unit:run'] //NOTE the :run flag
}
},
'string-replace': {
dist: {
files: {
'app/main.js': 'app/main.js',
'Home.aspx': 'Home.aspx'
},
options: {
replacements: [{
pattern: /urlArgs: \'v=\d+\'/ig,
replacement: function (match, p1, offset, string) {
grunt.log.write("previous: " + match + "\n");
var newurlArgs = "urlArgs: 'v=" + (new Date()).getTime() + "'";
grunt.log.write("new: " + newurlArgs + "\n");
return newurlArgs;
}
},
{
pattern: /src=\"lib\/require\/require.min.js\"/ig,
replacement: 'src="app/main-built.js"'
}]
}
},
dev: {
files: {
'app/main.js': 'app/main.js',
'Home.aspx': 'Home.aspx'
},
options: {
replacements: [{
pattern: /urlArgs: \'v=\d+\'/ig,
replacement: function (match, p1, offset, string) {
grunt.log.write("previous: " + match + "\n");
var newurlArgs = "urlArgs: 'v=" + (new Date()).getTime() + "'";
grunt.log.write("new: " + newurlArgs + "\n");
return newurlArgs;
}
},
{
pattern: /src=\"app\/main-built.js\"/ig,
replacement: 'src="lib/require/require.min.js"'
}]
}
}
},
requirejs: {
compile: {
options: {
name: 'main',
baseUrl: "app",
mainConfigFile: "app/main.js",
out: 'app/main-built.js',
optimize: 'uglify2', //or none
paths: {
'requireLib': "../lib/require/require"
}
}
}
},
karma: { //https://github.com/karma-runner/grunt-karma
unit: {
configFile: 'karma.conf.js',
watch: true
},
//continuous integration mode: run tests once in PhantomJS browser.
integ: {
configFile: 'karma.conf.js',
singleRun: true,
browsers: ['PhantomJS']
}
}
});
grunt.registerTask("jsoptimizer", "", function () {
var filesToInclude = grunt.file.expand({ cwd: "app" }, "**/*.{js,html}");
filesToInclude = filesToInclude.map(function (i) {
if (i.slice(-3) === ".js") {
return i.slice(0, -3);
}
return "text!" + i; //converting html templates to be text bang
});
filesToInclude.unshift("main");
filesToInclude.unshift("text");
filesToInclude.unshift("requireLib");
//grunt.log.write(filesToInclude);
grunt.config.set('requirejs.compile.options.include', filesToInclude); //modules to be optimized
grunt.task.run("requirejs");
});
//grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-string-replace');
grunt.loadNpmTasks('grunt-contrib-requirejs');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-karma');
grunt.registerTask('test', ['karma:unit']); //continuous
grunt.registerTask('integ', ['karma:integ']); //run once
//run this for deploy, etc... the main-built must be checked out.
grunt.registerTask('dev', ['string-replace:dev']);
//grunt.registerTask('dist', ['clean', 'concat:css', 'cssmin:css', 'jsoptimizer', 'targethtml:dist']);
//cssmin is broken in IE, leaving off semi-colons - for now we are going to ignore the css **
grunt.registerTask('dist', ['clean', 'string-replace:dist', 'jsoptimizer']);
};
{
"name": "Your Project",
"version": "0.0.0",
"description": "",
"main": "",
"author": "AIS",
"license": "",
"devDependencies": {
"grunt-cli": "~0.1.9",
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.7.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-cssmin" : "~0.6.2",
"grunt-contrib-concat" : "~0.3.0",
"grunt-contrib-watch" : "~0.5.3",
"grunt-contrib-clean" : "~0.5.0",
"grunt-contrib-copy" : "~0.5.0",
"grunt-string-replace" : "~0.2.7",
"grunt-karma": "~0.8.2",
"karma": "~0.12.1",
"karma-ie-launcher" : "~0.1.2",
"karma-jasmine" : "~0.1.5",
"karma-requirejs" : "~0.2.1",
"phantomjs" : "~1.9.7-1",
"karma-phantomjs-launcher": "~0.1.2"
}
}
This is optional, but I wanted to have a solution within Visual Studio - here is my post-build event. Note, I had to set the readonly flag because of the TFS issue of making the file readonly. (ugh, I can't stand TFS...)
cd $(ProjectDir)
powershell.exe "Set-ItemProperty Home.aspx -name IsReadOnly -value $false"
if "$(ConfigurationName)" == "Release" (
cd $(ProjectDir)app
powershell.exe "Set-ItemProperty main-built.js -name IsReadOnly -value $false"
cd $(ProjectDir)css
powershell.exe "Set-ItemProperty style.min.css -name IsReadOnly -value $false"
cd $(ProjectDir)
grunt.cmd dist
)
if "$(ConfigurationName)" == "Debug" (
cd $(ProjectDir)
grunt.cmd dev
Owner

sgentile commented Apr 24, 2014

The key items here are the requirejs section, the clean section, and the jsoptimizer. The clean section clears out the file because the requirejs was appending each time, so I set this up to remove the file so that requirejs will re-create it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment