Skip to content

Instantly share code, notes, and snippets.

@kcmr
Last active July 17, 2017 22:26
Show Gist options
  • Save kcmr/faa392f38c17c7613cc289d9e04161f8 to your computer and use it in GitHub Desktop.
Save kcmr/faa392f38c17c7613cc289d9e04161f8 to your computer and use it in GitHub Desktop.
PSK 2 Custom Build with livereload and autoprefixer for elements
'use strict';
const requireDir = require('require-dir');
const tasks = requireDir('./tasks');
{
"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"
]
}
'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'
]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment