gulpfile.js 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. //npm install gulp
  2. //npm install gulp-less gulp-minify-css gulp-concat gulp-notify gulp-livereload gulp-rename --save-dev gulp 实现less转化监听合并和压缩
  3. //npm install --save-dev gulp del vinyl-paths
  4. //npm install gulp-sourcemaps --save-dev 生成less对应地图
  5. // 引入 gulp
  6. var gulp = require('gulp');
  7. // 引入组件
  8. var
  9. less = require('gulp-less'),//less 文件转换
  10. minifycss = require('gulp-minify-css'),//css压缩
  11. concat = require('gulp-concat'),//文件合并
  12. rename = require('gulp-rename'),//文件更名
  13. notify = require('gulp-notify'),//提示信息
  14. livereload = require('gulp-livereload'),//网页自动刷新
  15. uglify = require('gulp-uglify'),//js压缩
  16. clean = require('gulp-clean'),
  17. imagemin = require('gulp-imagemin'),//图片压缩
  18. pngcrush = require('imagemin-pngcrush');
  19. gulp.task('clean', function() {
  20. return gulp.src(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], {read: false})
  21. .pipe(clean());
  22. });
  23. // 压缩图片
  24. gulp.task('img', function() {
  25. return gulp.src('src/images/*')
  26. .pipe(imagemin({
  27. progressive: true,
  28. svgoPlugins: [{removeViewBox: false}]
  29. }))
  30. .pipe(gulp.dest('dist/statics/images/'))
  31. .pipe(notify({ message: 'img task ok' }));
  32. });
  33. //转换less文件
  34. gulp.task('less', function() {
  35. return gulp.src('src/less/*.less')//该任务针对的文件
  36. .pipe(less())//该任务调用的模块
  37. .pipe(concat('main.css'))
  38. .pipe(gulp.dest('dist/statics/css'))
  39. .pipe(rename({ suffix: '.min' }))
  40. .pipe(minifycss())
  41. .pipe(gulp.dest('dist/statics/css'))
  42. .pipe(notify({ message: 'css task ok' }));
  43. });
  44. //转换less文件
  45. gulp.task('css', function() {
  46. return gulp.src('src/css/*.css')//该任务针对的文件
  47. .pipe(concat('main.css'))
  48. .pipe(gulp.dest('dist/statics/css'))
  49. .pipe(rename({ suffix: '.min' }))
  50. .pipe(minifycss())
  51. .pipe(gulp.dest('dist/statics/css'))
  52. .pipe(notify({ message: 'css task ok' }));
  53. });
  54. // 检查js
  55. /*gulp.task('lint', function() {
  56. return gulp.src('src/js/*.js')
  57. .pipe(jshint())
  58. .pipe(jshint.reporter('default'))
  59. .pipe(notify({ message: 'lint task ok' }));
  60. });*/
  61. //压缩,合并 模块js
  62. gulp.task('js', function() {
  63. return gulp.src('src/js/modules/*.js') //需要操作的文件
  64. .pipe(concat('main.js')) //合并所有js到main.js
  65. .pipe(gulp.dest('dist/statics/js')) //输出到文件夹
  66. .pipe(rename({suffix: '.min'})) //rename压缩后的文件名
  67. .pipe(uglify()) //压缩
  68. .pipe(gulp.dest('dist/statics/js')) //输出
  69. .pipe(notify({ message: 'js task ok' }));
  70. });
  71. //压缩,合并 公用js
  72. gulp.task('public_js', function() {
  73. return gulp.src('src/js/public/*.js') //需要操作的文件
  74. .pipe(concat('public.js')) //合并所有js到main.js
  75. .pipe(gulp.dest('dist/statics/js')) //输出到文件夹
  76. .pipe(rename({suffix: '.min'})) //rename压缩后的文件名
  77. .pipe(uglify()) //压缩
  78. .pipe(gulp.dest('dist/statics/js')) //输出
  79. .pipe(notify({ message: 'js task ok' }));
  80. });
  81. // 第三方框架移植
  82. gulp.task('frames_js',function() {
  83. return gulp.src(['src/frames/**/*'])// 该任务针对的文件
  84. .pipe(gulp.dest('dist/frames'))
  85. .pipe( notify({
  86. message: 'frames_js task ok'
  87. }));
  88. });
  89. // 组件样式
  90. gulp.task('components_less', function() {
  91. return gulp.src('src/components/**/*.less')//该任务针对的文件
  92. .pipe(less())
  93. .pipe(minifycss())
  94. .pipe(gulp.dest('dist/components/'))
  95. .pipe(notify({ message: 'components_less task ok' }));
  96. });
  97. // 组件脚本
  98. gulp.task('components_js', function() {
  99. return gulp.src('src/components/**/*.js')//该任务针对的文件
  100. // .pipe(uglify())
  101. .pipe(gulp.dest('dist/components/'))
  102. .pipe(notify({ message: 'components_js task ok' }));
  103. });
  104. // 组件HTML
  105. gulp.task('components_html', function() {
  106. return gulp.src('src/components/**/*.html')//该任务针对的文件
  107. .pipe(gulp.dest('dist/components/'))
  108. .pipe(notify({ message: 'components_html task ok' }));
  109. });
  110. // 默认任务
  111. gulp.task('default', function(){
  112. gulp.run('img', 'less', 'css', 'components_less', 'components_js', 'components_html', 'js', 'public_js', 'frames_js');
  113. // livereload.listen();
  114. gulp.watch('src/less/*.less', ['less']);
  115. gulp.watch('src/components/**/*.less', ['components_less']);
  116. gulp.watch('src/components/**/*.js', ['components_js']);
  117. gulp.watch('src/components/**/*.html', ['components_html']);
  118. gulp.watch('src/js/modules/*.js', ['js']);
  119. gulp.watch('src/js/public/*.js', ['public_js']);
  120. gulp.watch('src/frames/**/*', ['frames_js']);
  121. gulp.watch('src/css/*.css', ['css']);
  122. });
  123. // gulp.task('default', ['clean'], function(){
  124. // gulp.start('less', 'js', 'watch');
  125. // });