常见的gulp操作

cmd 复制代码

npm install gulp --save-dev
npm install gulp --g

多环境区分

cmd 复制代码

npm install cross-env --save-dev

我们可以使用自定义参数来区分多种环境。如以下代码所示，使用自定义参数NODE_ENV SERVICE_ENV 可以实现dev dev:stage build build:stage四种环境的配置。

json 复制代码

{
    "scripts": {
        "dev": "cross-env NODE_ENV=development SERVICE_ENV=beta gulp",
        "dev:stage": "cross-env NODE_ENV=development SERVICE_ENV=stage gulp",
        "build": "cross-env NODE_ENV=production SERVICE_ENV=beta gulp build",
        "build:stage": "cross-env NODE_ENV=production SERVICE_ENV=stage gulp build"
    },
}

清空文件夹

cmd 复制代码

npm install del --save-dev

在gulpfile.js 中配置：

javascript 复制代码

const del = require("del");
function cleanWorks() {
  return del([`del path`]);
}

合并和压缩css

cmd 复制代码

npm install gulp-concat gulp-sass gulp-clean-css --save-dev

在gulpfile.js 中配置：

javascript 复制代码

const concat = require("gulp-concat");
const sass = require("gulp-sass")(require("node-sass"));
const cleanCSS = require("gulp-clean-css");
function minifycss() {
  return gulp
    .src("src/sass/*.scss")
    .pipe(sass().on("error", sass.logError))
    .pipe(concat("index.min.css"))
    .pipe(cleanCSS())
    .pipe(gulp.dest("output path"));
}

合并和压缩js

cmd 复制代码

npm install gulp-concat gulp-uglify --save-dev

在gulpfile.js 中配置：

javascript 复制代码

const concat = require("gulp-concat");
const uglify = require("gulp-uglify");
function minifyjs() {
  return gulp
    .src(["src/js/*.js"])
    .pipe(concat("index.min.js"))
    .pipe(uglify())
    .pipe(gulp.dest(prefix));
}

压缩html

cmd 复制代码

npm install gulp-htmlmin --save-dev

在gulpfile.js 中配置：

javascript 复制代码

const htmlmin = require("gulp-htmlmin");
function minifyHtml() {
  return gulp
    .src("src/html/*.html")
    .pipe(
      htmlmin({
        collapseWhitespace: true,
      })
    )
    .pipe(gulp.dest(prefix));
}

给html自定义注入js/css的地址

cmd 复制代码

npm install gulp-htmlmin --save-dev

在gulpfile.js 中配置：

javascript 复制代码

const htmlmin = require("gulp-htmlmin");
function injectHtml() {
  return gulp
    .src(`out path/*.html`)
    .pipe(
      inject(
        gulp.src([`out path/index.min.js`, `out path/index.min.css`], {
          read: false,
        }),
        { relative: true, addPrefix: "custom prefix" }
      )
    )
    .pipe(gulp.dest(`out path`));
}

复制图片

在gulpfile.js 中配置：

javascript 复制代码

function copyImg() {
  return gulp.src(["src/images/*.*"]).pipe(gulp.dest(`out path/images`));
}

监听文件变化

在gulpfile.js 中配置：

javascript 复制代码

function watchFiles() {
  watch("src/sass/*.scss", series(cleanCss, minifycss));
  watch("src/js/**/*.js", series(cleanJs, minifyjs));
}

启动静态服务器

在gulpfile.js 中配置, 启动之后可以在http://localhost:3003 进行访问

javascript 复制代码

const createServer = () => {
  return gulp.src(`./out path`).pipe(
    webserver({
      //创建服务器
      port: "3003", //端口号
      open: "/path.html", //默认打开路径
      livereload: true, //热更新
    })
  );
};

组合执行任务

在gulpfile.js 中配置：

javascript 复制代码

// 生产环境
gulp.task(
  "build",
  series(
    cleanWorks,
    series(parallel(minifycss, minifyjs, minifyHtml), injectHtml),
    copyImg
  )
);
// 开发环境
gulp.task(
  "default",
  series(
    cleanWorks,
    series(parallel(minifycss, minifyjs, minifyHtml), injectHtml),
    copyImg,
    createServer,
    watchFiles
  )
);