You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

314 lines
5.9 KiB

5 years ago
  1. /**
  2. * Settings
  3. * Turn on/off build features
  4. */
  5. var settings = {
  6. clean: true,
  7. scripts: true,
  8. polyfills: true,
  9. styles: false,
  10. svgs: false,
  11. copy: true,
  12. reload: true
  13. };
  14. /**
  15. * Paths to project folders
  16. */
  17. var paths = {
  18. input: 'src/',
  19. output: 'dist/',
  20. scripts: {
  21. input: 'src/js/*',
  22. polyfills: '.polyfill.js',
  23. output: 'dist/'
  24. },
  25. styles: {
  26. input: 'src/sass/**/*.{scss,sass}',
  27. output: 'dist/css/'
  28. },
  29. svgs: {
  30. input: 'src/svg/*.svg',
  31. output: 'dist/svg/'
  32. },
  33. copy: {
  34. input: 'src/copy/*',
  35. output: './'
  36. },
  37. reload: './'
  38. };
  39. /**
  40. * Template for banner to add to file headers
  41. */
  42. var banner = {
  43. full:
  44. '/*!\n' +
  45. ' * <%= package.name %> v<%= package.version %>\n' +
  46. ' * <%= package.description %>\n' +
  47. ' * (c) ' + new Date().getFullYear() + ' <%= package.author.name %>\n' +
  48. ' * <%= package.license %> License\n' +
  49. ' * <%= package.repository.url %>\n' +
  50. ' */\n\n',
  51. min:
  52. '/*!' +
  53. ' <%= package.name %> v<%= package.version %>' +
  54. ' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' +
  55. ' | <%= package.license %> License' +
  56. ' | <%= package.repository.url %>' +
  57. ' */\n'
  58. };
  59. /**
  60. * Gulp Packages
  61. */
  62. // General
  63. var {gulp, src, dest, watch, series, parallel} = require('gulp');
  64. var del = require('del');
  65. var flatmap = require('gulp-flatmap');
  66. var lazypipe = require('lazypipe');
  67. var rename = require('gulp-rename');
  68. var header = require('gulp-header');
  69. var package = require('./package.json');
  70. // Scripts
  71. var jshint = require('gulp-jshint');
  72. var stylish = require('jshint-stylish');
  73. var concat = require('gulp-concat');
  74. var uglify = require('gulp-uglify');
  75. var optimizejs = require('gulp-optimize-js');
  76. // Styles
  77. var sass = require('gulp-sass');
  78. var prefix = require('gulp-autoprefixer');
  79. var minify = require('gulp-cssnano');
  80. // SVGs
  81. var svgmin = require('gulp-svgmin');
  82. // BrowserSync
  83. var browserSync = require('browser-sync');
  84. /**
  85. * Gulp Tasks
  86. */
  87. // Remove pre-existing content from output folders
  88. var cleanDist = function (done) {
  89. // Make sure this feature is activated before running
  90. if (!settings.clean) return done();
  91. // Clean the dist folder
  92. del.sync([
  93. paths.output
  94. ]);
  95. // Signal completion
  96. return done();
  97. };
  98. // Repeated JavaScript tasks
  99. var jsTasks = lazypipe()
  100. .pipe(header, banner.full, {package: package})
  101. .pipe(optimizejs)
  102. .pipe(dest, paths.scripts.output)
  103. .pipe(rename, {suffix: '.min'})
  104. .pipe(uglify)
  105. .pipe(optimizejs)
  106. .pipe(header, banner.min, {package: package})
  107. .pipe(dest, paths.scripts.output);
  108. // Lint, minify, and concatenate scripts
  109. var buildScripts = function (done) {
  110. // Make sure this feature is activated before running
  111. if (!settings.scripts) return done();
  112. // Run tasks on script files
  113. src(paths.scripts.input)
  114. .pipe(flatmap(function(stream, file) {
  115. // If the file is a directory
  116. if (file.isDirectory()) {
  117. // Setup a suffix variable
  118. var suffix = '';
  119. // If separate polyfill files enabled
  120. if (settings.polyfills) {
  121. // Update the suffix
  122. suffix = '.polyfills';
  123. // Grab files that aren't polyfills, concatenate them, and process them
  124. src([file.path + '/*.js', '!' + file.path + '/*' + paths.scripts.polyfills])
  125. .pipe(concat(file.relative + '.js'))
  126. .pipe(jsTasks());
  127. }
  128. // Grab all files and concatenate them
  129. // If separate polyfills enabled, this will have .polyfills in the filename
  130. src(file.path + '/*.js')
  131. .pipe(concat(file.relative + suffix + '.js'))
  132. .pipe(jsTasks());
  133. return stream;
  134. }
  135. // Otherwise, process the file
  136. return stream.pipe(jsTasks());
  137. }));
  138. // Signal completion
  139. done();
  140. };
  141. // Lint scripts
  142. var lintScripts = function (done) {
  143. // Make sure this feature is activated before running
  144. if (!settings.scripts) return done();
  145. // Lint scripts
  146. src(paths.scripts.input)
  147. .pipe(jshint())
  148. .pipe(jshint.reporter('jshint-stylish'));
  149. // Signal completion
  150. done();
  151. };
  152. // Process, lint, and minify Sass files
  153. var buildStyles = function (done) {
  154. // Make sure this feature is activated before running
  155. if (!settings.styles) return done();
  156. // Run tasks on all Sass files
  157. src(paths.styles.input)
  158. .pipe(sass({
  159. outputStyle: 'expanded',
  160. sourceComments: true
  161. }))
  162. .pipe(prefix({
  163. browsers: ['last 2 version', '> 0.25%'],
  164. cascade: true,
  165. remove: true
  166. }))
  167. .pipe(header(banner.full, { package : package }))
  168. .pipe(dest(paths.styles.output))
  169. .pipe(rename({suffix: '.min'}))
  170. .pipe(minify({
  171. discardComments: {
  172. removeAll: true
  173. }
  174. }))
  175. .pipe(header(banner.min, { package : package }))
  176. .pipe(dest(paths.styles.output));
  177. // Signal completion
  178. done();
  179. };
  180. // Optimize SVG files
  181. var buildSVGs = function (done) {
  182. // Make sure this feature is activated before running
  183. if (!settings.svgs) return done();
  184. // Optimize SVG files
  185. src(paths.svgs.input)
  186. .pipe(svgmin())
  187. .pipe(dest(paths.svgs.output));
  188. // Signal completion
  189. done();
  190. };
  191. // Copy static files into output folder
  192. var copyFiles = function (done) {
  193. // Make sure this feature is activated before running
  194. if (!settings.copy) return done();
  195. // Copy static files
  196. src(paths.copy.input)
  197. .pipe(dest(paths.copy.output));
  198. // Signal completion
  199. done();
  200. };
  201. // Watch for changes to the src directory
  202. var startServer = function (done) {
  203. // Make sure this feature is activated before running
  204. if (!settings.reload) return done();
  205. // Initialize BrowserSync
  206. browserSync.init({
  207. server: {
  208. baseDir: paths.reload
  209. }
  210. });
  211. // Signal completion
  212. done();
  213. };
  214. // Reload the browser when files change
  215. var reloadBrowser = function (done) {
  216. if (!settings.reload) return done();
  217. browserSync.reload();
  218. done();
  219. };
  220. // Watch for changes
  221. var watchSource = function (done) {
  222. watch(paths.input, series(exports.default, reloadBrowser));
  223. done();
  224. };
  225. /**
  226. * Export Tasks
  227. */
  228. // Default task
  229. // gulp
  230. exports.default = series(
  231. cleanDist,
  232. parallel(
  233. buildScripts,
  234. lintScripts,
  235. buildStyles,
  236. buildSVGs,
  237. copyFiles
  238. )
  239. );
  240. // Watch and reload
  241. // gulp watch
  242. exports.watch = series(
  243. exports.default,
  244. startServer,
  245. watchSource
  246. );