gulpfile.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. var gulp = require('gulp');
  2. var sass = require('gulp-sass');
  3. var prefix = require('gulp-autoprefixer');
  4. var uglify = require('gulp-uglify');
  5. var concat = require('gulp-concat');
  6. var cssNano = require('gulp-cssnano');
  7. var rename = require('gulp-rename');
  8. var babel = require("gulp-babel");
  9. var sourcemaps = require("gulp-sourcemaps");
  10. var browserSync = require('browser-sync').create();
  11. // Launch the server
  12. gulp.task('browser-sync', function() {
  13. browserSync.init({
  14. server: {
  15. baseDir: './'
  16. },
  17. startPath: '/demo'
  18. });
  19. });
  20. // Move files
  21. gulp.task('copy', function () {
  22. gulp.src('src/font/*')
  23. .pipe(gulp.dest('dist/font'));
  24. gulp.src(['src/*.jpg', 'src/*.png'])
  25. .pipe(gulp.dest('dist'));
  26. });
  27. // Build js files
  28. gulp.task('compressJS', function() {
  29. gulp.src(['src/*.js'])
  30. .pipe(sourcemaps.init())
  31. .pipe(babel({
  32. presets: ['es2015']
  33. }))
  34. .pipe(uglify())
  35. .pipe(rename({
  36. suffix: ".min"
  37. }))
  38. .pipe(sourcemaps.write("."))
  39. .pipe(gulp.dest('dist'))
  40. .pipe(browserSync.stream());
  41. });
  42. // Build css files
  43. gulp.task('compressCSS', function() {
  44. gulp.src('src/*.scss')
  45. .pipe(sass().on('error', sass.logError))
  46. .pipe(prefix(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], { cascade: true }))
  47. .pipe(cssNano())
  48. .pipe(rename({
  49. suffix: ".min"
  50. }))
  51. .pipe(gulp.dest('dist'))
  52. .pipe(browserSync.stream());
  53. });
  54. // Watch files for changes & recompile
  55. gulp.task('watch', function () {
  56. gulp.watch(['src/*.js'], ['compressJS']);
  57. gulp.watch(['src/*.scss'], ['compressCSS']);
  58. gulp.watch('demo/*.html').on('change', browserSync.reload);
  59. gulp.watch('demo2/*.html').on('change', browserSync.reload);
  60. gulp.watch('demo/font/*', ['copy']);
  61. });
  62. // compile the project, including move font, compress js and scss, also be used to test
  63. gulp.task('release', ['copy', 'compressJS', 'compressCSS']);
  64. // Default task, running just `gulp` will move font, compress js and scss, launch server, watch files.
  65. gulp.task('default', ['release', 'browser-sync', 'watch']);