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

時間 2019-11-07

原文原文鏈接

本篇文章對前端開發在gulp的使用上作了梳理，並在案例中實現瞭如下功能：css

1.轉譯 less
2.重命名
3.合併 css 、js
3.壓縮 css 、js
4.添加 MD5
5.建立服務器實時更新
6.打包並壓縮爲 .zip

點擊下載源碼html

首先奉上

文檔初始目錄

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'])

好了，完整案例到此結束。以上代碼本地檢測沒有問題，若以上文章中出現錯誤，換衣你們指出。點擊下載源碼前端