gulp-常用插件使用

我的目录，

sass编译

• sass、gulp-sass

npm i sass gulp-sass -D

使用

const sass = require('gulp-sass')(require('sass'))

function taskSass() {
  return src('./src/sass/*.scss')
    .pipe(sass()) // 编译 sass 文件
    .pipe(dest('/src/css/'))
}

压缩css、自动为css添加浏览器前缀、合并文件

• 压缩css： gulp-minify-css
• 添加前缀： gulp-autoprefixer
• 合并文件： gulp-concat

npm i gulp-minify-css gulp-autoprefixer gulp-concat -D

使用

function taskSass() {
  return src('./src/sass/*.scss')
    .pipe(sass()) // 编辑sass
    .pipe(concat('common.css')) // 将sass下编译后的文件合并到 common.css 中
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 2 version'], // 兼容最新的两个版本
      cascade: false
    }))
    // .pipe(minifyCSS()) // 压缩css
    .pipe(rename({
      suffix: '.min' // 后缀 min 后缀
    }))
    .pipe(dest('./src/css/'))
}

压缩js、编译ES6语法

• 压缩js：gulp-uglify
• 编译ES6：gulp-babel

npm i gulp-uglify gulp-babel -D

使用

function taskJs() {
  return src('./src/js/*.js')
    .pipe(babel({ // 编译ES6
      presets: ['@babel/preset-env']
    }))
    .pipe(uglify()) // 压缩js文件
    .pipe(dest('./dist/js/'))
}

压缩图片

• gulp-imagemin

  如果出现引入报错的情况，可以尝试降低 gulp-imagemin 的版本，如 8.0.0 -> 7.1.0

function taskImage() {
  src('./src/images/*.{png,jpg,gif}')
    .pipe(imagemin()) // 压缩图片
    .pipe(dest('./dist/images/'))
}

watch 监听文件变化执行对应任务

// 注意：如果任务方法中不加 return，则只能监听一次
function taskWatch() {
  watch(['./src/sass/*.scss'], taskSass) // 监听sass文件中 .scss文件的变化，执行 taskSass 方法
  watch(['./src/js/*.js'], taskJs)
}

搭建本地服务，实现文件变化页面刷新

• gulp-connect

npm i gulp-connect -D

// 本地服务
function taskServer(cb) {
  return connect.server({
    livereload: true,
    port: '8081',
    host: '127.0.0.1',
    root: 'dist'
  })
}
// 刷新页面
function taskHtml() {
  return src('./dist/*.html')
    .pipe(connect.reload())
}
function taskWatch() {
  watch(['./src/**/*.*'], taskHtml) // 监听src目录下文件变化，进行重新加载
}

// 默认任务
exports.default = parallel(taskWatch, taskServer)