Merge pull request #47 from benbrehaut/development

Development

README.md

@@ -52,6 +52,8 @@ All Sass files are located within ``/assets/scss``, with the ``style.scss`` outp
 ###### Default task
 All JavaScript files are located with ``/assets/js``, the ``scripts.js`` file is the main Javascript file for the theme, with external third party libraries within the ``vendor`` folder. All files within this will be concatenated into the ``dist/main.js`` file and ``dist/main.min.js``
 
+The scripts task will also run the main JavaScript file through Babel, which means you can use all the new ES2015, ES2016 etc. features without fear of them not working in some older browsers!
+
 * ``/assets/js/scripts.js`` is the main JavaScript file. This is where you should write all of your JavaScript.
 * ``/assets/js/dist/main.js`` is the uncompressed and concatenated JavaScript file from all of the files within the ``/assets/js/vendor/*.js`` folder and ``/assets/js/scripts.js`` file.
 * ``/assets/js/dist/main.min.js`` is our compressed version of the ``/assets/js/dist/main.js`` file.

assets/img/favicon/manifest.json

@@ -1,5 +1,8 @@
 {
  "name": "App",
+ "start_url": "/?homescreen=1",
+ "display": "standalone",
+ "theme_color": "#2c3346", 
  "icons": [
   {
    "src": "\/android-icon-36x36.png",

gulpfile.js

@@ -13,6 +13,8 @@ var concat = require('gulp-concat');
 var imagemin = require('gulp-imagemin');
 var prefix = require('gulp-autoprefixer');
 var svgstore = require('gulp-svgstore');
+var sourcemaps = require('gulp-sourcemaps');
+var babel = require('gulp-babel');
 
 /**
  * @function variables
@@ -49,6 +51,9 @@ var autoprefixerOptions = {
  */
 gulp.task('scripts', function () {
   return gulp.src([jsFiles, mainJSFile])
+    .pipe(babel({
+      presets: ['env']
+    }))
     .pipe(plumber())
     .pipe(concat(outputJSFile))  // output main JavaScript file without uglify
     .pipe(gulp.dest(outputJSFileLocation))
@@ -65,13 +70,15 @@ gulp.task('scripts', function () {
  */
 gulp.task('styles', function () {
   return gulp.src(mainSassFile)
+    .pipe(sourcemaps.init())
     .pipe(sass({
       includePaths: ['scss'],
       onError: browserSync.notify
     }).on('error', sass.logError))
     .pipe(prefix(autoprefixerOptions, { cascade: true }))
     .pipe(plumber())
     .pipe(concat(outputCSSFile)) // output main CSS file without cleanCSS
+    .pipe(sourcemaps.write('./maps'))
     .pipe(gulp.dest(outputCSSFileLocation))
     .pipe(cleanCSS())
     .pipe(concat(outputCSSFileCompressed)) // output main CSS file w/ cleanCSS
@@ -90,6 +97,8 @@ gulp.task('browser-sync', ['scripts', 'styles'], function () {
     files: [
       "*.php",
       '**/*.php',
+      '*.twig',
+      '**/*.twig',
       'gulpfile.js',
       outputJSFileLocation + '/*.js',
       outputCSSFileLocation + '/*.css'

package.json

@@ -24,14 +24,19 @@
   "author": "Ben Brehaut",
   "license": "MIT",
   "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-preset-env": "^1.6.0",
     "browser-sync": "^2.18.12",
     "gulp": "^3.8.8",
     "gulp-autoprefixer": "4.0.0",
+    "gulp-babel": "^7.0.0",
     "gulp-clean-css": "^3.6.0",
     "gulp-concat": "^2.6.1",
     "gulp-imagemin": "^3.3.0",
     "gulp-plumber": "^1.1.0",
     "gulp-sass": "^3.1.0",
+    "gulp-sourcemaps": "^2.6.1",
     "gulp-svgmin": "^1.2.4",
     "gulp-svgstore": "^6.1.0",
     "gulp-uglify": "^3.0.0"