PSK 2 Custom Build with livereload and autoprefixer for elements

gulpfile.js

'use strict';

const requireDir = require('require-dir');
const tasks = requireDir('./tasks');

package.json

{
  "name": "app-name",
  "devDependencies": {
    "autoprefixer": "^7.1.1",
    "browser-sync": "^2.18.12",
    "connect-history-api-fallback": "^1.3.0",
    "del": "^3.0.0",
    "eslint": "^3.19.0",
    "eslint-config-google": "^0.7.0",
    "eslint-plugin-html": "^2.0.0",
    "gulp": "^3.9.1",
    "gulp-changed": "^3.1.0",
    "gulp-color": "0.0.1",
    "gulp-html-replace": "^1.6.2",
    "gulp-inline-source": "^3.1.0",
    "gulp-postcss": "^7.0.0",
    "gulp-process-inline": "^0.1.4",
    "gulp-s3": "^0.11.0",
    "require-dir": "^0.3.2"
  },
  "scripts": {
    "lint": "npm run lint:javascript",
    "lint:javascript": "eslint . --ext js,html --ignore-path .gitignore",
    "test": "polymer test",
    "serve": "gulp serve",
    "serve:bundled": "polymer build && polymer serve build/local",
    "reset": "rm -rf bower_components && bower cache clean && bower i"
  },
  "browserslist": [
    "last 2 versions"
  ]
}

serve.js

'use strict';

const gulp = require('gulp');
const del = require('del');
const browserSync = require('browser-sync').create();
const historyApiFallback = require('connect-history-api-fallback');
const processInline = require('gulp-process-inline');
const inlineSource = require('gulp-inline-source');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const changed = require('gulp-changed');

const buildDirectory = 'dist/';

// Cleans existent dist directory (generated in previous executions)
gulp.task('clean', () => del([buildDirectory]));

// Extract styles from html files in the src directory to apply autoprefixer
// and copies the result to dist directory
gulp.task('build', () => {
  const styles = processInline();
  return gulp.src(['src/**/*.html'])
    .pipe(changed(buildDirectory))
    .pipe(inlineSource({
      compress: false,
      swallowErrors: true
    }))
    .pipe(styles.extract('style'))
    .pipe(postcss([autoprefixer]))
    .pipe(styles.restore())
    .pipe(gulp.dest(buildDirectory));
});

// Starts a browserSync server that re-maps "/bower_components" routes to "/"
gulp.task('start-browsersync', () => {
  return browserSync.init({
    open: false,
    notify: false,
    ghostMode: false,
    middleware: [historyApiFallback()],
    server: {
      baseDir: ['./'],
      index: 'index.html',
      routes: {
        '/': './bower_components'
      }
    }
  });
});

// Runs build task when a source file changes
gulp.task('watch:sources', () => {
  gulp.watch(['index.html', 'src/**/*'], ['build']);
});

// Reloads the browser when a dist file, tests or index.html change
gulp.task('watch:dist', () => {
  gulp.watch(['index.html', 'dist/**/*', 'test/**/*']).on('change', browserSync.reload);
});

gulp.task('serve', [
  'clean',
  'build',
  'start-browsersync',
  'watch:sources',
  'watch:dist'
]);