Gulp研究（下）： 完整案例讲解

本篇文章对前端开发在gulp的使用上做了梳理，并在案例中实现了以下功能：

1.转译 less
2.重命名
3.合并 css 、js
3.压缩 css 、js
4.添加 MD5
5.创建服务器实时更新
6.打包并压缩为 .zip

点击下载源码

首先奉上

文档初始目录

client                # 根目录
  ├─src               # 前端文件
  │  ├─css            # css
  │  │  ├─common.less
  │  │  ├─demo.css
  │  │  └─login.css 
  │  ├─js             # js
  │  │  ├─login.js
  │  │  └─register.js
  │  └─index.html     # html
  │     
  ├─.babelrc          # babel配置
  ├─gulpfile.js       # gulp
  ├─package-lock.json
  └─package.json      # 配置页

package.json的依赖

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.5.0",
    "gulp-less": "^4.0.0",
    "gulp-notify": "^3.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^3.0.0",
    "gulp-zip": "^4.1.0"
  },
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-rev": "^8.1.1",
    "gulp-rev-collector": "^1.3.1",
    "gulp-webserver": "^0.9.1",
    "run-sequence": "^2.2.1"
  }

.babelrc的配置

  "presets": [
    "es2015"
  ]

index.html插入css/js

<link rel="stylesheet" href="./dest/css/demo.css">
<script src="./dest/js/demo.js"></script>

现在开始gulpfile.js的编写

1. 先是引入所有的gulp所需插件

    const gulp = require('gulp')
    const babel = require('gulp-babel')
    const connect = require('gulp-connect')
    const webserver = require('gulp-webserver') // 服务器
    const notify = require('gulp-notify') // 提示信息
    const less = require('gulp-less') // less
    const concat = require('gulp-concat') // 文件合并
    const rename = require('gulp-rename') // 文件更名
    const uglify = require('gulp-uglify') // js压缩
    const minify = require('gulp-minify-css') // css压缩
    const rev = require('gulp-rev') // 对文件名加MD5后缀
    const revCollector = require('gulp-rev-collector') // 路径替换
    const runSequence = require('run-sequence') // 同步执行任务
    const zip = require('gulp-zip') // 压缩为.zip文件

2. 定义了在下面方法中要使用的相关路径

    const path = {
      html: './src/*.html', // html 原文件地址
      js: './src/js/*.js',  // js 原文件地址
      less: './src/css/*.less',  // less 原文件地址
      css: './src/css/*.css', // css 原文件地址
      destJs:'./src/dest/js', // js的合并后的地址
      destCss:'./src/dest/css', // css的合并后的地址
      revJs:'./rev/js', // js的rev-manifest.json的地址
      revCss: './rev/css' // css的rev-manifest.json的地址
    }

3. less转译为css

    gulp.task('less', function () {
      return gulp.src(path.less)
            .pipe(less())
            .pipe(gulp.dest('./src/css/less'))
            .pipe(notify({ message: 'less编译成功' }))
    })

4. 合并css

    gulp.task('css', ['less'], function () { // 这里['less']指执行上面的任务'less'
      return gulp.src([path.css,'./src/css/less/*.css'])
            .pipe(concat('demo.css'))
            .pipe(gulp.dest(path.destCss))
            .pipe(notify({ message: 'css合并成功' }))
    })

5. 合并js

    gulp.task('js', function() {
      return gulp.src(path.js)
            .pipe(babel()) // 需要转换编译es6语法 并需要配置 babel
            .pipe(concat('demo.js')) // 合并js文件并命名为demo.js
            .pipe(gulp.dest(path.destJs)) // 输出在dest/js目录下
            .pipe(notify({ message: 'js合并压缩成功' }))
    })

6. css和js准备完毕，创建一个服务器供页面实时刷新的三步走

    // 1 使用webserver启动一个Web服务器  
    gulp.task('webserver', function () {  
      gulp.src('./src')  // 服务器目录（./代表根目录）
      // 运行gulp-webserver
      .pipe(webserver({
          port: 8000,  //端口，默认8000
          livereload: true,  // 启用LiveReload
          open: true,  // 服务器启动时自动打开网页
          directoryListing: {
              enable: false, // 是否展开根目录
              path: './src' // 服务器根目录
          },
          fallback: 'index.html', // 浏览器默认打开index.html页面
          proxies: [] // 代理
      }))
    })
    // 2 创建刷新html的任务  refresh
    gulp.task('refresh', function () {
      gulp.src(path.html)
          .pipe(webserver.reload()) // 重新加载
    })
    
    // 3 监听变化的css、js、html文件实时调用 refresh
    gulp.task('watch', function () {
      gulp.watch(path.less, ['css']) // less 发生变化执行 css r任务
      gulp.watch(path.css, ['css']) // css 发生变化执行 css 任务
      gulp.watch(path.js, ['js']) // js 发生变化执行 js 任务
      gulp.watch(path.destJs, ['refresh']) // 执行了js任务，destJS内的demo.js发生变化，然后执行refresh
      gulp.watch(path.destCss, ['refresh']) // 执行了css任务，destCss内的demo.css发生变化，然后执行refresh
      gulp.watch(path.html, ['refresh'])
    })

7. 压缩打包css并生成带版本后缀

    gulp.task('revCss',['css'], function () {
      gulp.src(path.destCss + '/*.css')
      .pipe(minify())
      // .pipe(rename({suffix: '.min'}))
      .pipe(rev())  // 文件名加MD5后缀
      .pipe(gulp.dest('./build/dest/css'))
      .pipe(rev.manifest()) // 生成一个rev-manifest.json
      .pipe(gulp.dest(path.revCss))
    })

8. 压缩打包js并生成带版本后缀

    gulp.task('revJs',['js'], function () {
      gulp.src(path.destJs + '/*.js')
      .pipe(uglify())// 压缩js
      // .pipe(rename({ suffix: '.min' })) // 添加后缀.min
      .pipe(rev())  // 文件名加MD5后缀
      .pipe(gulp.dest('./build/dest/js'))
      .pipe(rev.manifest()) // 生成一个rev-manifest.json
      .pipe(gulp.dest(path.revJs))
    })

9. 更新版本

    gulp.task('revHtml', function () {
      return gulp.src(['./rev/**/*.json', path.html]) // 找到相应生成的rev-manifest.json
          .pipe(revCollector()) // 替换path.html中的名字
          .pipe(gulp.dest('./build'))
          .pipe(notify({ message: '打包成功' }))
    })

10. 排序生成所有打包文件的任务一键生成

    gulp.task('collect', ['revJs', 'revCss'], function () {
      gulp.run('revHtml')
    })

11. 然后压缩成.zip文件

    gulp.task('zip', function () {
      return gulp.src('./build/**')
      .pipe(zip('gulp-demo' + '.zip'))
      .pipe(gulp.dest('./'))
    })

12. 改成自己喜欢用的指令收尾

    // 运行 Gulp client
    gulp.task('dev', ['webserver', 'watch'])
    // 运行 Gulp bulid
    gulp.task('build', ['collect'])
    // 打包
    gulp.task('build:zip', ['zip'])

好了，完整案例到此结束。以上代码本地检测没有问题，若以上文章中出现错误，换衣大家指出。点击下载源码