[关闭]
@1002522146 2018-05-25T09:11:16.000000Z 字数 5329 阅读 466

Gulp入门指南

项目构建



gulpfile.js 完整代码

  1. var gulp = require('gulp');
  2. var $ = require('gulp-load-plugins')();
  3. // var concat = require('gulp-concat');
  4. // var uglify = require('gulp-uglify');
  5. // var rename = require('gulp-rename');
  6. // var less = require('gulp-less');
  7. // var cleanCss = require('gulp-clean-css');
  8. // var htmlmin = require('gulp-htmlmin');
  9. // var livereload = require('gulp-livereload');
  10. // var connect = require('gulp-connect');
  11. var open = require('open');
  12. gulp.task('js',function () {
  13. return gulp.src('src/js/*.js')
  14. .pipe($.concat('build.js'))
  15. .pipe(gulp.dest('dist/js'))
  16. .pipe($.uglify('dist/js/*.js'))
  17. .pipe($.rename({suffix:'.min'}))
  18. .pipe(gulp.dest('dist/js'))
  19. // .pipe(livereload())
  20. .pipe($.connect.reload());
  21. })
  22. gulp.task('less',function () {
  23. return gulp.src('src/less/*.less')
  24. .pipe($.less())
  25. .pipe(gulp.dest('src/css'))
  26. // .pipe(livereload())
  27. .pipe($.connect.reload());
  28. });
  29. gulp.task('cssMin',['less'],function () {
  30. return gulp.src('src/css/*.css')
  31. .pipe($.concat('build.css'))
  32. .pipe($.cleanCss())
  33. .pipe($.rename({compatibility: 'ie8'}))
  34. .pipe(gulp.dest('dist/css/'))
  35. // .pipe(livereload())
  36. .pipe($.connect.reload());
  37. });
  38. gulp.task('htmlMin',function () {
  39. return gulp.src('./index.html')
  40. .pipe($.htmlmin({collapseWhitespace: true}))
  41. .pipe(gulp.dest('dist'))
  42. // .pipe(livereload())
  43. .pipe($.connect.reload());
  44. })
  45. //办自动加载任务 <--- 这个得安装插件
  46. // gulp.task('watch',['default'],function () {
  47. // // 开启监视
  48. // livereload.listen();
  49. // gulp.watch('src/js/*.js',['js']);
  50. // gulp.watch(['src/less/*.less','src/css/*.css'],['less','cssMin'])
  51. // });
  52. //全自动加载任务
  53. gulp.task('server',['build'],function () {
  54. $.connect.server({
  55. root:'dist/',
  56. livereload:true,
  57. port:5000
  58. })
  59. open('http://localhost:5000');
  60. gulp.watch('src/js/*.js',['js']);
  61. gulp.watch(['src/less/*.less','src/css/*.css'],['less','cssMin'])
  62. });
  63. gulp.task('build',['js','less','cssMin','htmlMin'])
  64. gulp.task('default',['server']);

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注