gulpfile.js 2.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  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. uglify = require('gulp-uglify'),//js压缩
  14. notify = require('gulp-notify');//提示信息
  15. /* clean = require('gulp-clean');
  16. gulp.task('clean', function() {
  17. return gulp.src(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], {read: false})
  18. .pipe(clean());
  19. });*/
  20. //转换less文件
  21. gulp.task('less', function() {
  22. return gulp.src('src/less/*.less')//该任务针对的文件
  23. .pipe(less())//该任务调用的模块
  24. .pipe(gulp.dest('src/css'))
  25. .pipe(notify({ message: 'less task ok' }));
  26. });
  27. // 合并、压缩、重命名css
  28. gulp.task('css', function() {
  29. return gulp.src('src/css/*.css')
  30. /*.pipe(concat('fanwe.css'))
  31. .pipe(gulp.dest('src/css'))
  32. .pipe(rename({ suffix: '.min' }))*/
  33. .pipe(minifycss())
  34. .pipe(gulp.dest('css'))
  35. .pipe(notify({ message: 'css task ok' }));
  36. });
  37. //压缩,合并 模块js
  38. gulp.task('js', function() {
  39. return gulp.src('src/js/modules/*.js') //需要操作的文件
  40. .pipe(concat('main.js')) //合并所有js到main.js
  41. .pipe(gulp.dest('dist/statics/js')) //输出到文件夹
  42. .pipe(rename({suffix: '.min'})) //rename压缩后的文件名
  43. .pipe(uglify()) //压缩
  44. .pipe(gulp.dest('dist/statics/js')) //输出
  45. .pipe(notify({ message: 'js task ok' }));
  46. });
  47. //压缩,合并 公用js
  48. gulp.task('public_js', function() {
  49. return gulp.src('src/js/public/*.js') //需要操作的文件
  50. .pipe(concat('public.js')) //合并所有js到main.js
  51. .pipe(gulp.dest('dist/statics/js')) //输出到文件夹
  52. .pipe(rename({suffix: '.min'})) //rename压缩后的文件名
  53. .pipe(uglify()) //压缩
  54. .pipe(gulp.dest('dist/statics/js')) //输出
  55. .pipe(notify({ message: 'js task ok' }));
  56. });
  57. // 默认任务
  58. gulp.task('default', function(){
  59. gulp.run('less', 'css', 'js');
  60. gulp.watch('src/less/*.less', ['less']);
  61. gulp.watch('src/js/modules/*.js', ['js']);
  62. gulp.watch('src/css/*.css', ['css']);
  63. });