|
| 1 | +"use strict"; |
| 2 | + |
| 3 | +const gulp = require('gulp-help')(require('gulp')); |
| 4 | +const bower = require('gulp-bower'); |
| 5 | +const purify = require('gulp-purifycss'); |
| 6 | +const concatCss = require('gulp-concat-css'); |
| 7 | +const cleanCSS = require('gulp-clean-css'); |
| 8 | +const gulpIgnore = require('gulp-ignore'); |
| 9 | +const htmlreplace = require('gulp-html-replace'); |
| 10 | +const gulpRemoveHtml = require('gulp-remove-html'); |
| 11 | +const htmlmin = require('gulp-html-minifier'); |
| 12 | +const gulpAmpValidator = require('gulp-amphtml-validator'); |
| 13 | +const replace = require('gulp-replace'); |
| 14 | +const uncss = require('gulp-uncss'); |
| 15 | + |
| 16 | +const paths = { |
| 17 | + src: { |
| 18 | + dir: './resources/public/weekly', |
| 19 | + html: './resources/public/weekly/**/*.html' |
| 20 | + }, |
| 21 | + dist: { |
| 22 | + dir: './build/dist', |
| 23 | + html: './build/dist/**/*.html' |
| 24 | + }, |
| 25 | + tmp: { |
| 26 | + dir: './build/tmp', |
| 27 | + css: './build/tmp/app.css' |
| 28 | + } |
| 29 | +}; |
| 30 | + |
| 31 | +gulp.task('compile:css', function() { |
| 32 | + return gulp.src(['./bower_components/bootstrap/dist/css/bootstrap.min.css', |
| 33 | + './resources/public/weekly/css/screen.css']) |
| 34 | + .pipe(concatCss('app.css')) |
| 35 | + .pipe(purify([paths.src.html])) |
| 36 | + // remove !importent which not supported by amphtml |
| 37 | + .pipe(replace(/!important/g, '')) |
| 38 | + // remove @-ms-viewport which not supported by amphtml |
| 39 | + .pipe(replace(/@-ms-viewport\s*{\n(.*?)\n}/g, '')) |
| 40 | + .pipe(gulp.dest(paths.tmp.dir)); |
| 41 | +}); |
| 42 | + |
| 43 | +// inline-css inserts the cleaned + minified CSS into HTML |
| 44 | +gulp.task('build:inline-css', ['compile:css'], function() { |
| 45 | + return gulp.src(paths.src.html) |
| 46 | + .pipe(htmlreplace({ |
| 47 | + 'cssInline': { |
| 48 | + 'src': gulp.src(paths.tmp.css).pipe(cleanCSS()), |
| 49 | + 'tpl': '<style amp-custom>%s</style>' |
| 50 | + } |
| 51 | + })) |
| 52 | + .pipe(gulp.dest(paths.dist.dir)); |
| 53 | +}); |
| 54 | + |
| 55 | +gulp.task('build:remove-html', ['build:inline-css'], function () { |
| 56 | + return gulp.src(paths.dist.html) |
| 57 | + .pipe(gulpRemoveHtml({ |
| 58 | + 'keyword': 'build:removeHtml' |
| 59 | + })) |
| 60 | + .pipe(gulp.dest(paths.dist.dir)); |
| 61 | +}); |
| 62 | + |
| 63 | +gulp.task('build:minify-html', ['build:remove-html'], function() { |
| 64 | + return gulp.src(paths.dist.html) |
| 65 | + .pipe(htmlmin({collapseWhitespace: true, |
| 66 | + minifyJS: true, |
| 67 | + minifyCSS: true, |
| 68 | + removeComments: true})) |
| 69 | + .pipe(gulp.dest(paths.dist.dir)); |
| 70 | +}); |
| 71 | + |
| 72 | +gulp.task('bower', function() { |
| 73 | + return bower(); |
| 74 | +}); |
| 75 | + |
| 76 | +gulp.task('validate:amphtml', ['build:minify-html'], function() { |
| 77 | +//gulp.task('validate:amphtml', function() { |
| 78 | +return gulp.src(paths.dist.html) |
| 79 | + // Some page no need to support amp, just ignore it |
| 80 | + .pipe(gulpIgnore.exclude(['**/404.html'])) |
| 81 | + // Valide the input and attach the validation result to the "amp" property |
| 82 | + // of the file object. |
| 83 | + .pipe(gulpAmpValidator.validate()) |
| 84 | + // Print the validation results to the console. |
| 85 | + .pipe(gulpAmpValidator.format()) |
| 86 | + // Exit the process with error code (1) if an AMP validation error |
| 87 | + // occurred. |
| 88 | + .pipe(gulpAmpValidator.failAfterError()); |
| 89 | +}); |
| 90 | + |
| 91 | +gulp.task('build', 'build all resources', [ |
| 92 | + 'bower', |
| 93 | + 'compile:css', |
| 94 | + 'build:inline-css', |
| 95 | + 'build:remove-html', |
| 96 | + 'build:minify-html', |
| 97 | + 'validate:amphtml' |
| 98 | +]); |
| 99 | + |
| 100 | +gulp.task('default', 'build all resources', [ |
| 101 | + 'build', |
| 102 | +]); |
0 commit comments