From 45a9f54475b6e09f8d34ed47974265d0ad5e0342 Mon Sep 17 00:00:00 2001 From: MaysWind Date: Mon, 19 Nov 2018 23:43:01 +0800 Subject: [PATCH] code refactor and fix bug that chart does not show --- gulpfile.js | 243 ++++++++++++++++++++++++++----------------------- src/index.html | 1 + 2 files changed, 131 insertions(+), 113 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 857b81c..428f0d2 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -7,29 +7,7 @@ var fs = require('fs'); var $ = gulpLoadPlugins(); var reload = browserSync.reload; -gulp.task('styles', function () { - return gulp.src([ - 'src/styles/**/*.css' - ]).pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']})) - .pipe(gulp.dest('.tmp/styles')) - .pipe(reload({stream: true})); -}); - -gulp.task('scripts', function () { - return gulp.src([ - 'src/scripts/**/*.js' - ]).pipe($.plumber()) - .pipe(gulp.dest('.tmp/scripts')) - .pipe(reload({stream: true})); -}); - -gulp.task('views', function () { - return gulp.src([ - 'src/views/**/*.html' - ]).pipe($.htmlmin({collapseWhitespace: true})) - .pipe($.angularTemplatecache({module: 'ariaNg', filename: 'views/templates.js', root: 'views/'})) - .pipe(gulp.dest('.tmp/scripts')); -}); +gulp.task('clean', del.bind(null, ['.tmp', 'dist'])); gulp.task('lint', function () { return gulp.src([ @@ -40,7 +18,55 @@ gulp.task('lint', function () { .pipe(gulp.dest('src/scripts')); }); -gulp.task('html', ['styles', 'scripts', 'views'], function () { +gulp.task('prepare-fonts', function () { + return gulp.src([ + 'node_modules/font-awesome/fonts/fontawesome-webfont.*' + ]).pipe(gulp.dest('.tmp/fonts')); +}); + +gulp.task('process-fonts', ['prepare-fonts'], function () { + return gulp.src([ + '.tmp/fonts/**/*' + ]).pipe(gulp.dest('dist/fonts')); +}); + +gulp.task('prepare-langs', function () { + return gulp.src([ + 'src/langs/**/*' + ]).pipe(gulp.dest('.tmp/langs')); +}); + +gulp.task('process-langs', ['prepare-langs'], function () { + return gulp.src([ + '.tmp/langs/**/*' + ]).pipe(gulp.dest('dist/langs')); +}); + +gulp.task('prepare-styles', function () { + return gulp.src([ + 'src/styles/**/*.css' + ]).pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']})) + .pipe(gulp.dest('.tmp/styles')) + .pipe(reload({stream: true})); +}); + +gulp.task('prepare-scripts', function () { + return gulp.src([ + 'src/scripts/**/*.js' + ]).pipe($.plumber()) + .pipe(gulp.dest('.tmp/scripts')) + .pipe(reload({stream: true})); +}); + +gulp.task('prepare-views', function () { + return gulp.src([ + 'src/views/**/*.html' + ]).pipe($.htmlmin({collapseWhitespace: true})) + .pipe($.angularTemplatecache({module: 'ariaNg', filename: 'views/templates.js', root: 'views/'})) + .pipe(gulp.dest('.tmp/scripts')); +}); + +gulp.task('prepare-html', ['prepare-styles', 'prepare-scripts', 'prepare-views'], function () { return gulp.src([ 'src/*.html' ]).pipe($.useref({searchPath: ['.tmp', 'src', '.']})) @@ -52,29 +78,74 @@ gulp.task('html', ['styles', 'scripts', 'views'], function () { .pipe($.if(['js/plugins.min.js', 'js/aria-ng.min.js', 'css/plugins.min.css', 'css/aria-ng.min.css'], $.rev())) .pipe($.if('*.html', $.htmlmin({collapseWhitespace: true}))) .pipe($.revReplace()) + .pipe(gulp.dest('.tmp')); +}); + +gulp.task('process-html', ['prepare-html'], function () { + return gulp.src([ + '.tmp/*.html' + ]).pipe($.replace(//, '')) .pipe(gulp.dest('dist')); }); -gulp.task('langs', function () { +gulp.task('process-assets', ['process-html'], function () { return gulp.src([ - 'src/langs/**/*' - ]).pipe(gulp.dest('dist/langs')); + '.tmp/css/**/*', + '.tmp/js/**/*' + ],{ base: '.tmp' }) + .pipe(gulp.dest('dist')); }); -gulp.task('images', function () { - return gulp.src([ - 'src/imgs/**/*' - ]).pipe(gulp.dest('dist/imgs')); +gulp.task('process-assets-bundle', ['prepare-fonts', 'prepare-langs', 'prepare-html'], function () { + return gulp.src('.tmp/index.html') + .pipe($.replace(//g, function(match, fileName) { + var content = fs.readFileSync('.tmp/' + fileName, 'utf8'); + return ''; + })) + .pipe($.replace(/'; + })) + .pipe($.replace(/url\(\.\.\/(fonts\/[a-zA-Z0-9\-]+\.woff)(\?[a-zA-Z0-9\-_=.]+)?\)/g, function(match, fileName) { + if (!fs.existsSync('.tmp/' + fileName)) { + return match; + } + + var contentBuffer = fs.readFileSync('.tmp/' + fileName); + var contentBase64 = contentBuffer.toString('base64'); + return 'url(data:application/x-font-woff;base64,' + contentBase64 + ')'; + })) + .pipe($.replace('', function() { + var langDir = '.tmp/langs/'; + var result = ''; + var fileNames = fs.readdirSync(langDir, 'utf8'); + + if (fileNames.length > 0) { + result = ''; + } + + return result; + })) + .pipe($.replace(/<[a-z]+( [a-z\-]+="[a-zA-Z0-9\- ]+")* [a-z\-]+="((favicon.ico)|(favicon.png)|(tileicon.png)|(touchicon.png))"\/?>/g, '')) + .pipe(gulp.dest('dist')); }); -gulp.task('fonts', function () { - return gulp.src([ - 'node_modules/font-awesome/fonts/fontawesome-webfont.*' - ]).pipe(gulp.dest('.tmp/fonts')) - .pipe(gulp.dest('dist/fonts')); -}); - -gulp.task('manifest', function () { +gulp.task('process-manifest', function () { return gulp.src([ 'dist/css/**', 'dist/js/**', @@ -93,7 +164,7 @@ gulp.task('manifest', function () { .pipe(gulp.dest('dist')); }); -gulp.task('extras', function () { +gulp.task('process-full-extras', function () { return gulp.src([ 'LICENSE', 'src/*.*', @@ -103,9 +174,23 @@ gulp.task('extras', function () { }).pipe(gulp.dest('dist')); }); -gulp.task('clean', del.bind(null, ['.tmp', 'dist'])); +gulp.task('process-tiny-extras', function () { + return gulp.src([ + 'LICENSE' + ]).pipe(gulp.dest('dist')); +}); -gulp.task('serve', ['styles', 'scripts', 'fonts'], function () { +gulp.task('info', function () { + return gulp.src([ + 'dist/**/*' + ]).pipe($.size({title: 'build', gzip: true})); +}); + +gulp.task('build', $.sequence('lint', 'process-fonts', 'process-langs', 'process-assets', 'process-manifest', 'process-full-extras', 'info')); + +gulp.task('build-bundle', $.sequence('lint', 'process-assets-bundle', 'process-tiny-extras', 'info')); + +gulp.task('serve', ['prepare-styles', 'prepare-scripts', 'prepare-fonts'], function () { browserSync({ notify: false, port: 9000, @@ -127,9 +212,9 @@ gulp.task('serve', ['styles', 'scripts', 'fonts'], function () { '.tmp/fonts/**/*' ]).on('change', reload); - gulp.watch('src/styles/**/*.css', ['styles']); - gulp.watch('src/scripts/**/*.js', ['scripts']); - gulp.watch('src/fonts/**/*', ['fonts']); + gulp.watch('src/styles/**/*.css', ['prepare-styles']); + gulp.watch('src/scripts/**/*.js', ['prepare-scripts']); + gulp.watch('src/fonts/**/*', ['prepare-fonts']); }); gulp.task('serve:dist', function () { @@ -142,74 +227,6 @@ gulp.task('serve:dist', function () { }); }); -gulp.task('info', function () { - return gulp.src([ - 'dist/**/*' - ]).pipe($.size({title: 'build', gzip: true})); -}); - -gulp.task('build', $.sequence('lint', 'html', 'langs', 'images', 'fonts', 'manifest', 'extras', 'info')); - -gulp.task('bundle-assets', function () { - return gulp.src('dist/index.html') - .pipe($.replace(//g, function(match, fileName) { - var content = fs.readFileSync('dist/' + fileName, 'utf8'); - return ''; - })) - .pipe($.replace(/'; - })) - .pipe($.replace(/url\(\.\.\/(fonts\/[a-zA-Z0-9\-]+\.woff)(\?[a-zA-Z0-9\-_=.]+)?\)/g, function(match, fileName) { - if (!fs.existsSync('dist/' + fileName)) { - return match; - } - - var contentBuffer = fs.readFileSync('dist/' + fileName); - var contentBase64 = contentBuffer.toString('base64'); - return 'url(data:application/x-font-woff;base64,' + contentBase64 + ')'; - })) - .pipe($.replace(/<\/body>/g, function(match) { - var langDir = 'src/langs/'; - var result = ''; - var fileNames = fs.readdirSync(langDir, 'utf8'); - - if (fileNames.length > 0) { - var script = ''; - result = script + result; - } - - return result; - })) - .pipe($.replace(/<[a-z]+( [a-z\-]+="[a-zA-Z0-9\- ]+")* [a-z\-]+="((favicon.ico)|(favicon.png)|(tileicon.png)|(touchicon.png))"\/?>/g, '')) - .pipe(gulp.dest('dist')); -}); - -gulp.task('bundle-extras', function () { - return gulp.src([ - 'LICENSE' - ]).pipe(gulp.dest('dist')); -}); - -gulp.task('bundle-clean', del.bind(null, ['dist/css', 'dist/js', 'dist/fonts'])); - -gulp.task('build-bundle', $.sequence('lint', 'html', 'images', 'fonts', 'bundle-assets', 'bundle-extras', 'bundle-clean', 'info')); - gulp.task('default', ['clean'], function () { gulp.start('build'); }); diff --git a/src/index.html b/src/index.html index 2623abd..65094ff 100644 --- a/src/index.html +++ b/src/index.html @@ -406,5 +406,6 @@ +