feat(grunt): Add grunt task runner.

* Livereload server.
* Auto compile scss files.

* Heroku python buildpack needs to be specified explicitly to avoid auto detections
of the app as a `Node` app due to presence of `Package.json`.
This commit is contained in:
Saurabh Kumar 2014-01-10 02:33:28 +05:30
parent e6a8827992
commit f79314ea2b
9 changed files with 183 additions and 14 deletions

View File

@ -17,6 +17,7 @@ Features
* Procfile for deploying to Heroku
* Heroku optimized requirements
* Basic caching setup
* Grunt build for compass and livereload
Constraints
-----------

View File

@ -24,3 +24,9 @@ nosetests.xml
*~
*.swp
*.swo
# npm
node_modules/
# Campass
.sass-cache

View File

@ -0,0 +1,101 @@
module.exports = function (grunt) {
var appConfig = grunt.file.readJSON('package.json');
// Load grunt tasks automatically
// see: https://github.com/sindresorhus/load-grunt-tasks
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
// see: https://npmjs.org/package/time-grunt
require('time-grunt')(grunt);
var pathsConfig = function (appName) {
this.app = appName || appConfig.name;
return {
app: this.app,
templates: this.app + '/templates',
css: this.app + '/static/css',
scss: this.app + '/static/scss',
fonts: this.app + '/static/fonts',
images: this.app + '/static/images',
js: this.app + '/static/js',
manageScript: this.app + '/manage.py'
}
};
grunt.initConfig({
paths: pathsConfig(),
pkg: appConfig,
// see: https://github.com/gruntjs/grunt-contrib-watch
watch: {
gruntfile: {
files: ['Gruntfile.js']
},
compass: {
files: ['<%= paths.scss %>/**/*.{scss,sass}'],
tasks: ['compass:server']
},
livereload: {
files: [
'<%= paths.js %>/**/*.js',
'<%= paths.scss %>/**/*.{scss,sass}',
'<%= paths.app %>/**/*.html'
],
options: {
spawn: false,
livereload: true,
},
},
},
// see: https://github.com/gruntjs/grunt-contrib-compass
compass: {
options: {
sassDir: '<%= paths.scss %>',
cssDir: '<%= paths.css %>',
fontsDir: '<%= paths.fonts %>',
imagesDir: '<%= paths.images %>',
relativeAssets: false,
assetCacheBuster: false,
raw: 'Sass::Script::Number.precision = 10\n'
},
dist: {
options: {
environment: 'production'
}
},
server: {
options: {
// debugInfo: true
}
}
},
// see: https://npmjs.org/package/grunt-bg-shell
bgShell: {
_defaults: {
bg: true
},
runDjango: {
cmd: 'python <%= paths.manageScript %> runserver'
}
}
});
grunt.registerTask('serve', [
'bgShell:runDjango',
'watch'
]);
grunt.registerTask('build', [
'compass:dist'
]);
grunt.registerTask('default', [
'build'
]);
};

View File

@ -45,6 +45,16 @@ For getting this running on your local machine:
pip install -r requirements/local.txt
3. Install Grunt Dependencies.
npm install
4. Run development server. (For browser auto-reload, use Livereload_ plugins.)
grunt serve
.. _livereload: https://github.com/gruntjs/grunt-contrib-watch#using-live-reload-with-the-browser-extension
Deployment
------------
@ -53,7 +63,7 @@ Run these commands to deploy the project to Heroku:
.. code-block:: bash
heroku create
heroku create --buildpack https://github.com/heroku/heroku-buildpack-python
heroku addons:add heroku-postgresql:dev
heroku addons:add pgbackups
heroku addons:add sendgrid:starter

View File

@ -0,0 +1,17 @@
{
"name": "{{cookiecutter.project_name}}",
"version": "{{ cookiecutter.version }}",
"dependencies": {},
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-watch": "~0.5.3",
"grunt-bg-shell": "~2.3.1",
"connect-livereload": "~0.3.2",
"grunt-contrib-compass": "~0.7.0",
"time-grunt": "~0.2.7",
"load-grunt-tasks": "~0.2.1"
},
"engines": {
"node": ">=0.8.0"
}
}

View File

@ -1,31 +1,32 @@
/*! project specific CSS goes here. */
/* bootstrap alert CSS, translated to the django-standard levels of
** debug, info, success, warning, error */
/* line 5, ../scss/project.scss */
.alert-debug {
color: black;
background-color: white;
border-color: #d6e9c6;
}
/* line 11, ../scss/project.scss */
.alert-info {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
/* line 17, ../scss/project.scss */
.alert-success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
/* line 23, ../scss/project.scss */
.alert-warning {
color: black;
background-color: orange;
border-color: #d6e9c6;
}
/* line 29, ../scss/project.scss */
.alert-error {
color: #b94a48;
background-color: #f2dede;

View File

@ -0,0 +1,33 @@
// project specific CSS goes here
// bootstrap alert CSS, translated to the django-standard levels of
// debug, info, success, warning, error
.alert-debug {
color: black;
background-color: white;
border-color: #d6e9c6;
}
.alert-info {
color: #3a87ad;
background-color: #d9edf7;
border-color: #bce8f1;
}
.alert-success {
color: #468847;
background-color: #dff0d8;
border-color: #d6e9c6;
}
.alert-warning {
color: black;
background-color: orange;
border-color: #d6e9c6;
}
.alert-error {
color: #b94a48;
background-color: #f2dede;
border-color: #eed3d7;
}