From 468439b404fa5d4624dee1dbd5f0c71065dd2e15 Mon Sep 17 00:00:00 2001 From: Philippe Barbosa Date: Wed, 2 Mar 2016 11:23:39 +0100 Subject: [PATCH] Added front-end workflow --- .gitignore | 49 ++++++++ README.rst | 37 +++++- app/festival/static/festival/css/index.css | 40 +++++++ .../festival/js/{festival.js => index.js} | 0 app/festival/static/festival/js/plugins.js | 2 + .../static/festival/less/festival.less | 0 app/festival/static/festival/scss/index.scss | 33 ++++++ gulpfile.js | 106 ++++++++++++++++++ package.json | 38 +++++++ 9 files changed, 304 insertions(+), 1 deletion(-) create mode 100644 app/festival/static/festival/css/index.css rename app/festival/static/festival/js/{festival.js => index.js} (100%) create mode 100644 app/festival/static/festival/js/plugins.js delete mode 100644 app/festival/static/festival/less/festival.less create mode 100644 app/festival/static/festival/scss/index.scss create mode 100644 gulpfile.js create mode 100644 package.json diff --git a/.gitignore b/.gitignore index f5a4d87b..afefd3b1 100644 --- a/.gitignore +++ b/.gitignore @@ -28,3 +28,52 @@ pip-log.txt #Mr Developer .mr.developer.cfg + +### Filetype & folder ### +######################### + +dist +build +*.unprefixed.css +*.log +*.map +bower_components +node_modules +.sass-cache + +### SublimeText ### +################### + +*.sublime-workspace +# *.sublime-project + +### OSX ### +########### + +.DS_Store +.AppleDouble +.LSOverride +Icon +._* +.Spotlight-V100 +.Trashes +.AppleDB +.AppleDesktop +Network Trash Folder +Temporary Items +.apdisk + + +### Windows ### +############### +# Windows image file caches +Thumbs.db +ehthumbs.db +Desktop.ini +$RECYCLE.BIN/ +*.cab +*.msi +*.msm +*.msp + +sources diff --git a/README.rst b/README.rst index c88cb870..3599c167 100644 --- a/README.rst +++ b/README.rst @@ -30,5 +30,40 @@ Restore the backuped database, in another terminal (or a Docker Quickstart Termi ./scripts/restore.sh Give you user password if asked. - You should be able to browse the app at http://localhost:8010/ (replacing 'localhost' by the IP given by the docker terminal on OSX and Windows) + +If app is broken after a restore script : +`docker-compose restart` to restart the machine. + +Work with gulp +================== + +Gulp allow to compile scss to css, concatenate js files and has a watcher, who do this tasks on file change. +Gulp require nodejs installed on your computer to work. + +- 1. Install gulp globally: +__If you have previously installed a version of gulp globally, please run `npm rm --global gulp` +to make sure your old version doesn't collide with gulp-cli.__ + +``` +$ npm install --global gulp-cli +``` + +- 1. Install gulp dependancies + + +``` +$ npm install +``` + +- 2. Run gulp: + +```sh +$ gulp [task] +``` + +Paths +============ + +- `app/festival/templates` : Personnal templates +- `app/festival/static/festival` : Static files \ No newline at end of file diff --git a/app/festival/static/festival/css/index.css b/app/festival/static/festival/css/index.css new file mode 100644 index 00000000..0d2c78b5 --- /dev/null +++ b/app/festival/static/festival/css/index.css @@ -0,0 +1,40 @@ +.test { + background: #000; +} + +.main { + margin-top: 4em; +} + +.image-left { + float: left; + margin: 0px 15px 15px 0px; + width: 50%; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.image-right { + float: right; + margin: 0px 0px 15px 15px; + width: 50%; +} + +.image-center { + float: center; + margin: 0px 0px 15px 0px; + width: 100%; + text-align: center; +} + +@media (max-width: 600px) { + + .image-right { + text-align: center; + } + + .image-center { + text-align: center; + } +} diff --git a/app/festival/static/festival/js/festival.js b/app/festival/static/festival/js/index.js similarity index 100% rename from app/festival/static/festival/js/festival.js rename to app/festival/static/festival/js/index.js diff --git a/app/festival/static/festival/js/plugins.js b/app/festival/static/festival/js/plugins.js new file mode 100644 index 00000000..139597f9 --- /dev/null +++ b/app/festival/static/festival/js/plugins.js @@ -0,0 +1,2 @@ + + diff --git a/app/festival/static/festival/less/festival.less b/app/festival/static/festival/less/festival.less deleted file mode 100644 index e69de29b..00000000 diff --git a/app/festival/static/festival/scss/index.scss b/app/festival/static/festival/scss/index.scss new file mode 100644 index 00000000..1709e218 --- /dev/null +++ b/app/festival/static/festival/scss/index.scss @@ -0,0 +1,33 @@ +.test { + background: #000; +} + +.main { + margin-top: 4em; +} + +.image-left { + float: left; + margin: 0px 15px 15px 0px; + width: 50%; + display: flex; +} + +.image-right { + float: right; + margin: 0px 0px 15px 15px; + width: 50%; + @media (max-width : 600px) { + text-align: center; + } +} + +.image-center { + float: center; + margin: 0px 0px 15px 0px; + width: 100%; + @media (max-width : 600px) { + text-align: center; + } + text-align: center; +} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js new file mode 100644 index 00000000..822bbc3c --- /dev/null +++ b/gulpfile.js @@ -0,0 +1,106 @@ +/** + * Plugins + */ +var gulp = require('gulp'); + sass = require('gulp-sass'), + postcss = require('gulp-postcss'), + autoprefixer = require('autoprefixer'), + mqpacker = require('css-mqpacker'), + plumber = require('gulp-plumber'), + concat = require('gulp-concat'), + notify = require("gulp-notify"), + uglify = require('gulp-uglify'); + + + +/** + * Paths + */ +var scssSrc = 'app/festival/static/festival/scss/', + jsSrc = 'app/festival/static/festival/js/', + cssDist = 'app/festival/static/festival/css/' + + + +/** + * Environnement + */ + +env = (function() { + var env = 'development'; + return env; +} ()); + +// Set to production (for builds) +gulp.task( 'envProduction', function() { + env = 'production'; +}); + + +/** + * CSS + */ +gulp.task('css', function () { + + if ( env === 'production' ) { + output = 'compressed'; + } else { + output = 'expanded'; + } + + var processors = [ + autoprefixer({browsers: ['last 2 version']}), + mqpacker({ + sort: true + }) + ]; + + return gulp.src( scssSrc + 'index.scss' ) + .pipe(sass({ outputStyle : output }).on('error', notify.onError("Error: <%= error.message %>"))) + .pipe(postcss(processors)) + .pipe(gulp.dest(cssDist)); + +}); + +/** + * JAVASCRIPT + */ + +// Concatenate all JS libs +gulp.task('jsLibs', function() { + console.log(jsSrc); + return gulp.src(jsSrc + 'plugins/*.js') + .pipe(concat('plugins.js')) + .pipe(gulp.dest(jsSrc)); +}); + +// Move main js script file +// gulp.task('jsScripts', function() { +// gulp.src(jsSrc + 'index.js') +// .pipe(plumber()) +// .pipe(gulp.dest(dist + 'js/')); +// }); + +// Move and minify main js script file +// gulp.task('jsScriptsBuild', function() { +// gulp.src('src/js/index.js') +// .pipe(plumber()) +// .pipe(uglify()) +// .pipe(gulp.dest(dist + 'js/')); +// }); + + + /** + * TASKS + */ + +// default task (development) +gulp.task('default', ['css', 'jsLibs'], function () { + gulp.watch( scssSrc + '/**/*.scss', ['css']); + gulp.watch( jsSrc + 'plugins/*.js', ['jsLibs']); +}); + +// Build tasks +gulp.task( "build", [ 'envProduction', 'css', 'jsScriptsBuild'], function () { + console.log("Build complete !"); +}); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 00000000..a6923a07 --- /dev/null +++ b/package.json @@ -0,0 +1,38 @@ +{ + "name": "headup", + "version": "1.0.0", + "description": "A front-end starter using MountCSS", + "main": "index.html", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "repository": { + "type": "git", + "url": "git+https://github.com/philippebarbosa/headup.git" + }, + "keywords": [ + "starter", + "html", + "css", + "front-end" + ], + "author": "Philippe Barbosa", + "license": "MIT", + "bugs": { + "url": "https://github.com/philippebarbosa/headup/issues" + }, + "homepage": "https://github.com/philippebarbosa/headup#readme", + "devDependencies": { + "autoprefixer": "^6.0.3", + "css-mqpacker": "^4.0.0", + "csswring": "^4.0.0", + "gulp": "^3.9.0", + "gulp-concat": "^2.6.0", + "gulp-livereload": "^3.8.1", + "gulp-notify": "^2.2.0", + "gulp-plumber": "^1.0.1", + "gulp-postcss": "^6.0.1", + "gulp-sass": "^2.1.0", + "gulp-uglify": "^1.4.2" + } +} -- 2.39.5