Add gulp to the generated project

docs/developing-locally.rst

@@ -42,4 +42,31 @@ To send email you need to `configure your email backend`_
 
 In development emails are printed to the console.
 
+**Integrate Gulp to your project**
+
+If you'd like to take advantage of common frontend development tools, you can do so with the included Gulpfile.
+
+Make sure that nodejs_ is installed. Then in the project root run::
+
+    $ npm install
+
+Now you just need::
+
+    $ gulp
+
+The base app will now run as it would with the usual ``manage.py runserver`` but with:
+
+* Live reloading
+* Sass compilation, CSS concatenation and compression
+* JavaScript validation, concatenation and compression
+* Images optimization
+
+all enabled.
+
+.. _nodejs: http://nodejs.org/download/
+
+Optimized files are saved in the dist folder of the generated project which is included in your Django STATICFILES_DIRS.
+
+To read about all included gulp tasks see :ref:`gulp-tasks`.
+
 It's time to write the code!!!

docs/gulp-tasks.rst

@@ -0,0 +1,46 @@
+.. _gulp-tasks:
+
+Included gulp tasks
+===================
+
+The following gulp tasks are available from the default gulpfile:
+
+**Compile and optimize stylesheets**::
+
+    $ gulp styles
+
+**Concatenate and compress JavaScript**::
+
+    $ gulp scripts
+
+**Validate JavaScript**::
+
+    $ gulp jshint
+
+**Optimize images**::
+
+    $ gulp images
+
+**Copy web fonts to the dist folder**::
+
+    $ gulp fonts
+
+**Clean the dist folder**::
+
+    $ gulp clean
+
+**All the previous commands in one**::
+
+    $ gulp dist
+
+**Run the Django development server**::
+
+    $ gulp runserver
+
+**The default task: Run the developement server, watch files for changes and reload the browser when they do**::
+
+    $ gulp
+
+**Clear the cache used by gulp**::
+
+    $ gulp clear-cache

docs/index.rst

@@ -19,6 +19,7 @@ Contents:
    project-generation-options
    developing-locally
    settings
+   gulp-tasks
    faq
 
 

{{cookiecutter.repo_name}}/.gitignore

@@ -57,3 +57,4 @@ node_modules/
 
 # User-uploaded media
 {{ cookiecutter.repo_name }}/media/
+{{ cookiecutter.repo_name }}/dist/

{{cookiecutter.repo_name}}/config/settings/common.py

@@ -178,7 +178,7 @@
 
 # See: https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/#std:setting-STATICFILES_DIRS
 STATICFILES_DIRS = (
-    str(APPS_DIR.path('static')),
+    str(APPS_DIR.path('dist')),
 )
 
 # See: https://docs.djangoproject.com/en/dev/ref/contrib/staticfiles/#staticfiles-finders

{{cookiecutter.repo_name}}/gulpfile.js

@@ -0,0 +1,158 @@
+'use strict';
+
+// Include gulp and tools we'll use
+var gulp = require('gulp');
+var $ = require('gulp-load-plugins')();
+var del = require('del');
+var runSequence = require('run-sequence');
+var browserSync = require('browser-sync');
+var reload = browserSync.reload;
+var exec = require('child_process').exec;
+var notifier = require('node-notifier');
+
+// Configuration used within this gulpfile
+var app = 'helloworld';
+var dist = app + '/dist';
+var config = {
+    css: app + '/static/css/**/*.css',
+    scss: app + '/static/scss/**/*.scss',
+    js: app + '/static/js/**/*.js',
+    fonts: app + '/static/fonts/**/*',
+    images: app + '/static/images/**/*',
+    html: app + '/templates/**/*.html',
+}
+
+// Autoprefixers
+var AUTOPREFIXER_BROWSERS = [
+  'ie >= 10',
+  'ie_mob >= 10',
+  'ff >= 30',
+  'chrome >= 34',
+  'safari >= 7',
+  'opera >= 23',
+  'ios >= 7',
+  'android >= 4.4',
+  'bb >= 10'
+];
+
+function getRelativePath(absPath) {
+    absPath = absPath.replace(/\\/g, '/');
+    var curDir = __dirname.replace(/\\/g, '/');
+    return absPath.replace(curDir, '');
+}
+
+function logUglifyError(error) {
+    this.emit('end');
+    var file = getRelativePath(error.fileName);
+    $.util.log($.util.colors.bgRed('Uglify Error:'))
+    $.util.log($.util.colors.bgMagenta('file: ') + $.util.colors.inverse(file));
+    $.util.log($.util.colors.bgMagenta('line: '+error.lineNumber));
+    //remove path from error message
+    var message = error.message.substr(error.message.indexOf(' ')+1);
+    $.util.log($.util.colors.bgRed(message));
+    notifier.notify({ title: 'Gulp message', message: 'Uglify error!' });
+}
+
+
+function logSASSError(error) {
+    var file = getRelativePath(error.file);
+    $.util.log($.util.colors.bgRed('Sass Error:'))
+    $.util.log($.util.colors.bgMagenta('file: ') + $.util.colors.inverse(file));
+    $.util.log($.util.colors.bgMagenta('line: '+error.line+', column: '+error.column));
+    $.util.log($.util.colors.bgRed(error.message));
+    notifier.notify({ title: 'Gulp message', message: 'SASS Error!' });
+}
+
+
+// Compile, concat, minify and automatically prefix stylesheets
+gulp.task('styles', function() {
+    return gulp.src([config.css, config.scss])
+        .pipe($.sourcemaps.init())
+        .pipe($.sass().on('error', logSASSError))
+        .pipe($.autoprefixer({browsers: AUTOPREFIXER_BROWSERS}))
+        .pipe($.concat('styles.css'))
+        .pipe($.csso())
+        .pipe($.rename({suffix: '.min'}))
+        .pipe($.sourcemaps.write('.'))
+        .pipe(gulp.dest(dist + '/css'))
+        .pipe($.size({title: 'styles'}));
+});
+
+
+// Concat and minify scripts
+gulp.task('scripts', function() {
+    return gulp.src(config.js)
+        .pipe($.sourcemaps.init())
+        .pipe($.concat('scripts.js'))
+        .pipe($.uglify()).on('error', logUglifyError)
+        .pipe($.rename({suffix: '.min'}))
+        .pipe($.sourcemaps.write('.'))
+        .pipe(gulp.dest(dist + '/js'))
+        .pipe($.size({title: 'scripts'}));
+});
+
+
+// Lint JavaScript
+gulp.task('jshint', function() {
+    return gulp.src(config.js)
+        .pipe($.jshint())
+        .pipe($.jshint.reporter('jshint-stylish'));
+});
+
+
+// Optimize images
+gulp.task('images', function() {
+    return gulp.src(config.images)
+        .pipe($.cache($.imagemin({progressive: true, interlaced: true})))
+        .pipe(gulp.dest(dist + '/images'))
+        .pipe($.size({title: 'images'}));
+});
+
+
+// Copy web fonts to dist
+gulp.task('fonts', function() {
+    return gulp.src(config.fonts)
+        .pipe(gulp.dest(dist + '/fonts'))
+        .pipe($.size({title: 'fonts'}));
+});
+
+
+// Clear the cache
+gulp.task('clear-cache', function() {
+    // Clear all cached files
+    $.cache.clearAll();
+});
+
+
+// Delete all generated files
+gulp.task('clean', del.bind(null, [
+    dist + '/css',
+    dist + '/js',
+    dist + '/images',
+    dist + '/fonts'
+]));
+
+
+// Optimize files and save the output to the dist folder
+gulp.task('dist', ['clean'], function(cb) {
+    runSequence('styles', ['jshint', 'scripts', 'images', 'fonts'], cb);
+});
+
+
+// Run Django server
+gulp.task('runserver', function() {
+    var proc = exec('python manage.py runserver');
+});
+
+
+// Optimize files, watch for changes & reload, the default task
+gulp.task('default', ['dist', 'runserver'], function() {
+    browserSync({
+        notify: false,
+        proxy: 'localhost:8000'
+    });
+    gulp.watch([config.html], reload);
+    gulp.watch([config.scss], ['styles', reload]);
+    gulp.watch([config.js], ['scripts', reload]);
+    gulp.watch([config.images], ['images', reload]);
+});

{{cookiecutter.repo_name}}/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "{{cookiecutter.repo_name}}",
+  "version": "{{ cookiecutter.version }}",
+  "dependencies": {},
+  "devDependencies": {
+    "browser-sync": "^2.11.1",
+    "del": "^2.2.0",
+    "gulp-autoprefixer": "^3.1.0",
+    "gulp-cache": "^0.4.2",
+    "gulp-concat": "^2.6.0",
+    "gulp-csso": "^1.1.0",
+    "gulp-imagemin": "^2.4.0",
+    "gulp-jshint": "^2.0.0",
+    "gulp-load-plugins": "^1.2.0",
+    "gulp-rename": "^1.2.2",
+    "gulp-sass": "^2.2.0",
+    "gulp-size": "^2.1.0",
+    "gulp-sourcemaps": "^1.6.0",
+    "gulp-uglify": "^1.5.3",
+    "gulp-util": "^3.0.7",
+    "jshint": "^2.9.1",
+    "jshint-stylish": "^2.1.0",
+    "node-notifier": "^4.5.0",
+    "run-sequence": "^1.1.5"
+  },
+  "engines": {
+    "node": ">=0.8.0"
+  },
+  "private": true
+}

{{cookiecutter.repo_name}}/{{cookiecutter.repo_name}}/templates/base.html

@@ -14,7 +14,7 @@
     <![endif]-->
 
     {% block css %}
-      <link href="{% static 'css/main.css' %}" rel="stylesheet">
+      <link href="{% static 'css/styles.min.css' %}" rel="stylesheet">
     {% endblock %}
 
   </head>
@@ -26,7 +26,7 @@
     {% endblock content %}
 
     {% block javascript %}
-      <script src="{% static 'js/main.js' %}"></script>
+      <script src="{% static 'js/scripts.min.js' %}"></script>
     {% endblock javascript %}
   </body>
 </html>