gulpfile.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152
  1. var ENV = process.env.NODE_ENV;
  2. var IS_DEVELOPMENT;
  3. if (ENV !== 'development' && ENV !== 'production')
  4. throw new Error('NODE_ENV must be set to either development or production.');
  5. else
  6. IS_DEVELOPMENT = ENV === 'development';
  7. var gulp = require('gulp');
  8. var source = require('vinyl-source-stream');
  9. var browserify = require('browserify');
  10. var watchify = require('watchify');
  11. var babelify = require('babelify');
  12. var gulpif = require('gulp-if');
  13. var uglify = require('gulp-uglify');
  14. var streamify = require('gulp-streamify');
  15. var notify = require('gulp-notify');
  16. var cssmin = require('gulp-cssmin');
  17. var gutil = require('gulp-util');
  18. var sass = require('gulp-sass');
  19. var autoprefixer = require('gulp-autoprefixer');
  20. var sourcemaps = require('gulp-sourcemaps');
  21. var imagemin = require('gulp-imagemin');
  22. // external dependencies that are not rebundled while developing,
  23. // but included in production
  24. var dependencies = [
  25. 'react',
  26. 'react/addons',
  27. 'immutable'
  28. ];
  29. var browserifyTask = function() {
  30. ['index.js', 'play.js'].forEach(function(bundle) {
  31. var appBundler = browserify({
  32. entries: './src/js/' + bundle,
  33. transform: [babelify],
  34. debug: IS_DEVELOPMENT,
  35. // required by watchify
  36. cache: {}, packageCache: {}, fullPaths: IS_DEVELOPMENT
  37. });
  38. (IS_DEVELOPMENT ? dependencies : []).forEach(function(dep) {
  39. appBundler.external(dep);
  40. });
  41. var rebundle = function() {
  42. var start = Date.now();
  43. console.log('Building BROWSERIFY(' + bundle + ') bundle');
  44. appBundler.bundle()
  45. .on('error', gutil.log)
  46. .pipe(source(bundle))
  47. .pipe(gulpif(!IS_DEVELOPMENT, streamify(uglify())))
  48. .pipe(gulp.dest(IS_DEVELOPMENT ? './build/js/' : './dist/js/'))
  49. .pipe(notify(function() {
  50. gutil.log(gutil.colors.green('BROWSERIFY(' + bundle +
  51. ') bundle built in ' + (Date.now() - start) + 'ms'));
  52. }));
  53. };
  54. if (IS_DEVELOPMENT) {
  55. appBundler = watchify(appBundler);
  56. appBundler.on('update', rebundle);
  57. }
  58. rebundle();
  59. });
  60. if (IS_DEVELOPMENT) {
  61. var vendorBundler = browserify({
  62. debug: true,
  63. require: dependencies
  64. });
  65. var start = new Date();
  66. console.log('Building VENDOR bundle');
  67. vendorBundler.bundle()
  68. .on('error', gutil.log)
  69. .pipe(source('vendor.js'))
  70. .pipe(gulp.dest('./build/js/'))
  71. .pipe(notify(function() {
  72. gutil.log(gutil.colors.green(
  73. 'VENDOR bundle built in ' + (Date.now() - start) + 'ms'));
  74. }));
  75. }
  76. };
  77. var cssTask = function() {
  78. if (IS_DEVELOPMENT) {
  79. var run = function() {
  80. var start = new Date();
  81. console.log('Building CSS bundle');
  82. gulp.src('./src/css/main.scss')
  83. .pipe(sourcemaps.init())
  84. .pipe(sass({
  85. errLogToConsole: true
  86. }))
  87. .pipe(sourcemaps.write('./maps'))
  88. .pipe(gulp.dest('./build/css/'))
  89. .pipe(notify({
  90. message: function() {
  91. gutil.log(gutil.colors.green(
  92. 'CSS bundle built in ' + (Date.now() - start) + 'ms'));
  93. },
  94. onLast: true
  95. }));
  96. };
  97. run();
  98. gulp.watch('./src/css/*.scss', run);
  99. } else {
  100. gulp.src('./src/css/main.scss')
  101. .pipe(sass({
  102. errLogToConsole: true
  103. }))
  104. .pipe(autoprefixer({
  105. browsers: ['last 2 versions'],
  106. cascade: false
  107. }))
  108. .pipe(cssmin())
  109. .pipe(gulp.dest('./dist/css/'))
  110. .pipe(notify({
  111. message: function() {
  112. gutil.log(gutil.colors.green('CSS bundle built.'));
  113. },
  114. onLast: true
  115. }));
  116. }
  117. };
  118. var imageminTask = function() {
  119. gulp.src('./src/img/*')
  120. .pipe(imagemin({
  121. progressive: true,
  122. svgoPlugins: [{removeViewBox: false}]
  123. }))
  124. .pipe(gulp.dest('./' + (IS_DEVELOPMENT ? 'build' : 'dist') + '/img/'))
  125. .pipe(notify({
  126. message: function() {
  127. gutil.log(gutil.colors.green('IMAGES/SVG optimized.'));
  128. },
  129. onLast: true
  130. }));
  131. };
  132. gulp.task('default', function() {
  133. browserifyTask();
  134. cssTask();
  135. imageminTask();
  136. });