From f79314ea2b601712039d7f61810384d27fb85d1d Mon Sep 17 00:00:00 2001 From: Saurabh Kumar Date: Fri, 10 Jan 2014 02:33:28 +0530 Subject: [PATCH] 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`. --- README.rst | 13 +-- {{cookiecutter.repo_name}}/.gitignore | 8 +- {{cookiecutter.repo_name}}/Gruntfile.js | 101 ++++++++++++++++++ {{cookiecutter.repo_name}}/README.rst | 14 ++- {{cookiecutter.repo_name}}/package.json | 17 +++ .../static/css/project.css | 11 +- .../static/fonts/.gitkeep | 0 .../static/images/.gitkeep | 0 .../static/scss/project.scss | 33 ++++++ 9 files changed, 183 insertions(+), 14 deletions(-) create mode 100644 {{cookiecutter.repo_name}}/Gruntfile.js create mode 100644 {{cookiecutter.repo_name}}/package.json create mode 100644 {{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/fonts/.gitkeep create mode 100644 {{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/images/.gitkeep create mode 100644 {{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/scss/project.scss diff --git a/README.rst b/README.rst index 14bdecc4..0a679baf 100644 --- a/README.rst +++ b/README.rst @@ -17,6 +17,7 @@ Features * Procfile for deploying to Heroku * Heroku optimized requirements * Basic caching setup +* Grunt build for compass and livereload Constraints ----------- @@ -54,12 +55,12 @@ It prompts you for questions. Answer them:: Receiving objects: 100% (550/550), 127.66 KiB | 58 KiB/s, done. Resolving deltas: 100% (283/283), done. project_name (default is "project_name")? redditclone - repo_name (default is "repo_name")? redditclone + repo_name (default is "repo_name")? redditclone author_name (default is "Your Name")? Daniel Greenfeld email (default is "Your email")? pydanny@gmail.com description (default is "A short description of the project.")? A reddit clone. year (default is "Current year")? 2013 - domain_name (default is "Domain name")? + domain_name (default is "Domain name")? Enter the project and take a look around:: @@ -90,14 +91,14 @@ Releases Want a stable release? You can find them at https://github.com/pydanny/cookiecutter-django/releases -**note**: Cookiecutter won't support tagged releases until 0.7.0 comes out, which should be any day! Which means, if you want to use a +**note**: Cookiecutter won't support tagged releases until 0.7.0 comes out, which should be any day! Which means, if you want to use a tagged release of cookiecutter-django, then you have to install Cookiecutter directly from GitHub. To do that, follow these steps: 1. Enter your virtualenv. 2. Run these commands: .. code-block:: bash - + (cookiecutter) $ git clone https://github.com/audreyr/cookiecutter.git (cookiecutter) cd cookiecutter (cookiecutter) python setup.py develop @@ -117,7 +118,7 @@ It's up to you whether or not to rename your fork. If you do rename your fork, I encourage you to submit it to the following places: -* cookiecutter_ so it gets listed in the README as a template. +* cookiecutter_ so it gets listed in the README as a template. * The cookiecutter grid_ on Django Packages. .. _cookiecutter: https://github.com/audreyr/cookiecutter @@ -127,4 +128,4 @@ Or Submit a Pull Request ~~~~~~~~~~~~~~~~~~~~~~~~~ I also accept pull requests on this, if they're small, atomic, and if they make my own project development -experience better. +experience better. diff --git a/{{cookiecutter.repo_name}}/.gitignore b/{{cookiecutter.repo_name}}/.gitignore index 92d6be51..655dcb48 100644 --- a/{{cookiecutter.repo_name}}/.gitignore +++ b/{{cookiecutter.repo_name}}/.gitignore @@ -23,4 +23,10 @@ nosetests.xml *~ *.swp -*.swo \ No newline at end of file +*.swo + +# npm +node_modules/ + +# Campass +.sass-cache diff --git a/{{cookiecutter.repo_name}}/Gruntfile.js b/{{cookiecutter.repo_name}}/Gruntfile.js new file mode 100644 index 00000000..66c3b40e --- /dev/null +++ b/{{cookiecutter.repo_name}}/Gruntfile.js @@ -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' + ]); +}; diff --git a/{{cookiecutter.repo_name}}/README.rst b/{{cookiecutter.repo_name}}/README.rst index b2bd4a0f..07848f01 100644 --- a/{{cookiecutter.repo_name}}/README.rst +++ b/{{cookiecutter.repo_name}}/README.rst @@ -40,11 +40,21 @@ Developer Installation For getting this running on your local machine: -1. Set up a virtualenv. +1. Set up a virtualenv. 2. Install all the supporting libraries into your virtualenv:: 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 diff --git a/{{cookiecutter.repo_name}}/package.json b/{{cookiecutter.repo_name}}/package.json new file mode 100644 index 00000000..dca3d507 --- /dev/null +++ b/{{cookiecutter.repo_name}}/package.json @@ -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" + } +} diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/css/project.css b/{{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/css/project.css index e6f35107..f4873dd6 100644 --- a/{{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/css/project.css +++ b/{{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/css/project.css @@ -1,33 +1,34 @@ -/*! 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; border-color: #eed3d7; -} \ No newline at end of file +} diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/fonts/.gitkeep b/{{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/fonts/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/images/.gitkeep b/{{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/images/.gitkeep new file mode 100644 index 00000000..e69de29b diff --git a/{{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/scss/project.scss b/{{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/scss/project.scss new file mode 100644 index 00000000..99554ec2 --- /dev/null +++ b/{{cookiecutter.repo_name}}/{{cookiecutter.project_name}}/static/scss/project.scss @@ -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; +}