gulp

gulp 的简单使用

最近有学到 gulp, 所以打算所学的总结一下

1. 安装 gulp

  • 先全局安装

    1
    npm i gulp -g

  • 安装插件

    1
    npm i gulp gulp-babel gulp-concat gulp-uglify -D

2. 使用 gulp

  • 在当前目录新建 gulpfile.js 文件

  • 引入插件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    var gulp = require('gulp');
    var babel = require("gulp-babel"); // 默认不支持 es6 , 需要配置
    var concat = require('gulp-concat'); 
    var uglify = require('gulp-uglify');
    var rename = require('gulp-rename');
    var less = require('gulp-less');
    var stylus = require('gulp-stylus');
    var cssClean = require('gulp-clean-css');
    var htmlMin = require('gulp-htmlmin');
    var livereload = require('gulp-livereload')
    var connect = require('gulp-connect');

  • 注册任务

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /**
     * 合并压缩 js 的任务
     */
    gulp.task('js', function () {
      return gulp.src('src/js/**/*.js')
        .pipe(babel())
        .pipe(concat('build.js'))
        .pipe(gulp.dest('dist/js/')) //输出
        .pipe(uglify())  //压缩
        .pipe(rename({ suffix: '.min' })) //重命名
        .pipe(gulp.dest('dist/js/'))
        .pipe(livereload())
        .pipe(connect.reload())
    })

  • 配置babel, 支持更高语法

    1
    2
    3
    4
    5
    6
    7
    npm i gulp-babel @babel/core @babel/plugin-transform-runtime @babel/preset-env -D
    // 引入以及使用
    var babel = require("gulp-babel");
    gulp.task('js', function () {
      return gulp.src('src/js/**/*.js')
        .pipe(babel()) 
     ....

    在当前目录新建 .babelrc 文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    {
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules":false,
            "targets": {
              "browsers":["ie >= 7"]
            },
            "debug":false,
            "loose":true
          }
        ]
      ],
      "plugins":[
        "@babel/plugin-transform-runtime",
      ]
    }

  • 运行 gulp , 会默认执行下面的任务

    1
    gulp.task('default', gulp.parallel('js', 'stylus', 'css', 'html', 'watch', 'ant_connect'))

3. 常用功能

  1. 合并压缩 css

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    /** 合并压缩 css */
    gulp.task('css', function () {
      return gulp.src('src/css/index.css')
        .pipe(concat('build.css'))  // 合并以后已 build.css命名
        .pipe(rename({suffix: '.min'}))  // 压缩文件 加上 .min 后缀
        .pipe(cssClean({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist/css/')) // 输出目录
        .pipe(livereload()) 
        .pipe(connect.reload())
    })

  2. 压缩 html

    1
    2
    3
    4
    5
    6
    7
    8
    /** 压缩 html */
    gulp.task('html', function () {
      return gulp.src('index.html')
        .pipe(htmlMin({collapseWhitespace: true}))
        .pipe(gulp.dest('dist/'))
        .pipe(livereload())
        .pipe(connect.reload())
    })

  3. 转换 stylus 

    1
    2
    3
    4
    5
    6
    7
    8
    /** 转换 stylus */
    gulp.task('stylus', function () {
      return gulp.src('src/stylus/*.stylus')
        .pipe(stylus())
        .pipe(gulp.dest('src/css/'))
        .pipe(livereload())
        .pipe(connect.reload())
    })

  4. 监听文件以及开启服务

    • 安装插件

      1
      npm i gulp-livereload gulp-connect -D

    • 使用

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      /**
       * 开启监听
       */
      gulp.task('watch', function () {
        livereload.listen();
        gulp.watch('*.html', gulp.series('html'));
        gulp.watch('src/js/*.js', gulp.series('js'));
        gulp.watch(['src/css/*.css', 'src/stylus/*.stylus'], gulp.series('css'))
      })

      /**
       * 开启服务
       */
      gulp.task('ant_connect', function() {
        connect.server({
            root: 'dist',   // 静态目录
            livereload: true,
            port: 8888
        })
      })

      /**
       * 默认任务
       */
      gulp.task('default', gulp.parallel('js', 'stylus', 'css', 'html', 'watch', 'ant_connect'))

参考文档