Implement Front-end environment

* Implemented Gulp taks
  * Fonts task: copy fonts into public folder
  * Images task: in dev simply copy images and in prod compress them
 before
  * CSS task: in dev compile SASS files into CSS with sourcemaps. In
 prod mode no sourcemaps and CSS is compressed
  * JS task: in dev compile ES6 into ES5 with sourcemaps. In prod mode
 no sourcemaps and JS is compressed
  * Build task: build/publish all assets (env or prod mode)
  * Watch tasks available
  * Help task available to list available commands
* Ignore published/builded files

.eslintrc.yml

@@ -0,0 +1,23 @@
+---
+ecmaFeatures:
+  arrowFunctions: false
+
+env:
+  browser: true
+  jquery: true
+
+extends:
+  - airbnb
+
+rules:
+  func-names: 0
+  id-length: 0
+  indent: [2, 4]
+  new-cap: 1
+  prefer-const: 1
+  strict:
+    - 2
+    - global
+  yoda:
+    - 2
+    - always

.gitignore

@@ -1,3 +1,7 @@
+# Generated assets
+web/assets
+web/bundles
+
 # Cache file of PHP-CS Fixer
 .php_cs.cache
 

gulp-tasks/css-check.js

@@ -0,0 +1,9 @@
+import csscss from 'gulp-csscss';
+
+module.exports = function(gulp, config) {
+    return function() {
+        gulp.src(config.src + '/app.css')
+            .pipe(csscss())
+        ;
+    };
+};

gulp-tasks/fonts-watch.js

@@ -0,0 +1,5 @@
+module.exports = function(gulp, config) {
+    return function() {
+        gulp.watch(config.src + '/fonts/**/*', ['fonts']);
+    };
+};

gulp-tasks/fonts.js

@@ -0,0 +1,7 @@
+module.exports = function(gulp, config) {
+    return function() {
+        gulp.src(config.src + '/fonts/**/*')
+            .pipe(gulp.dest(config.dist + '/fonts'))
+        ;
+    };
+};

gulp-tasks/images-watch.js

@@ -0,0 +1,5 @@
+module.exports = function(gulp, config) {
+    return function() {
+        gulp.watch(config.src + '/img/**/*', ['img']);
+    };
+};

gulp-tasks/images.js

@@ -0,0 +1,24 @@
+import image from 'gulp-image';
+
+function buildDev(gulp, config) {
+    return function() {
+        gulp.src(config.src + '/img/**/*')
+            .pipe(gulp.dest(config.dist + '/img'))
+        ;
+    };
+}
+
+function buildProd(gulp, config) {
+    return function() {
+        gulp.src(config.src + '/img/**/*')
+            .pipe(image())
+            .pipe(gulp.dest(config.dist + '/img'))
+        ;
+    };
+}
+
+module.exports = function(gulp, config) {
+    let factory = ('prod' === process.env.NODE_ENV) ? buildProd : buildDev;
+
+    return factory(gulp, config);
+};

gulp-tasks/sass-lint.js

@@ -0,0 +1,9 @@
+import scsslint from 'gulp-scss-lint';
+
+module.exports = function(gulp, config) {
+    return function() {
+        gulp.src(config.src + '/scss/**/*.scss')
+            .pipe(scsslint())
+        ;
+    };
+};

gulp-tasks/sass-watch.js

@@ -0,0 +1,9 @@
+module.exports = function(gulp, config) {
+    return function() {
+        gulp.watch(config.src + '/scss/**/*.scss', ['css'])
+            .on('change', function(event) {
+                console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
+            })
+        ;
+    };
+};

gulp-tasks/sass.js

@@ -0,0 +1,45 @@
+import minifyCss from 'gulp-minify-css';
+import plumber from 'gulp-plumber';
+import sass from 'gulp-sass';
+import sourcemaps from 'gulp-sourcemaps';
+
+// https://github.com/sass/node-sass#options
+const OPTIONS = {
+    prod: {
+        outputStyle: 'compressed',
+    },
+    dev: {
+        outputStyle: 'expanded',
+    },
+};
+
+function buildDev(gulp, config) {
+    return function() {
+        gulp.src(config.src + '/scss/app.scss')
+            .pipe(plumber())
+            .pipe(sourcemaps.init())
+                .pipe(sass(OPTIONS.dev))
+                .pipe(sass().on('error', sass.logError))
+            .pipe(sourcemaps.write())
+            .pipe(gulp.dest(config.dist))
+        ;
+    };
+}
+
+function buildProd(gulp, config) {
+    return function() {
+        gulp.src(config.src + '/scss/app.scss')
+            .pipe(plumber())
+            .pipe(sass(OPTIONS.prod))
+            .pipe(sass().on('error', sass.logError))
+            .pipe(minifyCss())
+            .pipe(gulp.dest(config.dist))
+        ;
+    };
+}
+
+module.exports = function(gulp, config) {
+    let factory = ('prod' === process.env.NODE_ENV) ? buildProd : buildDev;
+
+    return factory(gulp, config);
+};

gulp-tasks/scripts-lint.js

@@ -0,0 +1,21 @@
+import eslint from 'gulp-eslint';
+
+const OPTIONS = {
+    configFile: __dirname + '/../.eslintrc.yml',
+};
+
+module.exports = function(gulp, config) {
+    const LINT_FILES = [
+        config.src + '/scripts/**/*.js', // application scripts
+        __dirname + '/*.js',             // gulps script files
+        __dirname + '/../.js',           // gulp.js
+    ];
+
+    return function() {
+        gulp.src(LINT_FILES)
+            .pipe(eslint(OPTIONS))
+            .pipe(eslint.format())
+            .pipe(eslint.failAfterError())
+        ;
+    };
+};

gulp-tasks/scripts-watch.js

@@ -0,0 +1,6 @@
+module.exports = function(gulp, config) {
+    return function() {
+        config.watch = true;
+        gulp.watch(config.src + '/scripts/**/*.js', ['js']);
+    };
+};

gulp-tasks/scripts.js

@@ -0,0 +1,68 @@
+import babelify from 'babelify';
+import browserify from 'browserify';
+import buffer from 'vinyl-buffer';
+import source from 'vinyl-source-stream';
+import sourcemaps from 'gulp-sourcemaps';
+import uglify from 'gulp-uglify';
+import watchify from 'watchify';
+import _ from 'lodash';
+
+const OPTIONS = {
+    debug: false,
+    transform: [babelify],
+};
+
+function logError(err) {
+    console.error(err);
+    this.emit('end');
+}
+
+function buildDev(gulp, config) {
+    return function() {
+        let _bundle;
+        if (true === config.watch) {
+            _bundle = watchify(browserify(config.browserify));
+            _bundle.on('update', buildDev);
+        } else {
+            _bundle = browserify(config.browserify);
+        }
+
+        _bundle
+            .bundle()
+            .on('error', logError)
+            .pipe(source('app.js'))
+            .pipe(buffer())
+            .pipe(sourcemaps.init({ loadMaps: true }))
+            .pipe(sourcemaps.write('./'))
+            .pipe(gulp.dest(config.dist))
+        ;
+    };
+}
+
+function buildProd(gulp, config) {
+    return function() {
+        browserify(config.browserify)
+            .bundle()
+            .on('error', logError)
+            .pipe(source('app.js'))
+            .pipe(buffer())
+            .pipe(uglify())
+            .on('error', logError)
+            .pipe(gulp.dest(config.dist))
+        ;
+    };
+}
+
+module.exports = function(gulp, config) {
+    let factory = buildProd;
+
+    OPTIONS.entries = config.src + '/scripts/app.js';
+    config.browserify = _.assign(watchify.args, OPTIONS);
+
+    if ('prod' !== process.env.NODE_ENV) {
+        config.browserify.debug = true;
+        factory = buildDev;
+    }
+
+    return factory(gulp, config);
+};

gulp-tasks/shell-lint.js

@@ -0,0 +1,11 @@
+import spellcheck from 'gulp-spellcheck';
+
+const LINT_FILES = __dirname + '/../scripts/**/*.sh';
+
+module.exports = function(gulp) {
+    return function() {
+        gulp.src(LINT_FILES)
+            .pipe(spellcheck())
+        ;
+    };
+};

gulp-tasks/yaml-lint.js

@@ -0,0 +1,17 @@
+import yaml from 'gulp-yaml-validate';
+
+// Will not lint Symfony YAML files as it should be done via Symfony YAML linter
+const LINT_FILES = [
+    __dirname + '/../.scrutinizer.yml',
+    __dirname + '/../.styleci.yml',
+];
+
+module.exports = function(gulp) {
+    return function() {
+        LINT_FILES.forEach(function(file) {
+            gulp.src(file)
+                .pipe(yaml())
+            ;
+        });
+    };
+};

gulpfile.babel.js

@@ -0,0 +1,48 @@
+'use strict';
+
+var options = {
+    options: {
+        'env=prod': 'Assets build and processing are production ready'
+    }
+};
+
+var gulp = require('gulp-help')(require('gulp'), options);
+var argv = require('yargs').argv;
+
+var config = {
+    src: 'src/FrontBundle/Resources/assets',
+    dist: 'web/assets'
+};
+
+// Sets environment to production if "--env=prod" ou "--production" option
+// is passed as a parameter. Otherwise default set to dev.
+if ('prod' === argv.env || 'production' === argv.env) {
+    process.env.NODE_ENV = 'prod';
+} else {
+    process.env.NODE_ENV = 'dev';
+}
+
+gulp.task('lint:yaml', 'Lint YAML files', require('./gulp-tasks/yaml-lint')(gulp, config));
+gulp.task('lint:shell', 'Lint Bash shell files', require('./gulp-tasks/shell-lint')(gulp, config));
+
+gulp.task('css', 'Build the CSS assets', require('./gulp-tasks/sass')(gulp, config));
+gulp.task('check:css', 'Check CSS duplications', require('./gulp-tasks/css-check')(gulp, config));
+gulp.task('lint:css', 'Lint SASS files', require('./gulp-tasks/sass-lint')(gulp, config));
+gulp.task('watch:css', 'Watch CSS files to build on change', require('./gulp-tasks/sass-watch')(gulp, config));
+
+gulp.task('fonts', 'Publish the fonts assets', require('./gulp-tasks/fonts')(gulp, config));
+gulp.task('watch:fonts', 'Watch fonts files to publish on change', require('./gulp-tasks/fonts-watch')(gulp, config));
+
+gulp.task('img', 'Process the images', require('./gulp-tasks/images')(gulp, config));
+gulp.task('watch:img', 'Watch images to process on change', require('./gulp-tasks/images-watch')(gulp, config));
+
+gulp.task('js', 'Build the JavaScript assets', require('./gulp-tasks/scripts')(gulp, config));
+gulp.task('lint:js', 'Lint JavaScript files', require('./gulp-tasks/scripts-lint')(gulp, config));
+gulp.task('watch:js', 'Watch JavaScript files to build on change', require('./gulp-tasks/scripts-watch')(gulp, config));
+
+gulp.task('build', 'Build and publish all assets', ['css', 'fonts', 'img', 'js']);
+gulp.task('watch', 'Watch all assets for build on change', ['watch:css', 'watch:fonts', 'watch:img', 'watch:js']);
+
+gulp.task('start', 'Build/publish all assets and watch files for any change', ['build', 'watch']);
+
+gulp.task('default', ['help']);