gulpfile.js 4.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. const PATHS = {
  2. //Input Paths
  3. admin_in: 'app/admin/**/*',
  4. elements_in: 'app/elements/elements.html',
  5. html_in: 'app/*.html',
  6. img_in: 'app/images/**/*',
  7. scripts_in: 'app/scripts/**/*',
  8. //Output Paths
  9. admin_out: 'dist/admin',
  10. elements_out: 'dist/elements',
  11. html_out: 'dist/',
  12. img_out: 'dist/images',
  13. scripts_out: 'dist/scripts'
  14. };
  15. var gulp = require('gulp');
  16. var crisper = require('gulp-crisper');
  17. var minify = require('gulp-htmlmin');
  18. var gulpif = require('gulp-if');
  19. var gulpSeq = require('gulp-sequence');
  20. var uglify = require('gulp-uglify');
  21. var vulcanize = require('gulp-vulcanize');
  22. var del = require('del');
  23. gulp.task('build', ['default'], function () {
  24. return gulp.src(['dist']).pipe(gulp.dest('_build'));
  25. });
  26. /**
  27. * Default Gulp task
  28. *
  29. * Runs a clean (to clear out /build) and then builds the project
  30. */
  31. gulp.task('default', gulpSeq('clean', 'build'));
  32. /**
  33. * Gulp clean task
  34. *
  35. * Cleans out /build by deleting the entire folder using 'del'
  36. */
  37. gulp.task('clean', function () {
  38. return del(['dist']);
  39. });
  40. /**
  41. * Gulp build task
  42. *
  43. * Builds the project by doing the following:
  44. * 1) Vulcanizing HTML imports by calling helper method
  45. * 2) Moving all HTML files
  46. * ...
  47. * TODO: More
  48. */
  49. gulp.task('build', ['vulcanize', 'moveAdmin', 'moveHTML', 'moveImg', 'moveScripts'], function () {
  50. });
  51. /** Gulp move admin task. Moves the /admin folders to dist */
  52. gulp.task('moveAdmin', function () {
  53. return moveAdmin();
  54. });
  55. /** Helper method to move all HTML files in /app/admin to /dist/admin */
  56. function moveAdmin() {
  57. return gulp.src(PATHS.admin_in).pipe(gulpif('*.html', minifyHTML())).pipe(gulp.dest(PATHS.admin_out));
  58. }
  59. /** Gulp move HTML task. Moves all HTML files in /app by calling helper method */
  60. gulp.task('moveHTML', function () {
  61. return moveHTML();
  62. });
  63. /** Helper method to move all HTML files /app to the /dist dir */
  64. function moveHTML() {
  65. return gulp.src(PATHS.html_in).pipe(gulpif('*.html', minifyHTML())).pipe(gulp.dest(PATHS.html_out));
  66. }
  67. /** Gulp move images task. Moves given images to /dist by calling helper method */
  68. gulp.task('moveImg', function () {
  69. return moveImg();
  70. });
  71. /** Helper method to move all images in /app to the /dist dir */
  72. function moveImg() {
  73. return gulp.src(PATHS.img_in).pipe(gulp.dest(PATHS.img_out));
  74. }
  75. /** Gulp move scripts task. Moves scripts to /dist by calling helper method */
  76. gulp.task('moveScripts', function () {
  77. return moveScripts();
  78. });
  79. /** Helper method to move all scripts in /app to the /dist dir */
  80. function moveScripts() {
  81. return gulp.src(PATHS.scripts_in).pipe(gulp.dest(PATHS.scripts_out));
  82. }
  83. /** Gulp vulcanize task. Calls helper method to vulcanize HTML imports */
  84. gulp.task('vulcanize', function () {
  85. return vulcanizeImports();
  86. });
  87. /**
  88. * Vulcanize the given HTML file.
  89. *
  90. * This will use the 'vulcanize' tool to inline all HTML imports in a given file (reduces network activity)
  91. *
  92. * Order of Events:
  93. * 1) Pipes to source HTML file to 'vulcanize' with args. Inlines the HTML/CSS/JS and strips all comments (except @license decelerations)
  94. * 2) Pipes to 'crisper' to separate the JS into it's own file for CSP compliance and reduction of HTML parser load
  95. * 3) Pipes to 'HTMLminifier' to minify the HTML code (remove whitespace, etc). ONLY MINIFIES IF .HTML
  96. * 4) Pipes to 'uglify' to minify the JS code. ONLY MINIFIES IF .JS
  97. * 5) Pipes the output to the specified directory
  98. */
  99. function vulcanizeImports() {
  100. return gulp.src(PATHS.elements_in)
  101. .pipe(vulcanizeHTML())
  102. .pipe(crisper())
  103. .pipe(gulpif('*.html', minifyHTML()))
  104. .pipe(gulpif('*.js', uglifyJS()))
  105. .pipe(gulp.dest(PATHS.elements_out))
  106. }
  107. function vulcanizeHTML() {
  108. console.log("=== VULCANIZE ===");
  109. return vulcanize({
  110. inlineScripts: true,
  111. inlineCss: true,
  112. stripComments: true
  113. });
  114. }
  115. function minifyHTML() {
  116. console.log("=== MINIFY ===");
  117. return minify({collapseWhitespace: true})
  118. }
  119. function uglifyJS() {
  120. console.log("=== UGLIFY ===");
  121. return uglify({preserveComments: 'some'});
  122. }