Added front-end workflow

diff --git a/.gitignore b/.gitignore
index f5a4d87bad2a11590205709a2fdde8d2bccba345..afefd3b11115a79c6cc2e00ce5be7d452d3acdc6 100644 (file)
--- 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 c88cb870c6b45917b2a185cedfd41f2b92c88982..3599c16752cd8c6ef4b164e5364bfce0eea54199 100644 (file)
--- 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 (file)
index 0000000..0d2c78b
--- /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/festival.js
deleted file mode 100644 (file)
index e69de29..0000000

diff --git a/app/festival/static/festival/js/index.js b/app/festival/static/festival/js/index.js
new file mode 100644 (file)
index 0000000..e69de29

diff --git a/app/festival/static/festival/js/plugins.js b/app/festival/static/festival/js/plugins.js
new file mode 100644 (file)
index 0000000..139597f
--- /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 (file)
index e69de29..0000000

diff --git a/app/festival/static/festival/scss/index.scss b/app/festival/static/festival/scss/index.scss
new file mode 100644 (file)
index 0000000..1709e21
--- /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 (file)
index 0000000..822bbc3
--- /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 (file)
index 0000000..a6923a0
--- /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"
+  }
+}