gulp的使用

gulp

一、gulp4

1.series 和 parallel 的区别

// series 顺序执行
gulp.task(
  'default',
  gulp.series(['a'], function (done) {
    console.log('bbb');
    done();
  })
);
// parallel 同时执行
gulp.task(
  'default',
  gulp.parallel(['a'], function (done) {
    console.log('bbb');
    done();
  })
);

2.插件

"gulp": "^4.0.2",
"gulp-load-plugins": "^2.0.7",
"gulp-rename": "^2.0.0",
"gulp-concat": "^2.6.1",
"gulp-uglify": "^3.0.2",
"gulp-sass": "^5.1.0",
"sass": "^1.50.0",
"gulp-minify-css": "^1.2.4",
"browser-sync": "^2.27.9",
"gulp-minify-html": "^1.0.6"

3.相关示例

// 导入 gulp 模块
var { series, src, dest, watch } = require('gulp');
// 可以一次性包括 package.json 里面的所有的 gulp 依赖包，无需在 gulpfile.js 使用require 关键字一个一个的把依赖包导入进去
var plugins = require('gulp-load-plugins')();
// 打包 sass的
var sass = require('gulp-sass')(require('sass'));
// 实时检测文件修改，刷新浏览器
var browser = require('browser-sync').init({
  server: './dist',
  port: 4050,
});

exports.default = series([changecss, changejs, changehtml], main);

async function changejs() {
  src('./src/js/**/*.js')
    .pipe(plugins.concat('main.js')) // 将文件拼接
    .pipe(plugins.uglify()) //压缩文件
    .pipe(plugins.rename('main.min.js')) //将文件重命名
    .pipe(dest('./dist/js/')) // 将文件存放在哪
    .on('end', browser.reload); // 打包完成
}

async function changecss() {
  src('./src/sass/**/*.scss')
    .pipe(sass()) // 转为 css 文件
    .pipe(plugins.concat('main.css')) // 拼接文件
    .pipe(plugins.minifyCss()) // 压缩文件
    .pipe(plugins.rename('main.min.css')) // 重命名
    .pipe(dest('./dist/css/')) // 存放文件
    .on('end', browser.reload);
}

async function changehtml() {
  src('./src/**/*.html')
    .pipe(plugins.minifyHtml())
    .pipe(dest('./dist/'))
    .on('end', browser.reload);
}

async function main() {
  watch('./src/js/**/*.js', changejs);
  watch('./src/sass/**/*.scss', changecss);
  watch('./src/**/*.html', changehtml);
}

二、gulp3

1.运行环境

• gulp3 运行的 node 版本需在 10 以下

2.相关插件

• 和 gulp4 一样

3.相关示例

const gulp = require('gulp');
const concat = require('gulp-concat');
const rename = require('gulp-rename');
const uglify = require('gulp-uglify');
const babel = require('gulp-babel');
const sass = require('gulp-sass')(require('sass'));
const minifyCss = require('gulp-minify-css');

gulp.task('default', function () {
  gulp.watch('./src/js/**/*.js', savejs);
  gulp.watch('./src/scss/**/*.scss', saveCss);
});

function saveCss() {
  gulp
    .src('./src/scss/**/*.scss')
    .pipe(sass())
    .pipe(concat('main.css'))
    .pipe(minifyCss())
    .pipe(rename('main.min.css'))
    .pipe(gulp.dest('./dist/css'));
}
function savejs() {
  gulp
    .src('./src/js/**/*.js')
    .pipe(concat('main.js'))
    .pipe(
      babel({
        presets: ['@babel/env'],
      })
    )
    .pipe(uglify())
    .pipe(rename('main.min.js'))
    .pipe(gulp.dest('./dist/js'))
    .on('end', function () {
      console.log('保存完毕');
    });
}