Merge pull request #37 from Carreau/livereload

Configure watch/livereload extension and document it.
This commit is contained in:
Min RK 2015-04-22 09:29:43 -07:00
commit c3f6163aa0
5 changed files with 48 additions and 4 deletions

View File

@ -52,8 +52,8 @@ master_doc = 'index'
# General information about the project.
project = 'Jupyter Notebook'
copyright = '2015, https://er'
author = 'https://er'
copyright = '2015, Jupyter Team, https://jupyter.org'
author = 'The Jupyter Team'
# The version info for the project you're documenting, acts as replacement for
# |version| and |release|, also used in various other places throughout the
@ -228,7 +228,7 @@ latex_elements = {
# author, documentclass [howto, manual, or own class]).
latex_documents = [
(master_doc, 'JupyterNotebook.tex', 'Jupyter Notebook Documentation',
'https://er', 'manual'),
'https://jupyter.org', 'manual'),
]
# The name of an image file (relative to this directory) to place at the top of

View File

@ -0,0 +1,32 @@
.. _development:
Development
===========
CSS live reloading
------------------
If you are working on notebook styling, you can use the live-reloading option
of gulp to watch for changes in the `.less` files and automatically rebuild the
`css` and reload the current page.
To do so we rely on the livereaload extension of various browser (`for chrome
<https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei>`_),
and the gulp-livereload extension.
To use the livereload extension, in the root of `jupyter_notebook` project launch::
$ gulp watch
Any changes to any of the less files under the `jupyter_notebook/static`
directory will trigger a rebuild of css and ask the reload extension to reload
the current page.
Do not forget to activate the extension for the current page by clicking on it.
The dot at the center of the extension icon will be come darker when the extension is activated.

View File

@ -10,4 +10,5 @@ The IPython notebook
nbconvert
public_server
security
development

View File

@ -4,6 +4,9 @@ var path = require('path');
var minifyCSS = require('gulp-minify-css');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
// now some dev nice utilities.
var livereload = require('gulp-livereload');
gulp.task('css', function () {
return gulp.src('./jupyter_notebook/static/style/*.less')
@ -16,6 +19,13 @@ gulp.task('css', function () {
suffix: '.min'
}))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./jupyter_notebook/static/style'));
.pipe(gulp.dest('./jupyter_notebook/static/style'))
.pipe(livereload());
});
gulp.task('watch', function() {
livereload.listen();
gulp.watch('jupyter_notebook/static/**/*.less', ['css']);
});

View File

@ -12,6 +12,7 @@
"bower": "*",
"gulp": "^3.8.11",
"gulp-less": "^3.0.2",
"gulp-livereload": "^3.8.0",
"gulp-minify-css": "^1.0.0",
"gulp-rename": "^1.2.2",
"gulp-sourcemaps": "^1.5.1",