gulpfile.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. 'use strict';
  2. var pkg = require('./package.json'),
  3. autoprefixer = require('gulp-autoprefixer'),
  4. browserify = require('browserify'),
  5. buffer = require('vinyl-buffer'),
  6. connect = require('gulp-connect'),
  7. csso = require('gulp-csso'),
  8. del = require('del'),
  9. ghpages = require('gh-pages'),
  10. gulp = require('gulp'),
  11. gutil = require('gulp-util'),
  12. path = require('path'),
  13. plumber = require('gulp-plumber'),
  14. pug = require('gulp-pug'),
  15. rename = require('gulp-rename'),
  16. source = require('vinyl-source-stream'),
  17. stylus = require('gulp-stylus'),
  18. through = require('through'),
  19. uglify = require('gulp-uglify'),
  20. isDist = process.argv.indexOf('serve') === -1,
  21. // browserifyPlumber fills the role of plumber() when working with browserify
  22. browserifyPlumber = function(e) {
  23. if (isDist) throw e;
  24. gutil.log(e.stack);
  25. this.emit('end');
  26. };
  27. gulp.task('js', ['clean:js'], function() {
  28. // see https://wehavefaces.net/gulp-browserify-the-gulp-y-way-bb359b3f9623
  29. return browserify('src/scripts/main.js').bundle()
  30. .on('error', browserifyPlumber)
  31. .pipe(source('src/scripts/main.js'))
  32. .pipe(buffer())
  33. .pipe(isDist ? uglify() : through())
  34. .pipe(rename('build.js'))
  35. .pipe(gulp.dest('dist/build'))
  36. .pipe(connect.reload());
  37. });
  38. gulp.task('html', ['clean:html'], function() {
  39. return gulp.src('src/index.pug')
  40. .pipe(isDist ? through() : plumber())
  41. .pipe(pug({ pretty: ' ' }))
  42. .pipe(rename('index.html'))
  43. .pipe(gulp.dest('dist'))
  44. .pipe(connect.reload());
  45. });
  46. gulp.task('css', ['clean:css'], function() {
  47. return gulp.src('src/styles/main.styl')
  48. .pipe(isDist ? through() : plumber())
  49. .pipe(stylus({ 'include css': true, paths: ['./node_modules'] }))
  50. .pipe(autoprefixer({ browsers: ['last 2 versions'], cascade: false }))
  51. .pipe(isDist ? csso() : through())
  52. .pipe(rename('build.css'))
  53. .pipe(gulp.dest('dist/build'))
  54. .pipe(connect.reload());
  55. });
  56. gulp.task('images', ['clean:images'], function() {
  57. return gulp.src('src/images/**/*')
  58. .pipe(gulp.dest('dist/images'))
  59. .pipe(connect.reload());
  60. });
  61. gulp.task('fonts', ['clean:fonts'], function() {
  62. return gulp.src('src/fonts/*')
  63. .pipe(gulp.dest('dist/fonts'))
  64. .pipe(connect.reload());
  65. });
  66. gulp.task('clean', function() {
  67. return del.sync('dist');
  68. });
  69. gulp.task('clean:html', function() {
  70. return del('dist/index.html');
  71. });
  72. gulp.task('clean:js', function() {
  73. return del('dist/build/build.js');
  74. });
  75. gulp.task('clean:css', function() {
  76. return del('dist/build/build.css');
  77. });
  78. gulp.task('clean:images', function() {
  79. return del('dist/images');
  80. });
  81. gulp.task('clean:fonts', function() {
  82. return del('dist/fonts');
  83. });
  84. gulp.task('connect', ['build'], function() {
  85. connect.server({ root: 'dist', port: process.env.PORT || 8082, livereload: true });
  86. });
  87. gulp.task('watch', function() {
  88. gulp.watch('src/**/*.pug', ['html']);
  89. gulp.watch('src/scripts/**/*.js', ['js']);
  90. gulp.watch('src/styles/**/*.styl', ['css']);
  91. gulp.watch('src/images/**/*', ['images']);
  92. gulp.watch('src/fonts/*', ['fonts']);
  93. });
  94. gulp.task('publish', ['clean', 'build'], function(done) {
  95. ghpages.publish(path.join(__dirname, 'dist'), { logger: gutil.log }, done);
  96. });
  97. // old alias for publishing on gh-pages
  98. gulp.task('deploy', ['publish']);
  99. gulp.task('build', ['js', 'html', 'css', 'images', 'fonts']);
  100. gulp.task('serve', ['connect', 'watch']);
  101. gulp.task('default', ['build']);